TypeScript+ReactでCSSにtextAlignを使うときにエラーを出さない

発生した問題

ReactのコンポーネントでtextAlignのスタイルを適用としたところ、エラーが発生した。

const App = () => {

  const divStyle = {
    textAlign: 'right',
  }

  return (
    <div style={divStyle}>
      hello
    </div>
  );
};

エラー

TS2322: Type '{ textAlign: string }' is not assignable to type 'Properties<string | number, string & {}>'.
   Types of property 'textAlign' are incompatible.
     Type 'string' is not assignable to type 'TextAlign | undefined'.

対応した内容

divStyleに対して、CSS.Propertiesの型指定したところエラーが出なくなった (コレがベストな対応かはあまり自信がない...)

import * as CSS from "csstype";

const App = () => {
  const divStyle: CSS.Properties = {
    textAlign: 'right',
  }
  ...

調査メモ

データ型について調べた時のメモを書いておきます。

Reactのタグに対する型定義(例：divタグ)

React.HTMLAttributesの型指定がある。

• node_modules/@types/react/index.d.ts

    div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

DetailedHTMLPropsの型指定

HTMLAttributesの型指定がある

• node_modules/@types/react/index.d.ts

type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;

HTMLAttributes

HTMLAttributesはDOMAttributesを継承している

• node_modules/@types/react/index.d.ts

    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {

DOMAttributes

• node_modules/@types/react/index.d.ts

syleはCSSProperties型として定義されている

    interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
        // Attributes which also defined in HTMLAttributes
        // See comment in SVGDOMPropertyConfig.js
        style?: CSSProperties | undefined;

CSSProperties

CSSPropertiesは、CSS.Propertiesを継承している

• node_modules/@types/react/index.d.ts

import * as CSS from 'csstype';

export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You are able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
 }

Properties

CSS.Propertiesは、StandardPropertiesを継承している

• node_modules/csstype/index.d.ts

export interface Properties<TLength = (string & {}) | 0, TTime = string & {}>
  extends StandardProperties<TLength, TTime>,
    VendorProperties<TLength, TTime>,
    ObsoleteProperties<TLength, TTime>,
    SvgProperties<TLength, TTime> {}

StandardProperties

StandardLonghandPropertiesを継承している

export interface StandardProperties<TLength = (string & {}) | 0, TTime = string & {}>
  extends StandardLonghandProperties<TLength, TTime>,
    StandardShorthandProperties<TLength, TTime> {}

StandardLonghandProperties

StandardLonghandPropertiesはtextAlignを持つ

• node_modules/csstype/index.d.ts

export interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
  ...
  textAlign?: Property.TextAlign | undefined;

Amazonでおトクに買い物する方法

AmazonチャージでポイントGET

Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損！