TypeScriptが右も左もわからない状態で調べてみる件③

はじめに

-TypeScriptを触ったことがない人が勉強がてらメモしているだけなので、凍えるような冷たい目で見てください。 - 1回目と2日目は下記となります。微妙にタイトルを変えていきます。 px-wing.hatenablog.com

px-wing.hatenablog.com

TypeScriptの型

Union型

• 複数の型を受け入れられる型
• |（パーティクルライン）で区切って指定した型であれば利用することが可能になる
• 下記の場合、numberと文字列は利用できる

let  unionVar: number | string = 10;
unionVar = 500
unionVar = 'こんにちは'

• 配列の場合

let unionVar: (number | string)[] = [500, 'こんにちは']

Literal型

• 特定の型のみしか変数に入れられない。ようするに定数。

const Tokyo: '東京'
let areas: '東京' | '神奈川' | '千葉' =  '神奈川'

• enumと似ているけど、enumはオブジェクトだが、定数はオブジェクトではない
• enumとにているけど、値が２つ、３つぐらいしかなければLiteral型を使う方がよい

const live: {
  city: string,
  areas: '東京' | '神奈川' | '千葉'
} = {
  city: '新宿',
  areas: '東京'
}

typeエイリアス

• エイリアスは型を変数のように扱う。型を別名であつかう

type areas = '東京' | '神奈川' | '千葉'

let areas: areas =  '神奈川'

const live: {
  city: string,
  areas: areas
} = {
  city: '新宿',
  areas: '東京'
}

関数

• パラメータと戻り値に型をつける

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

• 戻り値は型推論で型の指定をなくしてもOKでパラメータの方は型を指定しないとanyになってします
• 戻り値は型推論できるが、指定しておいた方がよい。また指定しておいた方がドキュメント代わりになる

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

void型の関数

• 戻り値を返さない関数

function debugLog(): void {
  console.log('デバック出力')
}

• returnだけ指定した場合でもvoidを指定する

function debugLog(): void {
  console.log('デバック出力')
  return
}

null及びundefined型

• undefined型とnull型はundefinedとnullの両方の値を代入できるが、その他の値を入れるとエラーになる　

let empty1: undefined 
empty1 = null
empty1 = undefined

let empty2: null
empty2 = null
empty2 = undefined

関数型の特定の関数のみ代入できる変数

• 変数に関数を代入する

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

const varAdd: (n1: number, n2: number) => number = add

• 無名関数の場合の書き方

const varAdd: (n1: number, n2: number) => number = function (num1: number,num2: number): number {
 return num1 + num2; 
}

• 型推論もどちらかについていれば問題ない

ケース1
const varAdd: (n1: number, n2: number) => number = function (num1,num2) {
 return num1 + num2; 
}

ケース2
const varAdd: = function (num1: number,num2: number): number {
 return num1 + num2; 
}

• アロー関数

const doubleNumber = number => number * 2

const doubleNumber = (number: number): number => number * 2
const doubleNumber: (num: number) => number = number => number * 2

コールバック関数

function doraemonAndHandle(message1: string, callback: (message2: string) => string): void {
  const message3 = callback("のびたくん")
  console.log(message1)
}
doraemonAndHandle("どらえもん", baseMsg =>{
  return `${baseMsg} こんにちは`
})

unknown型

• any型より少し厳しい型である
• anyと同じなんでも代入できるがunkonwn型の変数の値を異なる変数に代入するときは、unkown型に入れた型と同じ型の変数にしか代入できない 　型チェックしてから代入する

let verUnkown: unknown;
let num: number;
num = 10
verUnkown = 21

if (typeof verUnkown === 'number') {
  num = unknown
}

never型

• 決して何も返さない型
• try/catchをつかわないときに利用できる
• version3から利用できるようになった型

function error(message: string): never {
  throw new Error(message)
}