TypeScript：JavaScript 的超级英雄斗篷-js教程-PHP中文网

TypeScript: JavaScript

为什么要向 JavaScript 添加类型？

想象一下：您正在愉快地使用 JavaScript 进行编码，突然出现“无法读取未定义的属性‘名称’”。呃，我们都去过那里！ TypeScript 就像有一个朋友，可以在这些错误发生之前发现它们。

起源故事

JavaScript 就像被蜘蛛咬之前的彼得·帕克 - 潜力巨大，但容易发生意外。 TypeScript 是赋予 JavaScript 超能力的蜘蛛咬伤。它添加了一个类型系统，有助于及早发现错误并使您的代码更加可靠。

你的第一次 TypeScript 冒险

让我们从一个简单的 JavaScript 函数开始，并将其转换为 TypeScript：

// JavaScript
function greet(name) {
    return "Hello, " + name + "!";
}

登录后复制

现在，让我们添加一些 TypeScript 魔法：

// TypeScript
function greet(name: string): string {
    return "Hello, " + name + "!";
}

登录后复制

看到那个：字符串吗？ TypeScript 告诉我们“这个函数接受一个字符串并返回一个字符串”。现在试试这个：

greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

登录后复制

TypeScript 刚刚让我们避免了潜在的错误！？

基本类型：你的新超能力

让我们探索一些基本的 TypeScript 类型：

// Basic types
let heroName: string = "Spider-Man";
let age: number = 25;
let isAvenger: boolean = true;
let powers: string[] = ["web-slinging", "wall-crawling"];

// Object type
let hero: {
    name: string;
    age: number;
    powers: string[];
} = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

登录后复制

接口：创建您自己的类型

界面就像对象的蓝图。它们对于定义数据的形状非常有用：

interface Hero {
    name: string;
    age: number;
    powers: string[];
    catchPhrase?: string; // Optional property
}

function introduceHero(hero: Hero): void {
    console.log(`I am ${hero.name}, and I'm ${hero.age} years old!`);
    if (hero.catchPhrase) {
        console.log(hero.catchPhrase);
    }
}

const spiderMan: Hero = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

introduceHero(spiderMan);

登录后复制

类型别名：您的自定义类型

有时您想创建自己的类型组合：

type PowerLevel = 'rookie' | 'intermediate' | 'expert';

interface Hero {
    name: string;
    powerLevel: PowerLevel;
}

const batman: Hero = {
    name: "Batman",
    powerLevel: "expert" // TypeScript will ensure this is one of the allowed values
};

登录后复制

泛型：终极灵活性

泛型就像通配符，使您的代码更可重用：

function createHeroTeam<T>(members: T[]): T[] {
    return [...members];
}

interface Superhero {
    name: string;
    power: string;
}

interface Villain {
    name: string;
    evilPlan: string;
}

const heroes = createHeroTeam<Superhero>([
    { name: "Iron Man", power: "Technology" },
    { name: "Thor", power: "Lightning" }
]);

const villains = createHeroTeam<Villain>([
    { name: "Thanos", evilPlan: "Collect infinity stones" }
]);

登录后复制

真实示例：Todo 应用程序

让我们使用 TypeScript 构建一个简单的待办事项应用程序：

interface Todo {
    id: number;
    title: string;
    completed: boolean;
    dueDate?: Date;
}

class TodoList {
    private todos: Todo[] = [];

    addTodo(title: string, dueDate?: Date): void {
        const todo: Todo = {
            id: Date.now(),
            title,
            completed: false,
            dueDate
        };
        this.todos.push(todo);
    }

    toggleTodo(id: number): void {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
        }
    }

    getTodos(): Todo[] {
        return this.todos;
    }
}

// Usage
const myTodos = new TodoList();
myTodos.addTodo("Learn TypeScript with baransel.dev");
myTodos.addTodo("Build awesome apps", new Date("2024-10-24"));

登录后复制

TypeScript 与 React

TypeScript 和 React 就像花生酱和果冻。这是一个简单的例子：

interface Props {
    name: string;
    age: number;
    onSuperPower?: () => void;
}

const HeroCard: React.FC<Props> = ({ name, age, onSuperPower }) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            {onSuperPower && (
                <button onClick={onSuperPower}>
                    Activate Super Power!
                </button>
            )}
        </div>
    );
};

登录后复制

提示和技巧

从简单开始：从基本类型开始，逐渐添加更复杂的类型。
使用编译器：TypeScript 的编译器是你的朋友 - 注意它的错误。
不要过度输入：有时任何都可以（但要谨慎使用！）。
启用严格模式：将 "strict": true 添加到您的 tsconfig.json 中以获得最大程度的保护。

常见问题及解决方法

// Problem: Object is possibly 'undefined'
const user = users.find(u => u.id === 123);
console.log(user.name); // Error!

// Solution: Optional chaining
console.log(user?.name);

// Problem: Type assertions
const input = document.getElementById('myInput'); // Type: HTMLElement | null
const value = input.value; // Error!

// Solution: Type assertion or type guard
const value = (input as HTMLInputElement).value;
// or
if (input instanceof HTMLInputElement) {
    const value = input.value;
}

登录后复制