React + TypeScript: flexDirectionをstyleに設定すると怒られる

スタイルをオブジェクト(style)に定めて、要素のstyle属性に与えたら、flexDirectionだけ認めてもらえず怒られました。

変数にオブジェクトで定めたCSSのflexDirectionが要素のstyle属性に設定できない。

絞り込んだ問題のコードはごくシンプルです。何がいけないのか、よくわかりません。

const style = {
	flexDirection: 'column'
};
export default function App() {
	return (
		<div style={{ ...style }}>

		</div>
	);
}

エラーメッセージはつぎのとおりです。flexDirectionの型stringが弾かれているらしいことはわかります。

(property) React.HTMLAttributes.style?: React.CSSProperties | undefined

Type '{ flexDirection: string; }' is not assignable to type 'Properties'.
Types of property 'flexDirection' are incompatible.
Type 'string' is not assignable to type 'FlexDirection | undefined'.ts(2322)

結論: オブジェクトをReact.CSSPropertiesで型づけする

はじめに結論を示してしまいましょう。スタイル(CSS)のオブジェクトは、React.CSSPropertiesで型づけしてください。

import { CSSProperties } from 'react';

const style: CSSProperties = {
	flexDirection: 'column'
};

他のCSSプロパティは通る

でも、他のCSSプロパティは通ります。さらに、要素のstyle属性にインラインでflexDirectionを加えれば、何も怒られません、

const style = {
	display: 'flex',
	// flexDirection: 'column'
	justifyContent: 'space-evenly',
	alignItems: 'center'
};
export default function App() {
	return (
		// <div style={{ ...style }}>
		<div style={{ ...style, flexDirection: 'column' }}>

		</div>
	);
}

型を定数にする

問題は、flexDirectionの型がstringと推論されてしまうことです。stringでは広すぎ、絞り込んだ定数にしなければなりません。

Types of property 'flexDirection' are incompatible.
Type 'string' is not assignable to type 'FlexDirection | undefined'.ts(2322)

そこで、型注釈により定数にすれば、あっさりと通ります。

const style = {
	// flexDirection: 'column'
	flexDirection: 'column' as 'column'
};

さらに、オブジェクト(style)の定め全体をas constで限定しても構いません(「TypeScript usage」参照)。

const style = {
	flexDirection: 'column',
// };
} as const;

それでも、改めて結論として、スタイルを定めるオブジェクトはReact.CSSPropertiesで型づけするのがよいでしょう。型推論によるリテラル型の拡張や限定については、「Literal Type Widening in TypeScript」が参考になります。