2024/05/02

【基礎を学ぶ】TypeScriptの「型」について深掘りする

TypeScript

そもそもTypeScriptとは

JavaScriptは実行時にデータ型を決める動的型付けです。動的型付けには、実行時にデータ型が自動で決まるため実行するまでエラーの存在に気付きにくく、バグが起こりやすいという問題点がありました。この問題を解決するため、TypeScriptではあらかじめ変数の型を定義する静的型付けを採用しました。

との事。厳密なJavaScriptという事ですね。
Next.jsを学ぶにあたり、TypeScriptの壁に当たったので基礎を学ぶことにします。

参考教材

目次

• 「TypeScriptの型」と「JavaScriptの型」
• 「型推論」「型注釈」
• タプル型
• Enum
• any型の扱い
• ユニオン型
• リテラル型
• タイプエイリアス
• 関数に型をつける
• まとめ

「TypeScriptの型」と「JavaScriptの型」

TypeScriptの型とJavaScriptの型は別物。
JavaScriptの型にはなくてTypeScriptにある型がたくさんある。

「型推論」「型注釈」

型推論

コンパイラが推測する型の事

// プリミティブ
let count = 10;
// オブジェクト
const person: {
  name: 'Jack',
  age: 21,
}
// 配列
const fruit = ['Apple', 'Banana', 'Grape'];

型注釈

明示的に型を指定する

// プリミティブ
let count: number = 10;
// オブジェクト
const person: {
  name: string;
  age: number;
} = {
  name: 'Jack',
  age: 21,
}
// 配列
const fruit: string[] = ['Apple', 'Banana', 'Grape'];

どちらを使うか？

基本的には型推論を使い、型推論できない時に型注釈を使う

タプル型

決まった配列を入れたい時

// カテゴリ、値段、売り切れか、みたいな情報を決まって入れるとして、、
const book = ['business', 1500, false];
↓
const book: [string, number, boolean] = ['business', 1500, false];

Enum

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

enum CoffeeSize {
  SHORT = 'SHORT',
  TALL = 'TALL',
  GRANDE = 'GRANDE',
  VENTI = 'VENTI'
}

const coffee = {
  hot: true,
  size: CoffeeSize.TALL
}
# 値を変更したい時
coffee.size = CoffeeSize.SHORT;

any型の扱い

anyは何でも入る。型定義した変数にも入ってしまう。
JavaScriptのプロジェクトをTypeScriptに変更するときの一次処置などには使える。
TypeScriptで書くときはなるべく使わないようにする。

ユニオン型

複数の型を入れられる

let unionType: number | string = 10;
unionType = toUpperCase(); // エラー
unionType = 'hello';
unionType = toUpperCase(); // エラーにならない

let unionTypes: (number | string)[] = [32, 'hello'];

リテラル型

決まった値のみ扱うもの

const apple: 'apple' = 'hello' // エラー
const apple: 0 = 43; // エラー

タイプエイリアス

事前に型を定義しておくことで使いまわせる

// 定義
type ClothSize = 'small' | 'medium' | 'large';
// 使う
let clothSize: ClothSize = 'large';
const cloth: {
  color: string;
  size: ClothSize
} = {
  color: 'white',
  size: 'medium'
}

関数に型をつける

関数宣言時

引数と戻り値につける
戻り値には型推論が効くので引数はマストでつける
戻り値にもつけることでドキュメント代わりになる

function add(num1: number, num2: number): number {
  return num1 + num2;
}

関数の型注釈

上記で定義したadd関数を変数に代入する場合

// 通常
const anotherAdd = add;
// 型注釈
const anotherAdd: (n1: number, n2: number) => number = add;

コールバック関数

function doubleAndHandle(num: number, cb: (num: number) => number): void {
  const doubleNum = cb(num * 2);
  console.log(doubleNum);
}
doubleAndHandle(21, doubleNum => {
  return doubleNum;
});

まとめ

どんな言語を扱う際にも「型」への意識をしっかり持って書くことでTypeScriptへの参入障壁は低くなるような気がしました。普段から意識しよう。

• Tweet