TypeScript 型推論編 ~JavaScriptらしさ~

型推論

変数には型を必ず付与する必要はない。宣言時に代入された値から、型の推論ができる。

const/letの型推論

let test = 'aiu'

//推論
let test: string

constの型推論

const test: 'aiu'

//推論
const test: 'aiu'

Widening Literal Types 定数を変数に代入するとまた少し変わる。

const TestOne = 1
const TestTwo: 2 = 2
const TestThree = 3 as 3 

let One = TestOne
let Two = TestTwo
let Three = TestThree

const num = {
  //推論
  One, // number
  Two, //2
  Three //3
}

Array/Tupleの型推論

Arrayの型推論

const test = [ 0 , '1' ]
//推論
const test: (string | number)[]

宣言時にアサーションasを付与した場合。

const test = [0 as 0 ]  //const test: (0)[]
test.push(0) // OK
test.push(1) //NG

Tupleの型推論 asアサーションで付与する。

const test = [true , 0] as [boolean , number]
//index値参照
const t1 = test[1] // number

objectの型推論

object宣言時に初期値を与えることで型推論が適用。

const obj = {
  t1 : 1
  t2 : '2'
}
//推論
const obj : {
  t1 : number,
  t2 : string
}
//再代入
obj[t1] = 3 //OK
obj[t1] = '3' //NG

関数の戻り型推論

関数宣言の際に戻り型アノーテーションを必ず付与する必要はない。

function test(t1 : string){
  console.log(t1)
}
//推論
function test(t1): void

Peomiseの型推論

Promiseは非同期処理を行う。 Promiseを返す関数

function test(t1: number){
  return new Promise( resolve =>{
    setTimeout(() => resolve(`${t1}ms passed`), t1)
  } )
}
test(2000).then(res => {} )

//推論
function test(t1: number): Promise<{}>

時間経過後に文字列を持ってresolveが実行される。 resolveは非同期タスクが成功して完了した場合に実行される関数。多くの場合thenを使って処理を後に託すがresの型がstring型であることを特定できない。推論では上記のようになっている。

resolve関数の引数を指定する

function test(t1: number)Promise<string>{
  return new Promise( resolve =>{
    setTimeout(() => resolve(`${t1}ms passed`), t1)
  } )
}
test(2000).then(res => {} ) // resはstring型
// new Promise<string>でもあり。

async関数 Promiseインスタンスを返す関数はasync関数の中でawaitを実行することでも、型推論が行われる。

async function test(){
  const t5 = await t1(1000) // t5: string
  return t5
}

//推論
function test(): Promise<string>

async関数の戻り型もPromise型。

Promise.all/Promise.race Promise.all/Promise.raceを使用すると、非同期処理を並行して実行する。そしてそれぞれに応じた型推論の結果が適用される。詳細は省きます。

import構文

import構文の型推論 外部モジュールで定義された変数や関数は、型付与の有無を問わず、そのまま型推論の対象となる。ただこれはimportに限られ、requireでは型推論は行われない。

dynamic import dynamic importも型推論の対象となる。 dynamic importは戻り値がPromiseのため、適切なコードを書けば型推論が適用される。

JSON

JSONファイルを外部モジュールとしてインポートして、定義内容を型推論できる。設定が必要でtsconfig.jsonのresolveJsonModuleとesModuleInteropをtrueに設定する。