はじめに
-TypeScriptを触ったことがない人が勉強がてらメモしているだけなので、凍えるような冷たい目で見てください。 - 1回目と2日目は下記となります。微妙にタイトルを変えていきます。 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: '東京' | '神奈川' | '千葉' = '神奈川'
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 }
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) }