TypeScriptを左も右もわからない状態で調べてみる②

はじめに

TypeScriptを触ったことがない人が触っている勉強してる状況です。 px-wing.hatenablog.com

TypeScriptの型

Javascript型とTypeScriptの型がある

• JavaScriptでも型はあるTypeOfで型を確認することができる
• TypeScriptはtscコマンド実行時に型検査を行われる
• JavaScriptはJavascriptエンジンによって型検査がおこなわる
• JavaScriptエンジンとはChemeはV8エンジン、FirefoxはSpiderMonkey、マイクロソフトエッジはチャクラ、JavaScriptではJavaScriptコアが動いている
• TypeScriptとJavaScriptの型はそれぞれ異なる。TypeScriptにはJavaScriptに存在しない型がおおくある
• TypeScriptは「静的型付け」、JavaScriptは「動的型付け」

TypeScript型

型注釈と型推論

□　型注釈の場合 - let hasData: boolean = true

□　型推論 - let hasData = true

※基本的には型推論を利用する。変数を初期化しないときは型注釈をする。初期値を指定しないとany型になる

boolean型

let  hasData: boolean = true

number

let const: number = 10
let float: number = 3.14
let negative: number = -0.123

string

let single: string = 'hello'
let dobule: string = "hello"
let back: string = `hello`

オブジェクト

const user: {
  name: string;
  age: number;
} = {
  name: 'Taro',
  age: 18
}

配列

const areas: string[] = ['東京','神奈川','埼玉']
const sales: number[] = [10,20,30]
// Union型になる
const exampel = ['東京','神奈川','埼玉',20]

Tuple型

• 決まった内容の配列を作るときに利用する
• 必ず型注釈する必要がある
• 下記の状態で配列の最後に要素を追加するとエラーになるようになる（初期設定時のみ）

const userProfile = [string, number, boolean] = ['タロウ', '50', false]

userProfile.push('ハナコ')　と指定してもエラーにならないが下記の場合、エラーになる

const userProfile = [string, number, boolean] = ['タロウ', '50', false,'ハナコ']

Enum

• 列挙型⇒特定のまとまったグループのみを受け入れる型

enum FoodCategory {
  MEAT = "肉"
  FISH = "魚"
  VEGETABLES = "野菜"
}

const food ={
  volume: 'small',
  category: FoodCategory
}

• 下記のように指定することができる。下記の状態だとMEATから0,1,2という値が割り振られる

enum FoodCategory {
    MEAT,
    FISH,
    VEGETABLES
}
  
const food ={
    volume: 'small',
    category: FoodCategory.FISH
}

any型

• なんでも代入できる変数のため、利用するのは極力さける。JSの変数と同じ状態になる

• JSからTypeScriptに移行している間は利用しても良い

• 下記の構文でもエラーにならない。typescriptの恩恵が受けられない。Booleanの値をstring型に突っ込んでもエラーにならない。

let anything: any = true;
anything = 'こんにちは'
let moji: string = "文字"
moji = anything