• 1. 安装 TypeScript
• 2. 简单使用
• 3. 编译代码
• 4. 类型注解
• 5. 接口
• 6. 类

1. 安装 TypeScript

要全局安装 TypeScript，可以在命令行中运行以下命令：

npm install -g typescript

安装完成后，可以通过运行以下命令检查 TypeScript 是否成功安装：

tsc -V

该命令会输出 TypeScript 编译器的版本号，确认安装是否成功。

2. 简单使用

创建一个新文件夹，并在其中创建一个名为 greeter.js 的文件。内容如下：

// 定义一个函数 greeter，接受一个参数 person，返回一条包含该参数的问候信息
function greeter(person) {
  return 'Hello, ' + person;
}

// 定义一个变量 user，赋值为字符串 'Yee'
let user = 'Yee';

// 调用 greeter 函数，并将 user 作为参数传递，输出问候信息
console.log(greeter(user));

3. 编译代码

即使文件扩展名为 .ts，如果代码只是普通的 JavaScript，那么编译后也不会有变化。在命令行中运行 TypeScript 编译器：

tsc greeter.ts

这将生成一个 greeter.js 文件，其内容与原始 JavaScript 代码相同。

然后，通过 Node.js 运行编译后的代码：

node greeter.js

控制台输出：

Hello, Yee

4. 类型注解

接下来，我们使用 TypeScript 的高级功能。给 greeter 函数的参数添加类型注解，以指明它应该是一个字符串：

// 函数 greeter 现在接受一个类型为 string 的参数 person
function greeter(person: string) {
  return 'Hello, ' + person;
}

// 定义一个变量 user，赋值为字符串 'Yee'
let user = 'Yee';

// 调用 greeter 函数，并将 user 作为参数传递，输出问候信息
console.log(greeter(user));

如果将 greeter 函数的参数改成数组：

// 函数 greeter 现在接受一个类型为 string 的参数 person
function greeter(person: string) {
  return 'Hello, ' + person;
}

// 定义一个变量 user，赋值为一个数字数组 [0, 1, 2]
let user = [0, 1, 2];

// 尝试调用 greeter 函数，传入一个数组作为参数
console.log(greeter(user));

重新编译代码，TypeScript 将会报告一个错误：

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

如果尝试删除 greeter 调用的参数，TypeScript 会提示调用函数时参数数量不匹配。TypeScript 提供了静态代码分析功能，可以检查代码结构和类型注解，尽管生成的 greeter.js 文件仍然被创建，TypeScript 会警告可能存在的潜在问题。

5. 接口

扩展示例应用，使用接口来描述具有 firstName 和 lastName 字段的对象。接口允许定义对象结构的类型：

// 定义一个接口 Person，包含 firstName 和 lastName 字段
interface Person {
  firstName: string;
  lastName: string;
}

// 函数 greeter 现在接受一个 Person 类型的参数
function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

// 定义一个对象 user，符合 Person 接口的结构
let user = {
  firstName: 'Yee',
  lastName: 'Huang'
};

// 调用 greeter 函数，并将 user 对象作为参数传递
console.log(greeter(user));

6. 类

最后，使用类改写示例。TypeScript 支持基于类的面向对象编程，可以创建一个 User 类，并实现接口：

// 定义一个 User 类，具有 firstName、lastName 和 fullName 字段
class User {
  fullName: string;
  firstName: string;
  lastName: string;

  // 构造函数，初始化 firstName 和 lastName，并生成 fullName
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = firstName + ' ' + lastName;
  }
}

// 定义一个接口 Person，包含 firstName 和 lastName 字段
interface Person {
  firstName: string;
  lastName: string;
}

// 函数 greeter 现在接受一个 Person 类型的参数
function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

// 创建 User 类的实例
let user = new User('Yee', 'Huang');

// 调用 greeter 函数，并将 User 实例作为参数传递
console.log(greeter(user));

重新运行 tsc greeter.ts，TypeScript 中的类最终会被编译为 JavaScript 函数，实现了与原始 JavaScript 代码相同的功能。