こんにちは。
アイレットデザイン事業部、フロントエンドエンジニアの辻と申します。
本記事では TypeScript についてお話しします。
想定している読者は TypeScript 未経験または初心者の方になります。
TypeScript とは？
TypeScript は、Microsoft が開発したオープンソースのプログラミング言語です。
JavaScript のスーパーセットであり、JavaScript のすべての機能を持ちながら、型システムを追加しています。
TypeScript を使うことでコードの可読性や保守性が向上し、大規模なアプリケーションの開発がしやすくなります。
TypeScript の特徴
1.型安全性
TypeScript では、変数や関数の引数に型を指定できます。
これにより、型に関するエラーをコンパイル時に検出でき、実行時のバグを減らすことができます。
2.インターフェース
TypeScript では、オブジェクトの構造を定義するためのインターフェースを使用できます。
これにより、コードの意図が明確になり、他の開発者が理解しやすくなります。
3.クラスとモジュール
TypeScript は、クラスベースのオブジェクト指向プログラミングをサポートしています。
また、モジュールを使ってコードを整理し、再利用性を高めることができます。
4.JavaScript との互換性
TypeScript は、既存の JavaScript コードと互換性があります。
つまり、JavaScript のコードをそのまま TypeScript プロジェクトに組み込むことができます。
TypeScript の導入方法
TypeScript をプロジェクトに導入する方法を見てみましょう。
まず、Node.js がインストールされていることを確認してください。
次に、以下の手順で TypeScript をインストールします。
1.TypeScript のインストール:
コマンドラインで以下のコマンドを実行して、TypeScript をグローバルにインストールします。
（ここではグローバルにインストールしますが、プロジェクト毎でインストールも可能です）
npm install -g typescript
2.プロジェクトの作成:
新しいディレクトリを作成し、その中に移動します。
mkdir my-typescript-project cd my-typescript-project
3.TypeScript の初期化:
プロジェクトに TypeScript の設定ファイルを作成します。
tsc --init
これで、tsconfig.jsonという設定ファイルが作成されます。
このファイルで TypeScript のコンパイラオプションを設定できます。
4.TypeScript ファイルの作成:
新しい TypeScript ファイルを作成します。
例えば、index.tsというファイルを作成し、以下のコードを追加します。
const greeting: string = "Hello, TypeScript!"; console.log(greeting);
5.コンパイル:
TypeScript ファイルを JavaScript にコンパイルします。
tsc index.ts
これで、index.jsという JavaScript ファイルが生成されます。
6.実行:
最後に、生成された JavaScript ファイルを実行します。
node index.js
これで、コンソールに「Hello, TypeScript!」と表示されるはずです。
よく使う TypeScript の機能
1. 型注釈
TypeScript では、変数や関数の引数に型を指定できます。以下にいくつかの型注釈の例を示します。
1.1 文字列型 (string)
文字列型は、stringとして指定します。
function greet(name: string): string {
return `Hello, ${name}!`;
}
const greetingMessage = greet("Taro");
console.log(greetingMessage); // Hello, Taro!
この例では、greet関数の引数nameにstring型を指定しています。
1.2 真偽値型 (boolean)
真偽値型は、booleanとして指定します。
function isAdult(age: number): boolean {
return age >= 18;
}
const adultCheck = isAdult(20);
console.log(adultCheck); // true
この例では、isAdult関数の引数ageにnumber型を指定し、戻り値にboolean型を指定しています。
1.3 配列型 (Array または 型[])
配列の型は、Arrayまたは型[]の形式で指定します。
function getFirstElement(arr: number[]): number {
return arr[0];
}
const numbers = [1, 2, 3, 4, 5];
console.log(getFirstElement(numbers)); // 1
この例では、getFirstElement関数の引数arrにnumber[]型を指定しています。
1.4 オブジェクト型
オブジェクトの型は、インターフェースを使って定義することができます。
interface Person {
name: string;
age: number;
}
function introduce(person: Person): string {
return `My name is ${person.name} and I am ${person.age} years old.`;
}
const person: Person = {
name: "Taro",
age: 30,
};
console.log(introduce(person)); // My name is Taro and I am 30 years old.
この例では、Personインターフェースを定義し、それに基づいてintroduce関数の引数personに型を指定しています。
1.5 ユニオン型
ユニオン型を使うことで、複数の型を指定することができます。
function printId(id: number | string): void {
console.log(`Your ID is: ${id}`);
}
printId(123); // Your ID is: 123
printId("ABC"); // Your ID is: ABC
この例では、printId関数の引数idにnumberまたはstringのいずれかの型を指定しています。
1.6 タプル型
タプル型を使うことで、異なる型の要素を持つ配列を定義できます。
let person: [string, number] = ["Taro", 30]; console.log(person[0]); // Taro console.log(person[1]); // 30
この例では、personというタプル型を定義し、最初の要素にstring型、2 番目の要素にnumber型を指定しています。
1.7 列挙型
列挙型を使うことで、定数の集合を定義できます。
enum Direction {
Up,
Down,
Left,
Right,
}
let move: Direction = Direction.Up;
console.log(move); // 0
この例では、Directionという列挙型を定義し、move変数にその値を指定しています。
2. インターフェース
インターフェースを使ってオブジェクトの構造を定義することができます。
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Taro",
age: 30,
};
console.log(person.name); // Taro
この例では、Personインターフェースを定義し、それに基づいてpersonオブジェクトを作成しています。
3. クラス
TypeScript では、クラスを使ってオブジェクト指向プログラミングを行うことができます。
class Animal {
constructor(public name: string) {}
speak(): void {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak(): void {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog("Buddy");
dog.speak(); // Buddy barks.
この例では、Animalクラスを定義し、それを継承したDogクラスを作成しています。
まとめ
TypeScript は、JavaScript に型を追加することで、より安全で効率的なコードを書くための強力なツールです。
型安全性やインターフェース、クラスなどの機能を活用することで、大規模なアプリケーションの開発が容易になります。
導入も簡単で、既存の JavaScript コードと互換性があるため、すぐに使い始めることができるのもメリットですね。
メリットを理解し、TypeScript を活用していきたいと思います。
簡単30秒