Typescriptの基本

1. 変数の宣言と基本的な型付け

// 変数の宣言と初期化
let message: string = "Hello, TypeScript!";
console.log(message);　　// 出力: Hello, TypeScript!

// 数値型
let age: number = 30;
console.log(age);　　// 出力: 30

// 真偽値型
let isStudent: boolean = true;
console.log(isStudent);　　// 出力: true

• let message: string = "Hello, TypeScript!";
  • messageという変数を宣言し、型をstring（文字列）として指定しています。初期値として文字列 "Hello, TypeScript!" を代入しています。
  • TypeScriptでは、変数宣言時に型を明示的に指定することが推奨されます。
• let age: number = 30;
  • ageという変数を宣言し、型をnumber（数値）として指定しています。初期値として数値 30 を代入しています。
• let isStudent: boolean = true;
  • isStudentという変数を宣言し、型をboolean（真偽値）として指定しています。初期値としてtrueを代入しています。

2. 関数の定義と引数の型付け

// 関数の定義（引数と戻り値に型を指定）
function greet(name: string): string {
    return `Hello, ${name}!`;
}

let greetingMessage: string = greet("Alice");
console.log(greetingMessage);　　 // 出力: Hello, Alice!

• function greet(name: string): string { ... }
  • greetという関数を定義しています。引数 name の型を string として指定し、戻り値の型も string として指定しています。
  • 関数内では、引数 name を用いて、Hello, ${name}! のような文字列を組み立てています。
  • return `Hello, ${name}!`;　ここではバッククォートを使用しています。バッククォートを使うことで、文字列内に ${} を使用して変数や式を埋め込むことができます。例えば、Hello, ${name}! のように、変数 name の値を直接文字列に埋め込むことができます。
• let greetingMessage: string = greet("Alice");
  • greet関数を呼び出し、引数として "Alice" を渡しています。関数の戻り値を greetingMessage 変数に格納しています。
  • greetingMessage は string 型であり、関数から返される "Hello, Alice!" という文字列が代入されます。

3. オブジェクトとインターフェース

// インターフェースの定義
interface Person {
    name: string;
    age: number;
    greet: (message: string) => void; // メソッドの型定義
}

// オブジェクトの作成
let person: Person = {
    name: "Bob",
    age: 25,
    greet: function(message: string) {
        console.log(`${message}, ${this.name} (${this.age} years old)`);
    }
};

person.greet("Hi");　　// 出力: Hi, Bob (25 years old)

• interface Person { ... }
  • Personというインターフェースを定義しています。インターフェースはオブジェクトの形状を定義するために使用されます。
  • Personインターフェースは、name（文字列）、age（数値）、greet（関数）のプロパティを持つことが定義されています。
  • => void は、TypeScript（およびJavaScript）において関数の戻り値の型を表現する方法です。関数の定義で => void を使用すると、その関数が戻り値として何も返さない（undefinedを返す）ことを示します。具体的には以下のような特徴があります。void の意味: void は「無い」「空」「何もない」という意味です。関数の戻り値が void の場合、その関数は何も返さないことを示します。関数本体で console.log を使っていますが、戻り値として return 文がないため、実質的には何も返さない関数です。
• let person: Person = { ... }
  • Personインターフェースを満たすオブジェクト person を作成しています。nameとageのプロパティにそれぞれ "Bob" と 25 を設定し、greetメソッドには関数を定義しています。
  • greetメソッドは引数 message を受け取り、console.logで message、name、age を組み合わせて出力します。
• person.greet("Hi");
  • personオブジェクトの greet メソッドを呼び出しています。"Hi" というメッセージが表示されます。実行結果は "Hi, Bob (25 years old)" となります。

4. クラスと継承

// クラスの定義
class Animal {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    // メソッド
    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

// Animalクラスのインスタンス化
let dog: Animal = new Animal("Dog");
dog.speak();　　// 出力: Dog makes a noise.

• class Animal { ... }
  • Animalというクラスを定義しています。クラスはオブジェクト指向プログラミングで使用され、属性（name）とメソッド（speak）を持ちます。
• constructor(name: string) { ... }
  • クラスのコンストラクター（constructor）は、クラスのインスタンスが作成されるときに呼び出される特別なメソッドです。ここでは name を引数として受け取り、インスタンス変数 this.name に代入しています。
• speak(): void { ... }
  • speak というメソッドを定義しています。このメソッドは void（戻り値なし）を返します。メソッドの中では、${this.name} makes a noise. というメッセージをログに出力しています。
• let dog: Animal = new Animal("Dog");
  • Animalクラスのインスタンス dog を作成しています。コンストラクターに "Dog" を渡し、nameに設定します。
  • new キーワードは、JavaScriptやTypeScriptにおいて、クラスから新しいオブジェクト（インスタンス）を生成するために使用されます。
  • インスタンス化: new を使うことで、クラスを基にして実際に使用可能なオブジェクト（インスタンス）を生成することができます。クラスは設計図であり、new を使うことでその設計に基づいた具体的なオブジェクトを作成できます。
• dog.speak();
  • dogオブジェクトの speak メソッドを呼び出しています。実行結果として "Dog makes a noise." というメッセージが表示されます。

他のTypeScriptについての勉強科目一覧はこちら→Typescript