TypeScript 完全指南

TypeScript 是 JavaScript 的超集，提供了静态类型检查、接口、类、枚举等多种增强特性，极大地提升了代码的可读性、可维护性和开发效率。本文将全面介绍 TypeScript 的核心概念、使用方法和最佳实践，帮助你从入门到精通。

一、TypeScript 简介

1. 什么是 TypeScript？

TypeScript 是由微软开发并维护的一种开源编程语言，它是 JavaScript 的超集，具有以下特点：

静态类型检查：在编译阶段捕获错误，提升代码的安全性。
强大的工具支持：与主流编辑器（如 VSCode）深度集成，提供智能提示、代码补全和重构工具。
面向对象编程：支持类、接口、泛型、枚举等高级特性。
与 JavaScript 兼容：任何合法的 JavaScript 代码都是合法的 TypeScript 代码。

2. 为什么使用 TypeScript？

提高代码质量：通过类型检查提前发现错误。
增强开发体验：代码补全、跳转和重构更加高效。
更好的协作性：清晰的类型定义，方便多人协作。
适配大型项目：适合复杂项目和长期维护。

二、TypeScript 基础

1. 安装与配置

安装 TypeScript

bash 复制代码

# 全局安装 TypeScript
npm install -g typescript

# 查看版本
tsc --version

初始化项目

csharp 复制代码

# 初始化 tsconfig.json 文件
tsc --init

2. 基本类型

TypeScript 提供了多种基本数据类型：

ini 复制代码

let isDone: boolean = false;
let age: number = 30;
let name: string = 'TypeScript';
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ['hello', 10];

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

let notSure: any = 4;

3. 接口（Interfaces）

接口用于定义对象的结构，确保代码的一致性和可读性。

typescript 复制代码

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

function greet(person: Person) {
  console.log(`Hello, ${person.name}`);
}

greet({ name: 'Alice', age: 25 });

4. 类（Classes）

TypeScript 支持面向对象编程，提供了类和继承机制。

typescript 复制代码

class Animal {
  constructor(public name: string) {}

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}

const dog = new Dog('Rex');
dog.bark();
dog.move(10);

5. 泛型（Generics）

泛型提供了创建可重用组件的能力，适用于多种数据类型。

lua 复制代码

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

let output = identity<string>('Hello TypeScript');

三、TypeScript 进阶

1. 类型推断与类型守卫

TypeScript 可以根据代码自动推断类型。

typescript 复制代码

let x = 3; // 推断为 number 类型

function isString(value: any): value is string {
  return typeof value === 'string';
}

function print(value: number | string) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

2. 类型别名与交叉类型

ini 复制代码

type Point = { x: number; y: number };
type Circle = { radius: number };

type CirclePoint = Point & Circle;

const cp: CirclePoint = { x: 10, y: 20, radius: 5 };

3. 装饰器（Decorators）

装饰器用于增强类、属性、方法的功能，通常在框架（如 Angular）中使用。

typescript 复制代码

function Log(target: any, propertyKey: string) {
  console.log(`Calling ${propertyKey}`);
}

class Person {
  @Log
  greet() {
    console.log('Hello!');
  }
}

new Person().greet();

四、TypeScript 实践与工具

1. 在 React 项目中使用 TypeScript

(1) 创建 React + TypeScript 项目

使用 Vite 创建 React + TypeScript 项目：

perl 复制代码

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

(2) 定义组件 Props 和 State

typescript 复制代码

type Props = {
  name: string;
};

const Hello: React.FC<Props> = ({ name }) => <h1>Hello, {name}</h1>;

export default Hello;

(3) 使用 Hooks

typescript 复制代码

import { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

2. 在 Vue 项目中使用 TypeScript

(1) 创建 Vue 3 + TypeScript 项目

使用 Vue CLI 创建 TypeScript 项目：

perl 复制代码

npm create vue@latest
# 选择 TypeScript 支持

(2) 在组件中使用 TypeScript

使用 <script setup lang="ts"> 语法简化代码：

xml 复制代码

<script setup lang="ts">
import { ref } from 'vue';

const count = ref<number>(0);

function increment(): void {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

3. 编写类型声明文件

当使用没有类型声明的第三方库时，可以编写自定义 .d.ts 文件。

typescript 复制代码

// math.d.ts
declare module 'math' {
  export function add(a: number, b: number): number;
}

五、最佳实践

开启严格模式 ：在 tsconfig.json 中设置 "strict": true。
使用接口和类型别名：根据需求选择合适的数据结构。
避免使用 any 类型。
模块化代码。
编写单元测试。

六、总结

TypeScript 作为 JavaScript 的增强版，凭借其强大的类型系统和丰富的工具链，已成为现代 Web 开发的主流语言。