【TypeScript】配列・オブジェクト・関数の型は?
TypeScript では定数・変数・関数を定義するときに、型を同時に定義することができます。
例えば数値であればnumber
、文字列であればstring
、ブール値であればboolean
などです。
しかし、配列やオブジェクトや関数の型定義は少し特殊な部分があります。
配列の型定義
配列の型定義は、(型)[]
またはArray<(型)>
とします。
const numArray: number[] = [1, 2, 3]; // または Array<number>const str2dArray: string[][] = [['a', 'b', 'c'],['い', 'ろ', 'は'],];const mixedArray: (number | string | boolean)[] = ['str', 4, false];const complexArray: ((number | string | boolean)[] | number)[] = [[1, 'a'],[true, 'b'],3,];
要素数が決まっている場合は[(型), (型)]
のように書くこともできます。
const numArray: [number, number, number] = [1, 2, 3];const mixedArray: [string, number, boolean] = ['str', 4, false];const complexArray: [[number, string], [boolean, string], number] = [[1, 'a'],[true, 'b'],3,];
オブジェクトの型定義
オブジェクトの型定義は、{}
やobject
やObject
でも構いませんが、
もっと厳密に定義することもできます。
プロパティが決まっているなら、{(プロパティ): (型), (プロパティ): (型)}
のように書くことができます。
const obj: { key1: number; key2: string } = { key1: 3, key2: 'a' };
プロパティが具体的には決まっていないが、型だけはわかる場合、
{[key: (プロパティの型)]: (値の型)}
、またはRecord<(プロパティの型), (値の型)>
のように書くことができます。
const obj: { [key: string]: string } = { key1: 'a', key2: 'i', key3: 'e' };const objArray: { [key: string]: number }[] = [{ A: 3, B: 2, C: 1 },{ '伊': 6, '呂': 7, '波': 8 },];const arrayObj: { [key: number]: string[] } = {1: ['a', 'b', 'c'],2: ['い', 'ろ', 'は'],};const strObj: Record<string, string | Record<string, string>> = {key1: value1,key2: value2,nested: {key3: value3,key4: value4,},};
関数の型定義
関数は引数や返り値を取ることがあります。
単に型だけを定義するときは、アロー関数を使って((引数名): (引数の型)) => (返り値の型)
とします。
返り値がない場合、void
を指定します。
let func: (param: number) => void;
型と一緒に関数の内容も同時に定義するときは、((引数名): (引数の型)): (返り値の型)
とします。
const func = (param: number): void => console.log(param);// function func(param: number): void {console.log(param)};// const func = function (param: number): void {console.log(param)};
省略可能な引数については、(引数名)?: (引数の型)
とします。
// デフォルト値を指定しない場合const func = (param: number, suffix?: string): void =>console.log(param + suffix);// デフォルト値を指定する場合const func = (param: number, suffix: string = 'st'): void =>console.log(param + suffix);
可変長引数は、...(引数名): (引数の取りうる型)[]
とします。
引数は配列として取得されるので、配列型です。
const func = (...param: (number | string)[]): void => console.log(param);const mixedFunc = (required: string,optional?: number,...rest: number[]): void =>console.log(`必須:${required}\n任意:${optional}\n可変長:${rest.join(' ')}`);mixedFunc('a');// 必須:a// 任意:undefined// 可変長:mixedFunc('a', 2);// 必須:a// 任意:2// 可変長:mixedFunc('a', 2, 3);// 必須:a// 任意:2// 可変長:3mixedFunc('a', 2, 3, 4);// 必須:a// 任意:2// 可変長:3 4
お役に立てれば幸いです。
では