TypeScript 简介

TypeScript 是 JavaScript 的超集,在 JavaScript 的基础上增加了类型系统。使用 TypeScript 可以在开发过程中更早地发现错误,提高代码质量和可维护性。

TypeScript 的优势

使用 TypeScript 相比 JavaScript 有以下几点优势:

1. 静态类型检查:TypeScript 在编译阶段就能发现类型错误,减少运行时错误。
2. 更好的代码提示:IDE 可以根据类型信息提供更准确的代码提示和自动补全。
3. 增强代码可读性:类型注解让代码更容易理解,明确表达了开发者的意图。
4. 便于重构:类型系统可以辅助进行代码重构,提高代码质量。

需要注意的是,TypeScript 最终还是会编译为 JavaScript 代码运行。它不会提供额外的性能优化,但可以通过工具对生成的 JavaScript 代码进行优化。

安装 TypeScript

可以通过 npm 全局安装 TypeScript 编译器和 ts-node:

npm install -g typescript ts-node

安装完成后,可以通过以下命令检查是否安装成功:

tsc --help

如果看到输出tsc: The TypeScript Compiler - Version x.x.x,则表示安装成功。

初始化项目

我们先创建一个演示项目,初始化 package.json 并安装 axios:

npm init -y
npm install axios

然后创建一个index.ts文件,编写以下 TypeScript 代码:

import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/todos/1';

axios.get(url).then((res) => {
  console.log(res.data);
});

可以使用tsc命令将 TypeScript 代码编译为 JavaScript:

tsc index.ts

编译后会生成index.js文件,然后通过 node 运行:

node index.js

或者直接使用ts-node运行 TypeScript 代码:

ts-node index.ts

类型注解

接下来我们给上面的代码添加类型注解:

import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/todos/1';

// 定义接口
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

axios.get(url).then((res) => {
  // 断言res.data的类型为Todo
  const todo = res.data as Todo;
  const { id, title, completed } = todo;
  logTodo(id, title, completed);
});

function logTodo(id: number, title: string, completed: boolean) {
  console.log(`
    这个todo的ID为: ${id}
    标题是: ${title} 
    是否已完成: ${completed}
  `);
}

这里我们定义了一个Todo接口来描述响应数据的结构。通过as关键字断言res.data的类型为Todo,这样在使用todo变量时就能获得类型检查和代码提示了。

同时给logTodo函数的参数添加了类型注解,明确了每个参数的类型,增强了代码的可读性。

TypeScript 的类型系统

TypeScript 支持两大类类型:原始类型(Primitive Types)和对象类型(Object Types)。

原始类型包括:

• number
• boolean
• string
• undefined
• null
• void
• symbol

对象类型包括:

• object
• array
• tuple
• enum
• any
• never

如果定义变量时没有指定类型,TypeScript 会根据变量的值推断出一个类型。这个过程称为类型推断(Type Inference)。

let count = 0; // 推断为number类型
const name = 'TypeScript'; // 推断为string类型

// 对于 const 声明的变量，TypeScript 会进行更严格的字面量类型推断
const status = 'active'; // 推断为 'active' 字面量类型，而不是 string

但如果变量的类型不明确,例如一个变量的值可能是多种类型,就需要使用联合类型(Union Types):

let value: string | number;
value = 'hello';
value = 123;