TypeScriptとは何か - 初心者のための完全入門ガイド

1
2
3
4
5
6
7
8

function greet(name) {
  return "Hello, " + name;
}

// 意図しない使い方をしてもエラーにならない
greet(123);        // "Hello, 123" - 動作はするが意図と異なる
greet();           // "Hello, undefined" - 引数なしでも動作する
greet({});         // "Hello, [object Object]" - オブジェクトでも動作する

1
2
3
4
5
6
7
8

function greet(name: string): string {
  return "Hello, " + name;
}

// 型が一致しない呼び出しはコンパイルエラーになる
greet(123);        // エラー: Argument of type 'number' is not assignable to parameter of type 'string'
greet();           // エラー: Expected 1 arguments, but got 0
greet({});         // エラー: Argument of type '{}' is not assignable to parameter of type 'string'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// プリミティブ型
const message: string = "Hello";      // 文字列
const count: number = 42;             // 数値
const isActive: boolean = true;       // 真偽値

// 配列型
const numbers: number[] = [1, 2, 3];
const names: string[] = ["太郎", "花子", "次郎"];

// オブジェクト型
const user: { name: string; age: number } = {
  name: "太郎",
  age: 25
};

// 関数の型
function add(a: number, b: number): number {
  return a + b;
}

1
2
3

let value = "Hello";  // 文字列
value = 123;          // 数値に変更できる
value = true;         // 真偽値にも変更できる

1
2

let value: string = "Hello";
value = 123;   // エラー: Type 'number' is not assignable to type 'string'

1
2
3
4
5
6
7
8
9

function calculateTotal(price, quantity) {
  return price * quantity;
}

// 開発中は正常に動作
const total = calculateTotal(1000, 3);  // 3000

// しかし、誤ってStringを渡すと...
const buggyTotal = calculateTotal("1000", 3);  // "100010001000" - 文字列の繰り返し

1
2
3
4
5
6
7

function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

// 型が一致しない呼び出しは即座にエラー
const buggyTotal = calculateTotal("1000", 3);
// エラー: Argument of type 'string' is not assignable to parameter of type 'number'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 型注釈なしでも型が推論される
const message = "Hello";      // string型と推論
const count = 42;             // number型と推論
const isActive = true;        // boolean型と推論

// 配列も推論される
const numbers = [1, 2, 3];    // number[]型と推論

// 関数の戻り値も推論される
function add(a: number, b: number) {
  return a + b;               // 戻り値はnumber型と推論
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

const user: User = {
  id: 1,
  name: "太郎",
  email: "taro@example.com",
  createdAt: new Date()
};

// user.と入力すると、id, name, email, createdAtが候補として表示される
console.log(user.name);

1
2
3
4
5
6
7

const user: User = {
  id: 1,
  name: "太郎",
  // emailプロパティが欠けている - 即座にエラーが表示される
  createdAt: new Date()
};
// エラー: Property 'email' is missing in type '{ id: number; name: string; createdAt: Date; }' but required in type 'User'

1
2
3
4
5
6
7
8
9

interface User {
  id: number;
  userName: string;  // nameからuserNameに変更
  email: string;
  createdAt: Date;
}

// userNameに変更したため、既存コードでエラーが発生
console.log(user.name);  // エラー: Property 'name' does not exist on type 'User'. Did you mean 'userName'?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const button = document.querySelector("button");

if (button) {
  // buttonはHTMLButtonElement型と推論される
  // addEventListener, disabled, innerTextなどのプロパティが補完される
  button.addEventListener("click", (event) => {
    // eventはMouseEvent型と推論される
    console.log(event.clientX, event.clientY);
  });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const users = [
  { id: 1, name: "太郎", age: 25 },
  { id: 2, name: "花子", age: 22 },
  { id: 3, name: "次郎", age: 28 }
];

// mapのコールバック内でuserの型が推論される
const names = users.map(user => user.name);  // string[]型

// filterの結果も型が維持される
const adults = users.filter(user => user.age >= 20);  // 元の型が維持される

1
2
3
4
5

// JavaScriptでは引数の型がわからない
function processUser(user) {
  // userにどんなプロパティがあるか、コードを読まないとわからない
  return user.name.toUpperCase();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// TypeScriptでは型から意図が明確
interface User {
  id: number;
  name: string;
  email: string;
}

function processUser(user: User): string {
  // Userインターフェースを見れば、使えるプロパティがわかる
  return user.name.toUpperCase();
}

1
2
3
4
5
6
7
8
9

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,        // JavaScriptファイルを許可
    "checkJs": false,       // JavaScriptの型チェックは無効
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

1
2

# Lodashの型定義をインストール
npm install --save-dev @types/lodash

1
2
3
4

import _ from "lodash";

// 型定義により、Lodashの関数も補完される
const sorted = _.sortBy([3, 1, 2]);  // number[]