TypeScript 特性
相对 JavaScript,TypeScript 增加了许多关键功能,特别是围绕类型系统和代码结构的增强功能。
TypeScript 的一些关键特性:
静态类型检查:TypeScript 在编译时就会检查代码的类型是否匹配,能够发现很多潜在的错误。即使是简单的错误(例如拼写错误或类型不一致),也可以在编写代码时被捕获到。
类型推断:TypeScript 能够自动推断变量的类型。比如当你声明一个变量并赋值时,TypeScript 会根据赋值来推断这个变量的类型,不需要每次都显式声明类型。
接口和类型定义:TypeScript 提供了
interface
和type
关键字,允许你定义复杂的数据结构。这对于项目中不同部分的代码协作和数据交互来说非常重要。类和模块支持:TypeScript 支持面向对象编程中的类(class)概念,增加了构造函数、继承、访问控制修饰符(如
public
、private
、protected
),并且支持 ES 模块化规范。工具和编辑器支持:TypeScript 拥有良好的编辑器支持,特别是与 Visual Studio Code 集成时,能提供智能提示、自动补全、重构等工具,使开发过程更高效。
兼容 JavaScript:TypeScript 是 JavaScript 的超集,这意味着所有合法的 JavaScript 代码都是合法的 TypeScript 代码。这使得 JavaScript 项目可以逐步迁移到 TypeScript,而无需完全重写。
以下是 TypeScript 增加的主要功能:
1. 静态类型
TypeScript 的最大特性就是增加了静态类型系统。在 TypeScript 中,开发者可以显式地声明变量、参数、返回值的类型,这样可以在编译时捕获很多潜在的类型错误。常见类型包括 number
、string
、boolean
、array
、tuple
、enum
等,此外也支持自定义类型。
let name: string = "Alice"; let age: number = 25;
2. 类型推断
TypeScript 可以自动推断变量类型,即使不显式声明类型,TypeScript 也会根据变量的赋值内容来推断类型,从而在大多数情况下减少类型注解的书写量。
let name = "Alice"; // 推断为 string
3. 接口 (Interfaces)
TypeScript 提供了接口,允许定义复杂的对象结构。接口可以定义属性和方法,还可以通过 implements
关键字实现接口,或者通过 extends
进行扩展,便于定义复杂的数据类型。
interface Person { name: string; age: number; greet(): void; } class Student implements Person { constructor(public name: string, public age: number) {} greet() { console.log(`Hello, my name is ${this.name}`); } }
4. 类型别名 (Type Aliases)
类型别名 (type
) 可以为复杂的类型定义简短的别名,便于代码复用。
type StringOrNumber = string | number; let value: StringOrNumber = 42;
5. 枚举 (Enums)
TypeScript 引入了 enum
类型,用于定义一组命名的常量,提高代码的可读性。枚举在 JavaScript 中没有直接的对应。
enum Direction { Up, Down, Left, Right, } let dir: Direction = Direction.Up;
6. 元组 (Tuples)
元组允许定义具有固定数量和类型的数组。它适用于需要固定数据结构的场景,比如坐标或 RGB 颜色值。
let point: [number, number] = [10, 20];
7. 访问控制修饰符 (Access Modifiers)
TypeScript 在类中提供了 public
、private
和 protected
修饰符,允许控制属性或方法的可见性,支持更好的封装。
class Person { private name: string; protected age: number; public constructor(name: string, age: number) { this.name = name; this.age = age; } }
8. 抽象类 (Abstract Classes)
TypeScript 支持抽象类,抽象类不能直接实例化,需要由子类实现。抽象类适用于定义通用行为和抽象方法的类层次结构。
abstract class Animal { abstract makeSound(): void; } class Dog extends Animal { makeSound() { console.log("Woof!"); } }
9. 泛型 (Generics)
TypeScript 支持泛型,允许在类、接口和函数中使用参数化类型,使得代码可以适应不同的类型需求,同时保持类型安全。
function identity<T>(value: T): T { return value; } let num = identity<number>(42);
10. 模块和命名空间
TypeScript 提供了基于 ES6 的模块系统,使用 import
和 export
导入和导出模块。此外,TypeScript 还支持命名空间(Namespace),用于组织代码和避免命名冲突。
// math.ts export function add(a: number, b: number): number { return a + b; } // main.ts import { add } from "./math"; console.log(add(2, 3));
11. 类型守卫 (Type Guards)
TypeScript 提供了类型守卫,可以在代码中检查变量类型,帮助编译器推断更加具体的类型。这对于联合类型尤为重要。
function printId(id: string | number) { if (typeof id === "string") { console.log(id.toUpperCase()); } else { console.log(id.toFixed(2)); } }
12. 可选链和空值合并运算符
TypeScript 增加了 JavaScript 的可选链 (?.
) 和空值合并运算符 (??
),简化了代码中对可能为 null
或 undefined
值的处理。
let user = { name: "Alice", address: { city: "Wonderland" } }; console.log(user?.address?.city); // 如果 address 存在则输出 city,否则返回 undefined let value = null; console.log(value ?? "default"); // 如果 value 为 null 或 undefined,则返回 "default"
13. 类型兼容性和工具类型
TypeScript 提供了一些工具类型,如 Partial
、Pick
、Readonly
、Record
等,这些类型可以帮助生成新的类型,简化类型定义。
interface Todo { title: string; description: string; } let partialTodo: Partial<Todo> = { title: "Learn TypeScript" }; // 可选属性
14. 编译期错误检查
TypeScript 提供的编译期错误检查可以捕获 JavaScript 中不易发现的错误,如拼写错误、类型不匹配等,帮助提升代码质量。
15. ES 新特性支持
TypeScript 提前支持了一些还未在所有环境中普及的 ES 特性,如装饰器(Decorators)、异步迭代器等,且能够将其编译成兼容 JavaScript 版本。
通过这些特性,TypeScript 提供了更安全、更结构化的代码能力,在大型项目和多人协作中尤其具有优势。
点我分享笔记