跳至主要內容

TypeScript 简介

2025/8/24大约 3 分钟

TypeScript 简介

什么是 TypeScript?

TypeScript 是由微软开发的一种开源编程语言，它是 JavaScript 的超集，添加了静态类型系统和一些其他特性。TypeScript 代码会被编译成纯 JavaScript 代码，可以在任何支持 JavaScript 的环境中运行。

TypeScript 的发展历史

  • 2012年10月: TypeScript 首个公开版本发布
  • 2014年4月: TypeScript 1.0 正式发布
  • 2016年9月: TypeScript 2.0 发布，引入了非空类型和更严格的类型检查
  • 2018年3月: TypeScript 3.0 发布，引入了泛型参数默认值和剩余参数
  • 2020年8月: TypeScript 4.0 发布，引入了可变元组类型和短路赋值运算符
  • 2022年6月: TypeScript 4.7 发布，引入了模块解析增强和类型操作符改进
  • 2023年3月: TypeScript 5.0 发布，引入了装饰器、枚举增强等特性

为什么学习 TypeScript?

1. 静态类型检查

TypeScript 提供了静态类型系统，可以在编译阶段捕获类型错误，避免在运行时出现问题。

// TypeScript 代码
function add(a: number, b: number): number {
  return a + b;
}

// 编译时错误: 类型 'string' 不能赋值给类型 'number'
add(1, '2');

2. 更好的代码提示和自动完成

IDE 可以利用 TypeScript 的类型信息提供更准确的代码提示和自动完成功能，提高开发效率。

3. 更好的代码可读性和可维护性

类型注解使代码更加自文档化，便于团队协作和代码维护。

4. 支持现代 JavaScript 特性

TypeScript 支持最新的 JavaScript 特性，并可以将其编译为向后兼容的 JavaScript 代码。

5. 强大的类型系统

TypeScript 提供了强大的类型系统，支持接口、类、泛型等高级类型。

6. 广泛的社区支持

TypeScript 拥有庞大的社区和丰富的第三方库类型定义。

TypeScript 与 JavaScript 的关系

TypeScript 是 JavaScript 的超集，意味着所有合法的 JavaScript 代码也是合法的 TypeScript 代码。TypeScript 在 JavaScript 的基础上添加了静态类型系统和一些其他特性。

TypeScript 与 JavaScript 的关系
TypeScript 与 JavaScript 的关系

TypeScript 的基本语法

TypeScript 的语法与 JavaScript 非常相似，但增加了类型注解。

// 变量声明与类型注解
let message: string = 'Hello, TypeScript!';
let count: number = 42;
let isDone: boolean = false;

// 函数定义与类型注解
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 接口定义
interface Person {
  name: string;
  age: number;
  greet(): string;
}

// 类定义
class Student implements Person {
  name: string;
  age: number;
  studentId: number;

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

  greet(): string {
    return `Hello, my name is ${this.name} and I'm a student.`;
  }
}

编译 TypeScript 代码

TypeScript 代码需要编译成 JavaScript 代码才能运行。可以使用 TypeScript 编译器 tsc 进行编译。

# 安装 TypeScript
npm install -g typescript

# 编译 TypeScript 文件
tsc hello.ts

# 编译后生成 hello.js 文件
node hello.js

TypeScript 配置文件

TypeScript 使用 tsconfig.json 文件来配置编译选项。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

学习路径

  1. 基础篇

    • 安装和配置 TypeScript
    • 基本类型
    • 变量声明
    • 函数
    • 控制流

  2. 中级篇

    • 接口
    • 类
    • 泛型
    • 模块
    • 高级类型

  3. 高级篇

    • 装饰器
    • 类型编程
    • 性能优化
    • 与框架集成

参考资源

通过本章节的学习，你应该对 TypeScript 有了基本的了解，包括它的概念、特点和优势。接下来，我们将深入学习 TypeScript 的各个方面，从基础到高级，帮助你掌握这门强大的编程语言。

默认页脚