[自分用メモ]TypeScriptの書き方まとめ~型と関数と配列~

#配列

• タプル型

このように配列の型を厳格に決めることができます。

const book: [string, number, boolean] = ['business', 1500, false];

#列挙型

• enum

列挙型はenum CoffeeSizeとすることで定義できます。
列挙型ではsize: CoffeeSize.TALLのようにenumで列挙したまとまりを使うことができます。
下記のようにenumを使うことで、sizeに入る値をSHORT,TALL,GRANDE,VENTIのみに定義することができます。

enum CoffeeSize = {
  SHORT= 'SHORT',
  TALL= 'TALL',
  GRANDE= 'GRANDE',
  VENTI= 'VENTI'
}

const coffee = {
  hot: true,
  size: CoffeeSize.TALL
}

列挙型では下記のように列挙型の値を取り出すこともできます。

coffee.size = CoffeeSize.SHORT;

#Union型

数字か文字列にしか入らないようにできます。

let unionType: number | string = 10;
let unionTypes: (number | string)[]  = [21, 'hello']//配列

#リテラル型

• リテラル型は下記のように特定の値(apple)しか入れることができない

const apple: 'apple' = 'apple'

• 下記のようにリテラル型とユニオン型を組み合わせることでenumのように使うことができる。
  値が2,3個の時に使うとenumのように冗長にならなくて済む

let clothSize: 'small' | 'medium'  | 'large' = 'large';
const cloth: {
  color: string;
  size: 'small' | 'medium'  | 'large' 
} = {
  color: 'white',
  size: 'medium'
}

#typeエイリアス
typeエイリアスを使うことで上記のリテラルとユニオンを組み合わせたコードを短くすることができます。

type ClothSize = 'small' | 'medium'  | 'large'//ClothSizeにtypeで型を指定
let clothSize: ClothSize = 'large';//ClothSizeをそのまま使うことができます
const cloth: {
  color: string;
  size: ClothSize//typeエイリアスを使用することで 'small' | 'medium'  | 'large'が不要になります
} = {
  color: 'white',
  size: 'medium'
}

#関数

• 関数宣言に型をつける場合

引数と戻り値に型をつけることができ、引数が無い場合はvoidが返されます

function add(num1: number, num2: number): number {
  return num1 + num2
}

function SayHello(): void {//引数無い場合はvoidが返される
  console.log('Hello');
}
console.log(SayHello());//undefinedが返される

• 関数を保持する変数に型をつける場合

変数に型をつける時は=>を用いて型をつけることができます。関数宣言の時の型注釈は「:」なので注意しましょう。

const anotherAdd: (n1: number, n2: number) => number = add;

const anotherAdd: (n1: number, n2: number) => number = function　(num1: number, num2: number): number {
  return num1 + num2　//このように関数を直接入れることも可能で、無名関数としても挿入できます
};

const anotherAdd = function　(num1: number, num2: number): number {
  return num1 + num2　//型はどちらかがあればOKです
};

• アロー関数
  この様にすっきり書くことができます。

//パターン１(右に書く場合)
const doubleNumber = (num: number): number => num * 2;//返す値が一つであれば{}もreturnもいらない

//パターン２(左に書く場合)
const doubleNumber: (num: number) => number = num => num * 2;
//左に書く場合はt

#コールバック関数

下記では第２引数にcb: (num: number => number)というnumberという型を持つ、戻り値がnumberであるコールバック関数があります。

function doubleAndHandle(num: number, cb: (num: number) => number): void {//関数宣言だから「:」
  const doubleNum = cb(num * 2);//コールバック関数
  console.log(doubleNum);
}
doubleAndHandle(21, doubleNum => {
  return doubleNum
});