TypeScript の概要

TypeScript は、プレーンな JavaScript にコンパイルされる JavaScript の型付きスーパーセットです。コードに静的型を追加すると、開発中のエラーを見つけやすくなります。

TypeScript のセットアップ
まず、TypeScript を設定しましょう:

1. npm を使用して TypeScript をグローバルにインストールします。

npm install -g typescript

1. TypeScript プロジェクトを初期化します:

tsc --init

1. TypeScript をコンパイルします:

TypeScript ファイル (.ts) をコンパイルするには、次のコマンドを実行します。

tsc filename.ts

基本タイプ

いくつかの基本的なタイプと面白い例から始めましょう。

1. プリミティブ型

• 文字列

let greeting: string = "Hello, TypeScript!";
console.log(greeting); // Hello, TypeScript!

• 番号

let age: number = 42;
console.log(`I'm ${age} years old!`); // I'm 42 years old!

• ブール値

let isHappy: boolean = true;
console.log(`Am I happy? ${isHappy}`); // Am I happy? true

特定のタイプのみを理解できるロボットを想像してください:

let robotName: string = "RoboCop";
let robotAge: number = 100;
let isRobotFriendly: boolean = true;

console.log(`Meet ${robotName}, who is ${robotAge} years old. Friendly? ${isRobotFriendly}`); 
// Meet RoboCop, who is 100 years old. Friendly? true

2. 配列

TypeScript 配列は 1 種類のデータのみを保持できます:

let fruits: string[] = ["Apple", "Banana", "Cherry"];
console.log(fruits); // ["Apple", "Banana", "Cherry"]

おもちゃのコレクションを整理している猫 (ボールのみ):

let catToys: string[] = ["Ball1", "Ball2", "Ball3"];
console.log(catToys); // ["Ball1", "Ball2", "Ball3"]

3.タプル

タプルを使用すると、型が既知の固定数の要素を含む配列を表現できます。

let myTuple: [string, number];
myTuple = ["Hello", 42]; // OK
console.log(myTuple); // ["Hello", 42]

コードネームと ID 番号を持つ極秘エージェントを想像してください:

let agent: [string, number] = ["Bond", 007];
console.log(agent); // ["Bond", 007]

機能

TypeScript を使用すると、パラメーターの型と関数の戻り値を指定できます。

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, 3)); // 8

魔法のスプーンを持つシェフ:

function mixIngredients(ingredient1: string, ingredient2: string): string {
    return `${ingredient1} mixed with ${ingredient2}`;
}

console.log(mixIngredients("Flour", "Sugar")); // Flour mixed with Sugar

インターフェース

インターフェイスはオブジェクトの構造を定義します。

interface Person {
    name: string;
    age: number;
}

let user: Person = {
    name: "Alice",
    age: 30
};

console.log(user); // { name: "Alice", age: 30 }

特別な ID カードを持った話す犬:

interface Dog {
    name: string;
    breed: string;
}

let talkingDog: Dog = {
    name: "Scooby-Doo",
    breed: "Great Dane"
};

console.log(talkingDog); // { name: "Scooby-Doo", breed: "Great Dane" }

クラス

TypeScript クラスは、初期値とメソッドを持つオブジェクトを作成するための青写真です。

class Animal {
    name: string;

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

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

let dog = new Animal("Dog");
dog.move(10); // Dog moved 10 meters.

スーパーヒーロークラス:

class Superhero {
    name: string;

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

    saveTheCat() {
        console.log(`${this.name} saved the cat!`);
    }
}

let hero = new Superhero("Batman");
hero.saveTheCat(); // Batman saved the cat!

列挙型

列挙型を使用すると、名前付き定数のセットを定義できます。

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let move: Direction = Direction.Up;
console.log(move); // 0

信号機システム:

enum TrafficLight {
    Red,
    Yellow,
    Green
}

let light: TrafficLight = TrafficLight.Green;
console.log(light); // 2

結論

_基本的な型からジェネリックや列挙型などのより高度な機能まで、TypeScript をめまぐるしく学んできました。これらの例は、プロジェクトで TypeScript をさらに探索して使用するための良い出発点となるはずです。

具体的な質問がある場合、または TypeScript の各部分についてもっと面白い例が必要な場合はお気軽にお問い合わせください!_

以上がTypeScript の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。