Question

如何将自定义枚举类型注入HTMLInputElement的值？

我搜索了打字稿文档，但找不到这样做。

$query = DB::table('Student a')->select([DB::raw('SQL_CALC_FOUND_ROWS')], 'a.*', b.*')->leftjoin('girls b', 'a.id', '=', 'b.id')->where('a.name', '!=', 'null');

$query->skip($iPagNo)->take($iSwRws);

$sqlPg = $query->get();

print_r($sqlPg);

我尝试创建自定义类型，但失败了。

enum ValidColor {
  'red',
  'blue',
}

class paintStore {
  wallColor: ValidColor = 'red';

  onPaintClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.wallColor = e.target.value // Type 'string' is not assignable to type 'ValidColor'.ts(2322)
  }
}

我该怎么做？

Answer 1

那是因为e.target.value可以是任何字符串。

您可能想保证颜色将通过其他方式变为“红色”或“蓝色”。

最简单的方法是使用'as'关键字告诉编译器“我知道这种颜色将是红色或蓝色”：

enum ValidColor {
  'red',
  'blue',
}

class paintStore {
  wallColor: ValidColor = 'red';

  onPaintClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.wallColor = e.target.value as ValidColor;
  }
}

更好的方法是使用用户定义的类型防护（更多信息，请访问https://basarat.gitbooks.io/typescript/docs/types/typeGuard.html）

enum ValidColor {
  Red = 'red',
  Blue = 'blue'
}

const validColors: string[] = [ValidColor.Red, ValidColor.Blue];

const isValidColor = (inputColor: string): inputColor is ValidColor => {
  return validColors.indexOf(inputColour) !== -1;
};

class paintStore {
  wallColor: ValidColor = 'red';

  onPaintClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    const maybeColor = e.target.value; // here it's a string

    if (isValidColor(maybeColor)) {
        // inside this block, maybeColor is narrowed to type ValidColor...
        this.wallColor = maybeColor;
    }

    // Decide what to do if it's not a valid color here
  }
}

注意函数isValidColor的返回类型-它告诉TypeScript如何调整返回值的类型。

如何为HTMLInputElement的值添加枚举类型

1 个答案: