- TypeScriptとは
- 環境構築
- TypeScriptのインストール
- 設定ファイルの生成
- コンパイル
- 基本的な型
- よく使う型
- 実践Tips
- まとめ
- 関連記事
- より詳しい情報はこちら（WordPress）
「TypeScriptを使いたいけど、型って難しそう」と感じていませんか？
JavaScriptが書ければ、TypeScriptへの移行は簡単です。この記事では、JavaScript経験者向けにTypeScriptの基礎を解説します。
TypeScriptとは
TypeScriptはJavaScriptに「型」を追加した言語です。
| 項目 | JavaScript | TypeScript |
|---|---|---|
| 型チェック | 実行時 | コンパイル時 |
| エディタ補完 | 限定的 | 強力 |
| バグ発見 | 実行してから | コード書いた時点 |
| 学習コスト | 低 | やや高 |
環境構築
Node.jsプロジェクトの場合
bashTypeScriptのインストール
npm install -D typescript設定ファイルの生成
npx tsc --init
コンパイル
npx tsc
tsconfig.json（推奨設定）
json
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
}
}
基本的な型
プリミティブ型
typescript
const name: string = "田中";
const age: number = 30;
const isActive: boolean = true;
配列
typescript
const numbers: number = [1, 2, 3];
const names: string = ["田中", "佐藤"];
オブジェクト
typescript
interface User {
id: number;
name: string;
email?: string; // オプショナル
}
const user: User = {
id: 1,
name: "田中"
};
関数
typescript
function add(a: number, b: number): number {
return a + b;
}
// アロー関数
const multiply = (a: number, b: number): number => a * b;
よく使う型
Union型
typescript
type Status = "pending" | "approved" | "rejected";
const status: Status = "approved";
ジェネリクス
typescript
function first
return array[0];
}
const num = first([1, 2, 3]); // number
const str = first(["a", "b"]); // string
型ガード
typescript
function isString(value: unknown): value is string {
return typeof value === "string";
}
実践Tips
1. anyを避ける
typescript
// NG
const data: any = fetchData();
// OK
const data: User = fetchData();
2. strictモードを有効に
json
{
"compilerOptions": {
"strict": true
}
}
3. 型推論を活用
typescript
// 冗長
const name: string = "田中";
// 推論で十分
const name = "田中"; // string型と推論される
まとめ
TypeScriptは「JavaScriptに型を追加しただけ」です。
1. まずはstrict: trueで始める
2. anyは使わない
3. 型推論を活用する
4. interfaceとtypeを使い分ける
JavaScript経験者なら、1週間でTypeScriptに慣れます。
関連記事
より詳しい情報はこちら（WordPress）
【2025年】TypeScript入門ガイド｜JavaScriptから移行する方法について、より詳しい情報は以下の記事（WordPress）をご覧ください：
👉 【2025年】TypeScript入門ガイド｜JavaScriptから移行する方法{:target="_blank" rel="noopener noreferrer"}
