TypeScript
環境構築
- npx create-react-app my-app2 --template typescript
- cd my-app2
- mkdir components
- npm start
基本的な型
- string
- number
- boolaen
- Array
- null
- undefined
nullとundefinedはそれぞれnullとundefinedしか入らない変数となり、単体で使うことはないがユニオン(共用体)で「文字列またはnull」のような型指定をする場合に使う。 - any
- void
関数の戻り値に使用可能
配列とオブジェクト
配列
const arr: number[] = [11,22]
またはconst arr2: Array<number> = [33,44]
オブジェクト
const obj: {name: string, age: number} = {name: 'taro', age: 20}
複合的な型
交差型（Intersection Types）
複数のオブジェクトの型をマージして新しい型を定義することができる。
const obj2: {name: string, age: number} & {age: number, isAdmin: boolean} = {
name: 'taro',
age: 20,
isAdmin: false
}
// Typeを使った場合
type TypeA = {
name: string,
age: number,
}
type TypeB = {
age: number,
isAdmin: boolean,
}
type TypeC = TypeA & TypeB
const obj3: TypeC = {name: 'jiro', age: 30, isAdmin: true}共用体型（Union Types）
複数の型を許容する型定義。
本来不必要な型までunionで許容してしまうとバグの原因になるので、必要な型だけに絞って使う。let strOrNum: string | number = "100"strOrNum = 100
ジェネリクス
ジェネリクスは型定義を使用時に動的に変更できる機能であり、オブジェクトや関数の定義に使われる。
TypeScriptを使うためには欠かせない概念である。
type CustomType <T, U> = {
val1: T,
val2: U,
}
const hoge: CustomType<string, number> = {
val1: 'hoge',
val2: 111,
}useStateはジェネリクスで型を指定する。const [name, setName] = useState<string>("")
APIで取得するデータへの型定義
以下のデータが取得可能なAPIの場合
[
{
"id": 1,
"name": "Ichiro",
"age": 20
},
{
"id": 2,
"name": "Jiro",
"age": 30
}
]以下のようにtype構文で型を定義する。
type User = {
id: number,
name: string,
age: number
}
const [users, setUsers] = useState<User[]>([])
useEffect(() => {
fetch("/users.json")
.then((res: Response) => res.json())
.then((json: User[]) => setUsers(json))
}, [])
// ※axiosの場合はget('xxxx')をget<User[]>('xxxx')とする