Einführung in TypeScript-js-Tutorial-php.cn

Einführung in TypeScript

王林

Freigeben： 2024-07-24 14:49:19

Original

143 人浏览过

Introduction to 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

Installieren Sie TypeScript global mit npm:

npm install -g typescript

Nach dem Login kopieren

Initialisieren Sie ein TypeScript-Projekt:

tsc --init

Nach dem Login kopieren

TypeScript kompilieren:

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

tsc filename.ts

Nach dem Login kopieren

Grundtypen

Beginnen wir mit einigen Grundtypen und lustigen Beispielen.

1. Primitive Typen

String

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

Nach dem Login kopieren

Anzahl

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

Nach dem Login kopieren

Boolescher Wert

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

Nach dem Login kopieren

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

Nach dem Login kopieren

2. Array

TypeScript-Arrays können nur einen Datentyp enthalten:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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]

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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 }

Nach dem Login kopieren

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" }

Nach dem Login kopieren

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.

Nach dem Login kopieren

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!

Nach dem Login kopieren

Aufzählungen

Enums 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

Nach dem Login kopieren

Ein Ampelsystem:

enum TrafficLight {
    Red,
    Yellow,
    Green
}

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

Nach dem Login kopieren

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!_

以上是Einführung in TypeScript的详细内容。更多信息请关注PHP中文网其他相关文章！