(暫定対応)ReactのCSSPropertyで型の不一致が発生する

問題

const scoreStyle = { margin: 50, textAlign: "left" };
...
<div style={ scoreStyle } >
...

こういうコードを書いたところ

Type '{ margin: number; textAlign: string; }' is not assignable to type 'CSSProperties'.
  Types of property 'textAlign' are incompatible.
    Type 'string' is not assignable to type '"left" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "justify" | "match-parent" | "right" | "start" | undefined'.  TS2322

こんな感じで型が一致しない。

$ tsc --version
Version 3.7.5

使ったTypeScriptは3.7.5

対策

const scoreStyle = { margin: 50, textAlign: "left" as "left" };

こうやって型アサーションすれば一応コンパイルできるようになるが、型を無理やり合わせているのであまり良い方法ではない気がする。ちゃんと型をimportして定義するのは面倒なのでもう少しマシな方法が欲しい。後日別の方法が思いついたら更新する。

参考

2020-05-26