TypeScript在JavaScript的基础上增加哪些内容？前端会用到哪些知识点？

目录

1.静态类型：

2.接口 (Interface)：

3.枚举（Enum）：

4. 元组 (Tuple)：

5.多种类型：

（1）类型别名 (Type Alias)：

（2）联合类型 (Union Types)：

（3）交叉类型 (Intersection Types)：

6.泛型 (Generics)：

7.非空断言操作符 (!)：

8.可选链操作符 (?.)：

9.空值合并操作符 (??)：

---

1.静态类型：

在 JavaScript 中变量是动态类型的，而 TypeScript 提供了静态类型检查，能够在编译时发现潜在的类型错误。

let age: number = 25;  // 显式声明类型
let name: string = "Alice";  // 字符串类型
let isActive: boolean = true;  // 布尔类型

2.接口 (Interface)：

用于定义对象的结构，便于代码的规范化。

interface User {
  id: number;
  name: string;
  email?: string;  // 可选属性
}

let user: User = {
  id: 1,
  name: "John Doe",
};

3.枚举（Enum）：

枚举是一种用于定义一组常量的类型。

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let dir: Direction = Direction.Up;
console.log(dir); // 输出: 0

4. 元组 (Tuple)：

元组允许定义一个固定长度和类型的数组。

let tuple: [string, number] = ["Age", 25];

5.多种类型：

（1）类型别名 (Type Alias)：

类型别名可以为复杂类型起一个别名。

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

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

（2）联合类型 (Union Types)：

变量可以有多种类型。

let id: number | string;
id = 123;
id = "abc";

（3）交叉类型 (Intersection Types)：

组合多个类型为一个类型。

type A = { name: string };
type B = { age: number };

type C = A & B;

let person: C = { name: "Alice", age: 30 };

6.泛型 (Generics)：

使函数或类能够适应多种类型。

function add(a: number, b: number): number {
  return a + b;
}

let result = identity<number>(10);

7.非空断言操作符 (!)：

告诉编译器变量一定有值。

let name!: string;
initialize();
console.log(name.toUpperCase());

function initialize() {
  name = "Alice";
}

8.可选链操作符 (?.)：

用于处理深层嵌套对象时避免空引用错误。

let user = {
  address: {
    street: "Main St",
  },
};

console.log(user?.address?.street);  // 输出: "Main St"
console.log(user?.contact?.phone);  // 输出: undefined

9.空值合并操作符 (??)：

如果变量为 null 或 undefined，返回默认值。

let name: string | null = null;
console.log(name ?? "Default Name");  // 输出: "Default Name"