TypeScriptのOptional Property

2019-12-09

TypeScriptで、必須でないpropertyも含めた型宣言をしてしまうと、指定しなかった場合にエラーが出てしまう。

interface Props extends WithStyles<typeof styles> {
  title: string
  default_order: 'asc' | 'desc';
  default_orderBy: string;
  league: 'Central' | 'Pacific';
  ...
}

class CommonTable extends React.Component<Props, State> {
    ...
}
...

class Main extends React.Component<MainProps> {

render() {
    return (
        <CommonTable
            title="交流戦順位表"
            default_order="desc"
            default_orderBy="勝率"
            // league を指定しないとエラーになる
        />
        ...
    )
}

Optionalな値を宣言したければ?をつければよい。この場合、必須ではないが指定するならこの型、といった宣言になる。

interface Props extends WithStyles<typeof styles> {
  title: string
  default_order: 'asc' | 'desc';
  default_orderBy: string;
  league?: 'Central' | 'Pacific';
  ...
}

React開発現場の教科書

Amazonで調べる

楽天市場で調べる

Yahooショッピングで調べる

7netで調べる

property
型