フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

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

はじめに

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

TypeScriptの型

Javascript型とTypeScriptの型がある

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