Einführung in TypeScript

TypeScript ist eine typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird. Es fügt Ihrem Code statische Typen hinzu und erleichtert so das Erkennen von Fehlern während der Entwicklung.

TypeScript einrichten
Zuerst richten wir TypeScript:

ein

1. TypeScript global mit npm installieren:

npm install -g typescript

1. Initialisieren Sie ein TypeScript-Projekt:

tsc --init

1. TypeScript kompilieren:

Um eine TypeScript-Datei (.ts) zu kompilieren, führen Sie Folgendes aus:

tsc filename.ts

Grundtypen

Beginnen wir mit einigen Grundtypen und lustigen Beispielen.

1. Primitive Typen

• Zeichenfolge

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

• Nummer

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

• Boolescher Wert

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

Stellen Sie sich einen Roboter vor, der nur bestimmte Typen verstehen kann:

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. Array

TypeScript-Arrays können nur einen Datentyp enthalten:

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

Eine Katze organisiert ihre Spielzeugsammlung (nur Bälle):

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

3. Tupel

Tupel ermöglichen es Ihnen, ein Array mit einer festen Anzahl von Elementen auszudrücken, deren Typen bekannt sind:

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

Stellen Sie sich einen Supergeheimagenten mit einem Codenamen und einer ID-Nummer vor:

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

Funktionen

TypeScript ermöglicht Ihnen die Angabe der Parametertypen und Rückgabewerte von Funktionen.

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

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

Ein Koch mit einem magischen Löffel:

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

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

Schnittstellen

Schnittstellen definieren die Struktur eines Objekts.

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

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

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

Ein sprechender Hund mit einem besonderen Ausweis:

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

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

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

Klassen

TypeScript-Klassen sind eine Blaupause zum Erstellen von Objekten mit Anfangswerten und Methoden.

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.

Eine Superheldenklasse:

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!

Aufzählungen

Aufzählungen ermöglichen es uns, eine Reihe benannter Konstanten zu definieren.

enum Direction {
    Up,
    Down,
    Left,
    Right
}

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

Ein Ampelsystem:

enum TrafficLight {
    Red,
    Yellow,
    Green
}

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

Abschluss

_Sie haben gerade eine stürmische Tour durch TypeScript hinter sich, von einfachen Typen bis hin zu fortgeschritteneren Funktionen wie Generika und Aufzählungen. Mit diesen Beispielen sollten Sie einen guten Ausgangspunkt haben, um TypeScript weiter zu erkunden und in Ihren Projekten zu verwenden.

Fragen Sie uns gerne, wenn Sie spezielle Fragen haben oder weitere lustige Beispiele für einen Teil von TypeScript benötigen!_

Das obige ist der detaillierte Inhalt vonEinführung in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!