【プログラミング学習1-11】TypeScriptの基礎理解
プログラミング学習、今日のタスクは「TypeScriptの基礎理解」です。
今日のお題 TypeScriptの基礎理解
TypeScriptはJavaScriptに型の概念を取り入れた言語で、開発時に多くのエラーを防いでくれる強力なツールです。以下の手順で進めることで、TypeScriptの基本から実践的なスキルまで身につけやすくなります。
ステップ1: TypeScriptの基礎理解
1.TypeScriptのインストールと環境設定
最初にTypeScriptをインストールし、基本の環境を整えます。
npm install -g typescript
インストール後、簡単な「Hello, TypeScript!」プログラムを作成してコンパイルしてみましょう。例えば、hello.ts ファイルを作成し、以下のように書きます。
const greeting: string = "Hello, TypeScript!";
console.log(greeting);
これをコンパイルするには、以下のコマンドを実行します。
（この時、cd ~/desktopなどで、ファイルがある場所に移動する）
tsc hello.ts
すると、hello.js というJavaScriptファイルが生成され、node hello.js で実行できます。
2.基本の型（Type）を理解する
TypeScriptには数値や文字列、配列、オブジェクトなどの基本的な型があり、変数や関数に型を付けてエラーを防げるようになっています。以下のように基本の型付けを確認しましょう。
let isDone: boolean = false;
let count: number = 42;
let name: string = "Alice";
let hobbies: string[] = ["Reading", "Gaming"];
3.型推論と型注釈
TypeScriptは多くの場面で型を推論してくれますが、必要に応じて型注釈を追加することで、さらにコードの安全性を高めます。
ステップ2: TypeScriptの重要機能
4.インターフェース（Interfaces）
TypeScriptではインターフェースを使ってオブジェクトの構造を定義し、コードの再利用性を向上させます。
interface User {
name: string;
age: number;
isAdmin: boolean;
}
const user: User = { name: "Bob", age: 25, isAdmin: false };
5.関数の型定義
関数に入力引数や戻り値の型を定義して、間違った引数が渡されないようにできます。
function greet(name: string): string {
return `Hello, ${name}`;
}
6.ジェネリクス（Generics）
型の柔軟性を持たせるためにジェネリクスを使用します。ジェネリクスは特に関数やクラスで使われ、どの型にも対応できるコードを作れます。
function identity<T>(arg: T): T {
return arg;
}
const numberIdentity = identity<number>(42); // 42
const stringIdentity = identity<string>("TypeScript"); // "TypeScript"
7.ユニオン型とリテラル型
複数の型を持つ変数や、決まった文字列のみを許容する型（リテラル型）もTypeScriptで扱えます。
let status: "success" | "error" = "success";
status = "error"; // OK
ステップ3: 応用的な機能
8.クラスと継承
TypeScriptはクラスベースのオブジェクト指向をサポートしています。JavaScriptのクラスを拡張し、さらに型安全なコードを実現できます。
class Animal {
constructor(public name: string) {}
move(distance: number) {
console.log(`${this.name} moved ${distance} meters.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
9.モジュールと名前空間 TypeScriptのモジュールを使って、ファイル間でコードを整理しやすくします。
10.型のユーティリティ（Utility Types） TypeScriptには便利な型ユーティリティが多数あります。Partial, Readonly, Pick, Omit など、特定の状況で型を変換するために使用します。
ステップ4: 練習問題
以下はTypeScriptを使った基本的な練習問題です。
基本の型付け
数値型の変数 age と、文字列型の変数 firstName を宣言し、それらを使ってメッセージを作成してください。
回答例：
const age: number = 24;
const firstName: string = "Gon";
console.log(`Hello! ${firstName}さん。You are ${age} years old`);
インターフェースの使用
ユーザーの名前、年齢、管理者権限を表すオブジェクトの型を定義してください。
回答例：
interface User{
name:string;
age:number;
isAdmin:boolean;
}
ジェネリクスを使った関数
配列の要素を返す関数 getArrayElement を作成し、数値の配列や文字列の配列で動作するか確認してください。
以下、回答できずChatGPTに答えを確認
→getArrayElement は、配列とインデックスを引数として受け取り、指定されたインデックスにある要素を返します。この関数にジェネリクスを使うと、数値の配列、文字列の配列など、任意の型に対応できます。
function getArrayElement<T>(arr: T[], index: number): T | undefined {
return arr[index];
}
// 動作確認
const numbers = [10, 20, 30, 40];
const strings = ["apple", "banana", "cherry"];
console.log(getArrayElement(numbers, 2)); // 出力: 30
console.log(getArrayElement(strings, 1)); // 出力: "banana"
ジェネリクス <T> によって、getArrayElement 関数は、配列の型（number や string）に応じて返り値の型も動的に変わります。
クラスとインターフェース
「車（Car）」のクラスを作成し、drive() メソッドを持たせて、走行距離を表示するようにしてみましょう。
// 車のインターフェースを定義
interface Car {
brand: string;
model: string;
drive(distance: number): void;
}
// Car クラスの実装
class MyCar implements Car {
brand: string;
model: string;
constructor(brand: string, model: string) {
this.brand = brand;
this.model = model;
}
drive(distance: number): void {
console.log(`${this.brand} ${this.model} が ${distance}km 走行しました。`);
}
}
// 動作確認
const myCar = new MyCar("Toyota", "Corolla");
myCar.drive(120); // 出力: "Toyota Corolla が 120km 走行しました。"
ユニオン型
数値か文字列を取り、数値ならそれを2倍にし、文字列なら文字数を返す関数 doubleOrLength を作成してください。
function doubleOrLength(value: number | string): number {
if (typeof value === "number") {
return value * 2;
} else {
return value.length;
}
}
// 動作確認
console.log(doubleOrLength(10)); // 出力: 20
console.log(doubleOrLength("hello")); // 出力: 5
ステップ5: プロジェクトにTypeScriptを導入
練習後は、既存のJavaScriptプロジェクトにTypeScriptを導入してリファクタリングを行うと理解が深まります。特に、型の適用によってバグを防げるポイントを実感しやすくなります。
感想
今日は1日でTypescriptの基礎を抑えようとしましたが、ステップ5で断念してしまいました。
既存のJavaScriptプロジェクトが思いつかないので、次に何かのアプリを作るときに、Typescriptだとどうなるのか？を確認したいと思います。
花粉が辛くて泣きそう。薬を飲んで元気だそう。
それでは今日も良い1日をお過ごしください。