【前端】Typescript从入门到进阶

以下是 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"

10.3 工具类型

TypeScript 内置了一些工具类型，如 `Partial`、`Required`、`Readonly` 等。

interface User {
  name: string;
  age: number;
}

type PartialUser = Partial<User>; // 所有属性变为可选
type ReadonlyUser = Readonly<User>; // 所有属性变为只读

以上是 TypeScript 的基础到入门知识总结，希望对你有所帮助！

原文地址：https://blog.csdn.net/m0_55049655/article/details/143693958

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！