TypeScript+JSXしているときに、JSX内で型アサーションを書いてエラーが出た場合

TypeScript+JSXしているときに、JSX内で型アサーションを書いてエラーが出た場合

JSX内では従来のシンタックスが使えない

TypeScriptでは従来、型アサーションはこう書きました。

var inputB = <HTMLInputElement>document.querySelector("#file");
inputB.files;

JSX内でこのシンタックスを使おうとするとエラーが出てコンパイルを完了できません。

render(){
  return <SlotComponent slot={<Cell>this.child} />
}

src/components/workspace/slot.tsx(31,63): error TS1003: Identifier expected.
src/components/workspace/slot.tsx(32,22): error TS1005: '}' expected.
src/components/workspace/slot.tsx(37,21): error TS1005: '}' expected.
src/components/workspace/slot.tsx(56,5): error TS1109: Expression expected.
src/components/workspace/slot.tsx(60,2): error TS17002: Expected corresponding JSX closing tag for 'Cell'.

asオペレーターを使う

かわりに、TypeScript 1.6でJSXとともに追加された、asオペレーターを使います。

render(){
  return <CellComponent cell={this.child as Cell} />
}

ActionScript時代はasでキャストしていたのでとても懐かしい。

参考