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