TypeScript 快速入门指南

简介

TypeScript 是由微软开发的开源编程语言，是 JavaScript 的超集。这意味着任何有效的 JavaScript 代码本身就是合法的 TypeScript 代码。TypeScript 在 JavaScript 基础上添加了静态类型系统，可以帮助开发者在开发阶段更早地发现错误，提升代码的可维护性和可读性。

优点：

• 提供强类型检查，减少运行时错误。
• 支持最新的 JavaScript 特性，并可编译为向后兼容的 JavaScript，适应不同浏览器和运行环境。
• 具备强大的开发工具支持，如代码补全、重构和导航功能。

使用场景：

• 适合中大型项目，尤其是需要多人协作的场景。
• 开发对类型要求高的项目，如复杂的数据处理系统或前端组件库。

环境搭建

1. 安装 Node.js：TypeScript 需要借助 Node.js 环境及其包管理器 npm 来安装和管理相关依赖。从 Node.js 官网 下载并安装对应操作系统的版本。

2. 安装 TypeScript 编译器（tsc）：在命令行运行以下命令全局安装 TypeScript：

npm install -g typescript

安装完成后，通过 tsc -v 查看安装的 TypeScript 版本。

3. 本地项目安装：在具体项目中安装 TypeScript，而非全局安装：

npm install typescript --save-dev

然后通过 npx tsc 来运行 TypeScript 编译器。

4. 代码编辑器推荐：Visual Studio Code 是官方推荐的编辑器，提供对 TypeScript 的良好支持，包括语法高亮、自动补全和调试功能。

基础语法

1. 变量声明

TypeScript 支持多种变量声明方式：

• let：声明块级作用域变量。
• const：声明常量，不可重新赋值。

声明变量时可以指定类型：

let num: number = 5;
const str: string = "Hello";

如果没有显式指定类型，TypeScript 会根据赋值情况自动推断类型。

2. 数据类型

enum Color {
    Red,
    Green,
    Blue
}
let myColor: Color = Color.Green;

3. 函数

支持指定参数和返回值类型：

function add(num1: number, num2: number): number {
    return num1 + num2;
}

也可以使用箭头函数：

let addArrow = (num1: number, num2: number): number => num1 + num2;

4. 类型断言

当开发者比 TypeScript 更清楚变量类型时，可以使用类型断言：

let someValue: any = "Hello, world!";
let strLength: number = (someValue as string).length;

5. 联合类型与类型守卫

• 联合类型：允许变量具有多种类型：

  let value: number | string;
  value = 10;
  value = "Hello";
  

• 类型守卫：运行时判断类型：

  function printValue(value: number | string) {
      if (typeof value === "string") {
          console.log("String value:", value);
      } else {
          console.log("Number value:", value);
      }
  }
  

面向对象编程

TypeScript 提供对类的支持：

• 类定义：

  class Person {
      name: string;
      age: number;
      constructor(name: string, age: number) {
          this.name = name;
          this.age = age;
      }
      sayHello() {
          console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
      }
  }
  let person = new Person("Alice", 30);
  person.sayHello();
  

• 继承：

  class Student extends Person {
      grade: number;
      constructor(name: string, age: number, grade: number) {
          super(name, age);
          this.grade = grade;
      }
      study() {
          console.log(`${this.name} is studying in grade ${this.grade}.`);
      }
  }
  let student = new Student("Bob", 15, 9);
  student.sayHello();
  student.study();
  

接口

接口用于定义对象的结构、函数类型等。

• 定义对象结构：

  interface Point {
      x: number;
      y: number;
  }
  let point: Point = {x: 10, y: 20};
  

• 定义函数类型：

  interface MathFunc {
      (num1: number, num2: number): number;
  }
  let add: MathFunc = (a, b) => a + b;
  

• 扩展接口：

  interface Shape {
      color: string;
  }
  interface Square extends Shape {
      sideLength: number;
  }
  let square: Square = { color: "red", sideLength: 10 };
  

模块

TypeScript 支持模块化开发，常见规范有 CommonJS 和 ES Modules。

• 创建 math.ts 文件：

  export function add(num1: number, num2: number): number {
      return num1 + num2;
  }
  

• 在另一个文件中导入使用：

  import { add } from './math';
  console.log(add(5, 3));
  

编译与运行

1. 编写好 .ts 文件后，需将其编译为 .js 文件：

tsc yourFileName.ts

生成的 .js 文件可通过 Node.js 或浏览器运行。

2. 安装 ts-node 直接运行 TypeScript 文件：

npm install -g ts-node
ts-node yourFileName.ts

最佳实践

• 启用严格模式：在 tsconfig.json 中开启 strict 选项，确保代码类型安全。
• 充分利用工具提示：利用编辑器的代码提示和静态分析功能。
• 分模块开发：将代码划分为独立模块，提高可维护性。
• 及时更新工具链：保持 TypeScript 版本与依赖库的更新。

凡是过去，皆为序章；凡是未来，皆有可期。