TypeScript 基本的な型の書き方メモ

型推論と型注釈の使い分け

• 型注釈出来ないとき
• 初期化しないとき

変数の型

boolean / number / string

// boolean
let hasValue: boolean = true;

// number
let count: number = 10;

// string
let text: string = 'hello;'

オブジェクト

// 一般的な書き方
const person: {
  name: string; //注意！！セミコロン
  age: number;
} = {
  name: 'Yuna',
  age: 24
}

// その他
const person: {} = {
  name: 'Yuna',
  age: 24
}

const person: object = {
  name: 'Yuna',
  age: 24
}

配列

const fruits: string[] = ['Apple', 'Banana']

Tuple型

複数の値を保持することのできる型。 それぞれの位置の要素の型を明示できる。

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

※ 要素を.push()などで変更した際に、参照時にはエラーになるが、実行時にはエラーになりません。

Enumでまとまった型を定義

// enumはパスカルケース、値は大文字
enum Device {
  PC = 'PC',
  SP = 'SP'
}

// 短縮可能(その場合、値は数字でインクリメンツされる)
enum device {
  PC, // 0
  SP  // 1
}

const web = {
  url: 'https://〜'
  device: Device.SP
}

Union型

複数の型を許容することができる型

let unionType: number| string = 10

// 配列の場合
const array: (number| string)[] = [10, 'text']

※ 代入後は、型推論される…？

Literal型

決まった値のみを許容する型

const apple: 'apple' = 'apple'

// constで定義したプリミティブ型は、リテラル型になる
const apple = 'apple'

enum型をLiteral型&Union型で再現

let clothSize: 'small' | 'tall' = 'tall'

※ objectに代入した場合も、型推論でリテラル型になってしまうため、enumの方がいいのかも…？

typeエイリアス

長い型や、複数回用いる型を事前に定義することができる。

type ClothSize = 'small' | 'tall'

let clothSize: ClothSize = 'tall'

関数の型

基本

パラメータと戻り値に型を定義 パラメータには必ず！！型を定義する。 戻り値にも型を書いた方が、ぱっとみわかりやすくてドキュメントになる。

// funtion 関数名 (引数1: 型, 引数2: 型...): 戻り値の型 {}
function add (num1: number, num2: number): number {
  return num1 + num2;
}

// アロー関数
const doubleNumber = (num1: number): number => num1 * 2;
// 変数に代入する場合(: が =>になる)
const doubleNumber: (num1: number) => number = num1 => num1 * 2;

値を返さない関数

何も返さない時は、void型。

function sayHello(): void {
  console.log('Hello!');
}

callback関数

関数の引数にcallback関数が入る場合、変数に代入する時と同じように型を記載(: が =>になる)

function doubleAndHandle(num: number, cb: (num: number) => number): voide {
  console.log(num * 2)
}