从入门到精通 JavaScript 1000例实战开发专栏--第十九章 - 第五部分：前沿技术篇-优快云博客

let name: string = "Alice";
let age: number = 25;
let isStudent: boolean = true;

function greet(name: string): string {
    return `Hello, ${name}!`;
}

3.2 接口

接口用于定义对象的结构，确保对象符合预期的形状。

示例：定义接口

typescript

深色版本

interface User {
    name: string;
    age: number;
    isActive?: boolean; // 可选属性
}

function printUser(user: User): void {
    console.log(`Name: ${user.name}, Age: ${user.age}`);
}

const user: User = { name: "Bob", age: 30 };
printUser(user);

3.3 泛型

泛型允许我们在定义函数、接口或类时，不预先指定具体的类型，而是在使用时再指定。

示例：泛型函数

typescript

深色版本

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("Hello World");
console.log(output); // 输出：Hello World

4. 与 JavaScript 的兼容性

4.1 TypeScript 是 JavaScript 的超集

TypeScript 完全兼容 JavaScript，现有的 JavaScript 代码可以直接作为 TypeScript 代码运行。这使得迁移现有项目变得更加容易。

4.2 逐步迁移策略

对于已有 JavaScript 项目的团队，可以采用以下步骤迁移到 TypeScript：

引入 TypeScript 配置文件：创建 tsconfig.json。
重命名文件扩展名：将 .js 文件逐步重命名为 .ts。
添加类型注解：从关键模块开始，逐步为变量、函数和类添加类型注解。
利用声明文件：对于第三方库，可以使用 DefinitelyTyped 提供的类型声明文件。

4.3 示例：JavaScript 转 TypeScript

原始 JavaScript 代码：

javascript

深色版本

function getUser(id) {
    return { id, name: "Alice" };
}

转换为 TypeScript：

typescript

深色版本

interface User {
    id: number;
    name: string;
}

function getUser(id: number): User {
    return { id, name: "Alice" };
}

总结

通过本章的学习，您将能够：

理解 TypeScript 的核心概念及其相对于 JavaScript 的优势。
掌握类型注解、接口和泛型的基本用法。
学习如何将现有 JavaScript 项目迁移到 TypeScript。

继续深入学习 TypeScript 的高级特性，打造更加高效、可靠的代码！