「TypeScript、学んだ方がいいの？」と悩んでいませんか？
現役WEBエンジニアとして、TypeScriptを日々使っています。
この記事では、TypeScriptの基本を解説します。
目次
TypeScriptとは
簡単に言うと
- JavaScriptに型を追加した言語
- コンパイル時にエラーを検出
- 大規模開発に適している
なぜ学ぶべきか
| メリット | 詳細 |
|---|---|
| バグ削減 | 型エラーを事前検出 |
| 補完が効く | IDEの支援が強力 |
| 可読性向上 | 型が仕様書になる |
| 求人増加 | 必須スキル化 |
環境構築
インストール
# グローバルインストール
npm install -g typescript
# バージョン確認
tsc --version
プロジェクト初期化
# 初期化
tsc --init
# tsconfig.json が生成される
基本的な型
プリミティブ型
// 文字列
let name: string = "田中";
// 数値
let age: number = 30;
// 真偽値
let isActive: boolean = true;
// null / undefined
let nothing: null = null;
let notDefined: undefined = undefined;
配列
// 配列
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["田中", "鈴木"];
オブジェクト
// オブジェクト型
let user: { name: string; age: number } = {
name: "田中",
age: 30
};
// インターフェース
interface User {
name: string;
age: number;
email?: string; // オプショナル
}
let user2: User = {
name: "鈴木",
age: 25
};
関数の型
基本的な書き方
// 関数の型定義
function add(a: number, b: number): number {
return a + b;
}
// アロー関数
const multiply = (a: number, b: number): number => {
return a * b;
};
// 戻り値なし
function log(message: string): void {
console.log(message);
}
便利な型
Union型
// 複数の型を許容
let id: string | number = "abc";
id = 123; // OK
型エイリアス
// 型に名前をつける
type ID = string | number;
let userId: ID = "abc";
ジェネリクス
// 汎用的な型
function getFirst<T>(arr: T[]): T {
return arr[0];
}
const first = getFirst<string>(["a", "b", "c"]);
よくある型定義
APIレスポンス
interface ApiResponse<T> {
data: T;
status: number;
message: string;
}
interface User {
id: number;
name: string;
}
const response: ApiResponse<User> = {
data: { id: 1, name: "田中" },
status: 200,
message: "success"
};
JavaScriptからの移行
ステップ
.js→.tsにリネーム- 型エラーを修正
anyを使いすぎない- 徐々に型を厳密に
移行のコツ
- 一気にやらない
strict: falseから始めてもOK- 新規ファイルからTypeScriptで
まとめ
TypeScript入門のポイント:
- 基本的な型を覚える
- インターフェースで構造を定義
- Union型で柔軟に
- 徐々に移行する
