はじめに
TypeScriptは、JavaScriptに静的型付けを追加した強力なプログラミング言語です。本記事では、TypeScriptの基本的な概念と使い方を、サンプルコードを交えながら解説していきます。
1. TypeScriptとは
TypeScriptは、Microsoftが開発したオープンソースの言語で、JavaScriptのスーパーセットです。つまり、既存のJavaScriptコードはそのままTypeScriptとして動作します。
TypeScriptの主な特徴:
- 静的型付け
- クラスベースのオブジェクト指向プログラミング
- モジュールシステム
- 最新のECMAScript機能のサポート
2. 開発環境のセットアップ
TypeScriptを使い始めるには、Node.jsとnpmをインストールする必要があります。
- Node.jsをインストール: https://nodejs.org/
- TypeScriptをグローバルにインストール:
npm install -g typescript
- プロジェクトフォルダを作成し、初期化:
mkdir typescript-intro
cd typescript-intro
npm init -y
- TypeScriptの設定ファイル（tsconfig.json）を作成:
tsc --init
3. 基本的な型
TypeScriptでは、変数や関数の引数、戻り値に型を指定できます。
// 基本的な型
let message: string = "こんにちは、TypeScript!";
let count: number = 10;
let isActive: boolean = true;
// 配列
let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["りんご", "バナナ", "オレンジ"];
// タプル
let person: [string, number] = ["田中", 30];
// enum
enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Blue;
// any
let dynamicValue: any = 4;
dynamicValue = "文字列も代入可能";
// void（関数の戻り値がない場合）
function logMessage(message: string): void {
console.log(message);
}
// null と undefined
let n: null = null;
let u: undefined = undefined;
// オブジェクト
let user: { name: string; age: number } = {
name: "佐藤",
age: 25
};
4. 関数
TypeScriptでは、関数の引数と戻り値に型を指定できます。
// 基本的な関数
function add(a: number, b: number): number {
return a + b;
}
// アロー関数
const multiply = (a: number, b: number): number => a * b;
// オプショナルパラメータ
function greet(name: string, greeting?: string): string {
if (greeting) {
return `${greeting}, ${name}!`;
}
return `こんにちは、${name}!`;
}
// デフォルトパラメータ
function createUser(name: string, age: number = 20): { name: string; age: number } {
return { name, age };
}
// レストパラメータ
function sum(...numbers: number[]): number {
return numbers.reduce((total, num) => total + num, 0);
}
// 関数オーバーロード
function padding(all: number): { top: number; right: number; bottom: number; left: number };
function padding(topAndBottom: number, leftAndRight: number): { top: number; right: number; bottom: number; left: number };
function padding(top: number, right: number, bottom: number, left: number): { top: number; right: number; bottom: number; left: number };
function padding(a: number, b?: number, c?: number, d?: number): { top: number; right: number; bottom: number; left: number } {
if (b === undefined && c === undefined && d === undefined) {
b = c = d = a;
} else if (c === undefined && d === undefined) {
c = a;
d = b;
}
return {
top: a,
right: b,
bottom: c,
left: d
};
}
5. インターフェースとクラス
インターフェースとクラスを使用して、より複雑な型を定義できます。
// インターフェース
interface Vehicle {
brand: string;
year: number;
start(): void;
}
// クラス
class Car implements Vehicle {
constructor(public brand: string, public year: number) {}
start() {
console.log(`${this.brand}の車が始動しました。`);
}
honk() {
console.log("ビービー！");
}
}
// 継承
class ElectricCar extends Car {
constructor(brand: string, year: number, public batteryCapacity: number) {
super(brand, year);
}
charge() {
console.log(`${this.brand}の電気自動車を充電中...`);
}
}
// 使用例
const myCar = new Car("トヨタ", 2022);
myCar.start(); // 出力: トヨタの車が始動しました。
const myTesla = new ElectricCar("テスラ", 2023, 100);
myTesla.start(); // 出力: テスラの車が始動しました。
myTesla.charge(); // 出力: テスラの電気自動車を充電中...
6. ジェネリクス
ジェネリクスを使用すると、型を引数として受け取る汎用的なコードを書くことができます。
// ジェネリック関数
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("こんにちは");
let output2 = identity(42); // 型推論により、numberと判断される
// ジェネリッククラス
class Box<T> {
private content: T;
constructor(value: T) {
this.content = value;
}
getValue(): T {
return this.content;
}
}
let stringBox = new Box("TypeScript");
let numberBox = new Box(100);
console.log(stringBox.getValue()); // 出力: TypeScript
console.log(numberBox.getValue()); // 出力: 100
// ジェネリック制約
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): void {
console.log(arg.length);
}
logLength("こんにちは"); // 出力: 5
logLength([1, 2, 3]); // 出力: 3
// logLength(3); // エラー: numberには'length'プロパティがありません
7. モジュール
TypeScriptでは、コードを複数のファイルに分割し、モジュールとして管理できます。
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
// main.ts
import { add, subtract } from "./math";
console.log(add(5, 3)); // 出力: 8
console.log(subtract(10, 4)); // 出力: 6
まとめ
この記事では、TypeScriptの基本的な概念と使い方を紹介しました。TypeScriptを使うことで、JavaScriptに静的型チェックを追加し、より安全で保守性の高いコードを書くことができます。
TypeScriptの学習を続けることで、より高度な機能や設計パターンを習得し、大規模なアプリケーション開発にも対応できるようになります。ぜひ、実際にコードを書いて練習してみてください。