【入門】TypeScriptの色々な型の作り方

最近、typescriptを勉強しはじめましたが、配列の中にオブジェクトが入ってる場合とかどう型を作るんだ？って思ったりしたので、typescriptについて初歩的な部分を書いていこうと思います。内容は随時更新していこうと思います。

TypeScriptとは

型定義できるJavaScriptです。
それまで型などなく、ウルトラ無秩序の世界に秩序をもたらすjavascriptのスーパーセットです。

詳しい説明は以下から。
TypeScript の概要

型定義で使われる typeとinterfaceについて

両者にあまり違いはないようが、決定的な違いとしては、同じ名前の型を宣言した場合にinterfaceはマージされるが、typeはマージされないという違いがあるみたいです。

####interface

interface test {
  name: string
}

interface test { // interfaceでは同名の型がマージされるのでエラーが発生しない。
  value: number
}

####type

type test = {
 name: string
}

type test = { //typeでは同名の型がマージされないので、コンパイルエラーになる。
 value: number
}

このような違いから、ライブラリを作る場合とかはinterfaceを使用することが推奨のようです。

■参考
TypeScriptのInterfaceとTypeの比較
TypeScript の Interface と Type Alias の違い

型の作り方

可読性のためにinterfaceを使って作っていきます。

プリミティブ型の場合

let str: string = 'test'; //文字列以外が入ってきたらエラーになります。
let num: number = 1; //数字以外が入るとエラーになります。 
let bool: boolean = true; //真偽値以外が入るとエラーになります。 

配列型の場合

単純な配列

const foo: number[] = [0, 1, 2, 3]; //数字以外が配列の中に入っているとエラーになります。
const foo: string[] = ["test", "foo", "bar", "foobar"]; //文字列以外が配列の中に入っているとエラーになります。

配列の中にオブジェクト

interface Array {
  value: number
  text: string
}

//”Array[]” or ”Array<Array>”とすることで配列の中にオブジェクトが入っている状態を表現することができます。

const fooArray: Array[] = [ 
  { value: 1, text: '文字' },
  { value: 2, text: '文字' },
  { value: 3, text: '文字' },
  { value: 4, text: '文字' }
]

配列の中のオブジェクトの中に配列

interface item {
  str: string
  num: number
}

interface Array {
  value: number
  text: string
  items?: item[] //プロパティに 「?」をつけることで全てのオブジェクトにitem配列がなくてもOKになる。
}

const fooArray: Array[] = [ 
  { value: 1, text: '文字' },
  { value: 2, text: '文字' },
  { value: 3, text: '文字' },
  { value: 4, text: '文字', items: [{
    str: '文字',
    num: 2
  }] }
]

オブジェクト型の場合

interface OBJECT {
  value: string
  num: number
  bool: boolean
}

const obj: OBJECT = {
  value: '',
  num: 2,
  bool: true
}

動的なkeyが入ってきて全て列挙するのが面倒な場合は以下のように作ることもできます。

interface OBJECT {
　[key: string]: string
}

const obj: OBJECT = {
  value: '',
  num: 2,
  bool: true
}

##関数型の場合

返り値がない関数の場合

voidと書くことで返り値がない関数を定義できます。

・返り値がない場合

const func = (num: number):void => console.log(num)

・返り値がある場合

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

もちろん型のinterfaceを別に定義することもできます。

interface argsType {
  first_name: string
　last_name: string
}

interface returnType {
 fullname: string
}

const func = (info: argsType): returnType => {
  return {
    fullname: info.first_name + info.last_name
  }
}

// 渡す引数がnumberだったりbooleanだったりするとエラーが起きるようになる。
// また、resultの中にfullnameのオブジェクトが入るってないとエラーになる。

const result: returnType = func({first_name: '晋三', last_name: '安倍'})

簡単な型の作りかたを書いてみましたが、もっとパターンは存在するので、加筆していこうと思います。
次回は、classとかを使って型を書いてみることにチャレンジしたいと思います。