当前位置：首页 > article >正文

【前端】Typescript从入门到进阶

article 2024/11/14 19:35:55

以下是 TypeScript 的常用知识点总结，涵盖了从基础到入门的内容，并配有代码示例：

1. TypeScript 基础

1.1 安装和配置

安装 TypeScript 并初始化配置文件：

npm install -g typescript
tsc --init

1.2 基本类型

TypeScript 提供的基本类型有 `number`、`string`、`boolean`、`null`、`undefined`、`symbol`、`bigint`、`void` 等。

let isDone: boolean = false;
let age: number = 25;
let name: string = "Alice";
let u: undefined = undefined;
let n: null = null;

1.3 数组和元组

数组和元组用来表示一组数据，其中数组是同一类型元素的集合，元组则是已知数量和类型的集合。

let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["Alice", 25];

1.4 枚举 (Enum)

`enum` 用于定义一组命名常量：

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

2. 接口 (Interface)

接口用于定义对象的结构，包括属性和方法的类型。接口可以用于类型检查和代码提示。

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

function greet(person: Person): void {
console.log("Hello, " + person.name);
}

let user: Person = { name: "Alice", age: 25 };
greet(user);
```

2.1 可选属性和只读属性

接口中的可选属性在对象中可以不存在，用 `?` 表示；只读属性使用 `readonly` 关键字修饰。

```typescript
interface Book {
readonly title: string;
author?: string;
}

let book: Book = { title: "TypeScript Handbook" };
// book.title = "New Title"; // 错误：title 是只读属性
```

2.2 函数类型的接口

接口还可以用于定义函数的结构：

```typescript
interface Add {
(x: number, y: number): number;
}

const add: Add = (x, y) => x + y;
```

3. 类型别名 (Type Alias)

类型别名允许为任何类型创建一个新的名称：

```typescript
type ID = string | number;
let userId: ID = "123";
userId = 456;
```

4. 联合类型和交叉类型

4.1 联合类型 (Union Types)

联合类型表示一个值可以是几种类型之一，用 `|` 表示。

```typescript
let value: string | number;
value = "hello";
value = 42;
```

4.2 交叉类型 (Intersection Types)

交叉类型用于将多个类型合并为一个类型，用 `&` 表示。

``typescript
interface Name {
na`me: string;
}
interface Age {
age: number;
}

type Person = Name & Age;
let person: Person = { name: "Alice", age: 25 };
```

5. 类 (Class) 和继承

5.1 定义类

TypeScript 支持面向对象编程，使用 `class` 关键字定义类：

```typescript
class Animal {
name: string;

constructor(name: string) {
this.name = name;
}

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

let dog = new Animal("Dog");
dog.move(10);
```

5.2 类的继承

使用 `extends` 关键字实现继承：

```typescript
class Bird extends Animal {
fly(distance: number) {
console.log(`${this.name} flew ${distance}m.`);
}
}

let bird = new Bird("Sparrow");
bird.fly(20);
```

6. 泛型 (Generics)

泛型使得函数、接口和类可以适用于多种类型。

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

let output = identity<string>("Hello");
```

6.1 泛型接口和泛型类

```typescript
interface Pair<T, U> {
first: T;
second: U;
}

let p: Pair<string, number> = { first: "Alice", second: 25 };

class Stack<T> {
private items: T[] = [];

push(item: T) {
this.items.push(item);
}

pop(): T | undefined {
return this.items.pop();
}
}
```

7. 类型断言 (Type Assertion)

类型断言用于告诉编译器变量的实际类型。它有两种语法：

```typescript
let someValue: any = "Hello, TypeScript";
let strLength: number = (someValue as string).length;
// 或
let strLength2: number = (<string>someValue).length;
```

8. 类型守卫 (Type Guards)

TypeScript 提供了多种类型守卫，包括 `typeof`、`instanceof` 和自定义类型守卫。

```typescript
function padLeft(value: string, padding: string | number) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
if (typeof padding === "string") {
return padding + value;
}
throw new Error(`Expected string or number, got '${padding}'.`);
}
```

9. 模块和命名空间

9.1 模块

模块帮助组织代码。使用 `export` 和 `import` 导出和导入模块。

```typescript
// utils.ts
export function add(x: number, y: number): number {
return x + y;
}

// main.ts
import { add } from "./utils";
console.log(add(2, 3));
```

9.2 命名空间

命名空间用于将一组相关的代码放在一个命名空间下。

```typescript
namespace MathUtils {
export function add(x: number, y: number): number {
return x + y;
}
}

console.log(MathUtils.add(2, 3));
```

10. 高级类型

10.1 映射类型 (Mapped Types)

映射类型可以基于已有类型创建新的类型。

type Person = {
name: string;
age: number;
}

type ReadonlyPerson = {
readonly [K in keyof Person]: Person[K];
}

10.2 条件类型 (Conditional Types)

条件类型是根据条件返回不同类型的类型。

type IsString<T> = T extends string ? "string" : "not string";
type Test = IsString<string>; // "string"
type Test2 = IsString<number>; // "not string"