TypeScript
propsの型定義
type Company = {
name: string,
tel: string,
address: string,
}
const Sample = (props: Company) => {
return (
<div>
<p>{props.name}</p>
<p>{props.tel}</p>
<p>{props.address}</p>
</div>
);
}
// 利用時は以下のようにpropsを指定
// <Sample name="hoge" tel="000" address="xxxx"/>型定義の管理
複数の場所で使う型はtypesディレクトリにまとめる。
mkdir src/types
touch src/types/car.ts
export type Car = {
maker: string,
model: string,
}利用時
importの後にtypeをつける。
（TypeScript3.8から追加された、型定義のみをimportするための構文）
typeをつけなくても動作するが、typeをつけることでコンパイル時に型定義のコードが取り除かれる。
import type { Car } from './types/car';
// として
const myCar: Car = {
maker: 'honda',
model: 'fit',
}コンポーネントの型定義
FC型を使う。ジェネリクスでPropsの型を指定する。
React17まではchildrenを含まない場合はVFCという型を指定していたが、React18からはFC型で統一された。
import type { FC } from 'react'
type Company = {
name: string,
tel: string,
}
const Sample: FC<Company> = props => {
return (
<div>
<p>{props.name}</p>
<p>{props.tel}</p>
</div>
);
}オプション引数とオプションプロパティ
関数の引数およびオブジェクトのプロパティは、名前の後ろに?をつけると省略可能となる。
type TypeA = {
name: string,
age?: number,
}propsの場合、オプションプロパティを使わずに分割代入のデフォルト値を使うことが多い。
const Sample: FC<TypeA> = props => {
const { nane, age=30 } = props;
return (
<div>
<p>{props.name}</p>
<p>{props.age}</p>
</div>
);
}
// ※ defaultPropsでのデフォルト値指定は非推奨となったオプショナルチェーン
オブジェクトのプロパティが存在するかどうかわからない場合、?をつけることで存在しないときはundefinedを返してくれる。
const Sample = (props: {name?: string}) => {
return (
<p>{ props.name?.toUpperCase() }</p>
);
}ライブラリの型定義
ライブラリの対応状況によって3パターンある。
- 型定義がない
古いライブラリはそもそも型定義が存在しない。
型定義なしで使用するか自分で作成することになる。 - ライブラリに型定義が含まれている
GitHubのリポジトリで.d.tsファイルを持っているかどうかで判別可能。
例えばaxiosはindex.d.tsディレクトリがあるので型定義を包含していることが分かる。 - 型定義を別でインストールする
DefinitelyTypedというGitHubリポジトリで様々なライブラリの型定義が管理されている。
ここに型定義があるライブラリはnpmで@types/ライブラリ名で型定義をインストールすることができる。
ex) npm install --save-dev @types/react-router-dom
npm info @types/xxxでDefinitelyTypedに型があるか確認することが可能。
コメント