什么是TypeScript，为什么我应该用它代替JavaScript？

技术背景

JavaScript 是由 ECMA 的技术委员会 39（TC39）开发的编程语言，目标是成为 Web 的通用语言。然而，JavaScript 是动态类型语言，在运行时才确定变量类型，可能导致运行时错误。TypeScript 由微软开发，是 JavaScript 的超集，主要提供可选的静态类型、类和接口，旨在通过类型系统提前捕获错误，提高 JavaScript 开发效率。

实现步骤

安装TypeScript

首先需要安装 Node.js 和 npm，然后使用以下命令全局安装 TypeScript：

1	`npm install -g typescript`

编写TypeScript代码

创建一个 .ts 文件，例如 greeter.ts，编写如下代码：

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

编译TypeScript代码

在命令行中使用 tsc 命令编译 .ts 文件：

1	`tsc greeter.ts`

编译后会生成一个对应的 .js 文件，例如 greeter.js：

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

核心代码

类和接口示例

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

class Employee implements Person {
    name: string;
    age: number;
    department: string;

    constructor(name: string, age: number, department: string) {
        this.name = name;
        this.age = age;
        this.department = department;
    }

    getDetails() {
        return `${this.name} is ${this.age} years old and works in ${this.department}.`;
    }
}

类型推断示例

1	`let message = "Hello, TypeScript!"; // 类型自动推断为 string`

严格空检查示例

1
2
3

let x: number | undefined;
if (x !== undefined) x += 1; // 这行代码会编译通过，因为 x 已经被检查
x += 1; // 这行代码会编译失败，因为 x 可能为 undefined

最佳实践

使用严格模式：开启 --strict 编译器选项，启用所有严格类型检查功能，提高代码的健壮性。
使用类型定义文件：对于 JavaScript 库，使用 .d.ts 文件提供类型定义，以便 TypeScript 编译器能够理解函数调用。
逐步引入类型：在将 JavaScript 项目转换为 TypeScript 项目时，逐步引入类型，先消除编译错误，再根据需要添加类型。

常见问题

编译错误

在将 JavaScript 项目转换为 TypeScript 项目时，可能会出现编译错误。这是因为 TypeScript 需要知道所有使用的函数和变量的类型，需要提供相应的类型定义文件。

类型定义不匹配

类型定义文件必须与运行时使用的库版本匹配，否则 TypeScript 可能会禁止调用存在的函数或允许调用不存在的函数。