JavaScript 的升级版 TypeScript 已日益成为开发世界全新的演变里程碑。立足于 JavaScript 的优雅灵活与 TypeScript 的强类型体系，本教程旨在助您铸就极致的开发力量。

我们的 TypeScript 系列教程将自始至终地引导你掌握 TypeScript 的各种方面，与您一起，宏观理解 JavaScript 世界、深入钻研 TypeScript 规则与逻辑，探索现代前端架构的无限可能性。

无论你是初学乍练，还是已有一定基础，本教程都将按需调整深度和广度，带你领略 TypeScript 的逻辑美感和规则魅力。我们将从概述 TypeScript 的基础特性开始，逐步涵盖完整的类型系统，深入掌握接口、类和模块，直至探索 TypeScript 联合 TypeScript 工具链的最佳实践。

严谨的理论讲解，生动的实例分析，尽在本教程。不论是函数式编程，（FP）还是面向对象编程（OOP），所有首要概念与理论都会得到清晰的解读和实践落地。同时，我们的教程连接日常开发问题，从实际角度出发，教会你解决问题，胜于只懂理论。

让我们一同启航，感受 TypeScript 的鲜明特点和强大潜力，为你的前端旅程增添一份精确和强大的工具！编程的世界正在等待你的探索。

TypeScript

当使用npm（Node Package Manager）编译TypeScript代码时，通常需要遵循以下几个步骤：

### 1. **初始化npm项目**
首先，确保你的项目中有一个`package.json`文件。如果还没有，可以通过运行以下命令来创建：

```bash
npm init -y
```

这个命令将创建一个默认的`package.json`文件。

### 2. **安装TypeScript**
接下来，你需要安装TypeScript编译器。可以使用npm来安装它作为开发依赖：

```bash
npm install typescript --save-dev
```

这条命令会将TypeScript编译器添加到你项目的开发依赖中，并更新`package.json`文件。

### 3. **配置TypeScript**
安装TypeScript之后，需要创建一个配置文件`tsconfig.json`，该文件指定了TypeScript编译器的编译选项。可以手动创建该文件，或者使用TypeScript的命令行工具来生成：

```bash
npx tsc --init
```

该命令会创建一个预配置的`tsconfig.json`文件，你可以根据需要修改里面的编译选项，比如`target`（指定ECMAScript目标版本）、`module`（指定模块化系统），`outDir`（指定编译后文件存放的目录）等。

### 4. **编写TypeScript代码**
在项目中创建`.ts`文件，并编写TypeScript代码。例如，创建一个`src/index.ts`文件：

```typescript
function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("World"));
```

### 5. **编译TypeScript代码**
有了配置文件和TypeScript源代码后，可以通过运行TypeScript编译器来编译代码。在`package.json`中添加一个npm script，以便快速运行编译命令：

```json
"scripts": {
    "build": "tsc"
}
```

然后，可以通过运行以下命令来编译项目：

```bash
npm run build
```

这将根据`tsconfig.json`文件中的设置，将TypeScript代码编译到指定的输出目录。

### 6. **运行生成的JavaScript代码**
编译完成后，如果你的`tsconfig.json`配置正确，并且`outDir`设置为`dist`，你可以在`dist`目录下找到编译后的JavaScript文件。运行这些文件：

```bash
node dist/index.js
```

这将输出`Hello, World!`到控制台。

### 结论
通过上述步骤，你可以使用npm和TypeScript编译器来编译和运行TypeScript代码。这些步骤涵盖了从项目初始化到代码运行的完整流程，确保TypeScript的有效编译和执行。

如何使用npm命令编译typescript？

在 TypeScript 中定义对象数组是一种常见的做法，特别是当你需要处理具有相同结构的多个数据实体时。在 TypeScript 中定义对象数组通常涉及两个步骤：首先定义对象的类型（通常是接口或类型别名），然后定义数组类型。

### 步骤 1: 定义对象的类型

你可以使用接口（`interface`）或类型别名（`type`）来定义一个对象的结构。例如，假设我们需要定义一个表示用户的对象，你可以这样做：

```typescript
interface IUser {
  id: number;
  name: string;
  age: number;
}

// 或者使用类型别名
type User = {
  id: number;
  name: string;
  age: number;
};
```

### 步骤 2: 定义对象数组

一旦有了对象的类型定义，你就可以通过在类型后面加上 `[]` 来定义对象的数组。例如：

```typescript
let users: IUser[] = [];

// 添加数据到数组
users.push({ id: 1, name: "Alice", age: 30 });
users.push({ id: 2, name: "Bob", age: 24 });

// 或者使用类型别名
let users2: User[] = [
  { id: 3, name: "Charlie", age: 28 },
  { id: 4, name: "David", age: 22 }
];
```

### 示例应用

假设我们正在开发一个简单的应用程序，需要展示用户列表。首先，我们定义用户的类型，然后创建一个用户数组并填充数据，最后可能通过函数处理这些数据，例如，过滤出所有年龄大于25岁的用户：

```typescript
interface IUser {
  id: number;
  name: string;
  age: number;
}

let users: IUser[] = [
  { id: 1, name: "Alice", age: 30 },
  { id: 2, name: "Bob", age: 24 },
  { id: 3, name: "Charlie", age: 28 }
];

function filterUsersByAge(users: IUser[], minAge: number): IUser[] {
  return users.filter(user => user.age >= minAge);
}

let usersOver25 = filterUsersByAge(users, 25);
console.log(usersOver25); // 输出：[{ id: 1, name: "Alice", age: 30 }, { id: 3, name: "Charlie", age: 28 }]
```

这个例子展示了如何定义和使用 TypeScript 中的对象数组，以及如何操作这些数组来满足特定的业务需求。

如何使用 typescript 定义对象数组？

在TypeScript中创建枚举类型主要有两种方式：数字枚举和字符串枚举。枚举（Enum）是一种特殊的类型，它允许为一组相关的值定义一个命名集合。下面我将详细说明这两种方式，并提供一些例子。

### 数字枚举（Numeric Enums）

数字枚举是TypeScript中最常见的枚举类型。在数字枚举中，成员的值默认从0开始自动增加，但是你也可以手动指定任何一个成员的值。

**例子：**

```typescript
enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

console.log(Direction.Up);    // 输出: 1
console.log(Direction.Left);  // 输出: 3
```

在这个例子中，`Direction.Up` 的值被显式地设为1，而后面的枚举成员（`Down`, `Left`, `Right`）则自动增加。也就是说，`Direction.Down` 的值为2，`Direction.Left` 的值为3，依此类推。

### 字符串枚举（String Enums）

字符串枚举要求每个成员都必须用字符串字面量或另一个字符串枚举成员初始化。

**例子：**

```typescript
enum Message {
    Success = "Congratulations! You succeeded.",
    Failure = "Sorry! You failed."
}

console.log(Message.Success);  // 输出: "Congratulations! You succeeded."
```

在这个例子中，枚举`Message`中的每个成员都被显式地设定为一个特定的字符串。这使得代码更具可读性和维护性，同时避免了魔术字符串的使用。

### 总结

使用枚举可以提高代码的可读性和健壮性。在TypeScript中实现枚举也非常直观，无论是数字枚举还是字符串枚举都有其用武之地。通常在需要定义一组固定的常量时，枚举是一个非常好的选择。例如，在处理诸如方向、状态消息等固定集合的数据时，枚举提供了一个非常方便的方式来组织这些值。

如何在 TypeScript 中创建枚举的类型？

TypeScript 确实支持类似“subset类型”的概念，这主要是通过类型兼容性和结构子类型（structural subtyping）来实现的。在 TypeScript 中，如果一个类型 Y 的所有成员的类型都是另一个类型 X 的成员类型的子类型，那么类型 Y 可以认为是类型 X 的子类型。这种关系允许我们在 TypeScript 中使用更具体的类型来代替更一般的类型，实现了所谓的“subset类型”。

### 示例

假设我们有一个类型 `Person`，它有两个属性：`name` 和 `age`。

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

现在，我们定义一个新的类型 `Student`，它是 `Person` 类型的子集，增加了一个属性 `school`：

```typescript
type Student = {
    name: string;
    age: number;
    school: string;
};
```

在这种情况下，`Student` 类型可以看作是 `Person` 类型的一个扩展（或“subset”），因为它包含了 `Person` 类型的所有属性，并添加了额外的属性。如果在代码中我们需要一个 `Person` 类型的对象，但是我们给出了一个 `Student` 类型的对象，这在 TypeScript 中是被允许的，因为 `Student` 类型兼容 `Person` 类型。

### 代码使用

在函数中，我们可以看到类型的兼容性如何工作：

```typescript
function greet(person: Person) {
    console.log(`Hello, ${person.name}!`);
}

const student: Student = {
    name: 'Alice',
    age: 20,
    school: 'MIT'
};

// 这里可以直接传入 student，因为 Student 类型兼容 Person 类型
greet(student);  // 输出: Hello, Alice!
```

这个例子展示了 TypeScript 中类型系统的灵活性和强大功能，我们可以安全地使用 `Student` 对象来满足需要 `Person` 对象的函数需求，这正是所谓的“subset类型”或结构子类型的概念。TypeScript 自身并未直接提供名为 “subset 类型” 的特定特性，但你可以利用 TypeScript 的高级类型系统来定义一个类型是另一个类型的子集。这可以通过多种方式实现，比如使用交叉类型、接口继承、或是使用工具类型如 `Partial<T>`。

比如，如果我们有一个基本的接口：

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

而我们想要定义一个类型，它是 `Person` 的子集，只包含 `name` 和 `age` 属性，我们可以使用 TypeScript 提供的 `Pick` 工具类型来实现：

```typescript
type SubsetPerson = Pick<Person, 'name' | 'age'>;

let person: SubsetPerson = {
    name: "Alice",
    age: 25
};
```

这里 `SubsetPerson` 是从 `Person` 类型中挑选出 `name` 和 `age` 属性来形成新的类型。通过这种方式，我们没有重新定义属性，而是利用了现存的类型定义，这有助于减少代码重复并保持类型的一致性。

另一个实现子集的方式是使用 `Partial<T>`，它将一个类型的所有属性都变为可选的：

```typescript
type OptionalPerson = Partial<Person>;

let someone: OptionalPerson = {
    name: "Bob"
};
```

在这个例子中，`OptionalPerson` 类型的对象可以包含 `Person` 的任意组合的属性，每个属性都是可选的。这也提供了一种灵活定义子集类型的方式。

总结来说，虽然 TypeScript 没有明确的“subset 类型”，但是它提供了强大的类型系统，通过工具类型和类型操作使得定义类型的子集成为可能。

TypeScript 确实支持类似“subset类型”的概念，这主要是通过类型兼容性和结构子类型（structural subtyping）来实现的。在 TypeScript 中，如果一个类型 Y 的所有成员的类型都是另一个类型 X 的成员类型的子类型，那么类型 Y 可以认为是类型 X 的子类型。这种关系允许我们在 TypeScript 中使用更具体的类型来代替更一般的类型，实现了所谓的“subset类型”。

### 示例

假设我们有一个类型 `Person`，它有两个属性：`name` 和 `age`。

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

现在，我们定义一个新的类型 `Student`，它是 `Person` 类型的子集，增加了一个属性 `school`：

```typescript
type Student = {
    name: string;
    age: number;
    school: string;
};
```

在这种情况下，`Student` 类型可以看作是 `Person` 类型的一个扩展（或“subset”），因为它包含了 `Person` 类型的所有属性，并添加了额外的属性。如果在代码中我们需要一个 `Person` 类型的对象，但是我们给出了一个 `Student` 类型的对象，这在 TypeScript 中是被允许的，因为 `Student` 类型兼容 `Person` 类型。

### 代码使用

在函数中，我们可以看到类型的兼容性如何工作：

```typescript
function greet(person: Person) {
    console.log(`Hello, ${person.name}!`);
}

const student: Student = {
    name: 'Alice',
    age: 20,
    school: 'MIT'
};

// 这里可以直接传入 student，因为 Student 类型兼容 Person 类型
greet(student);  // 输出: Hello, Alice!
```

这个例子展示了 TypeScript 中类型系统的灵活性和强大功能，我们可以安全地使用 `Student` 对象来满足需要 `Person` 对象的函数需求，这正是所谓的“subset类型”或结构子类型的概念。

TypeScript 确实支持类似“subset类型”的概念，这主要是通过类型兼容性和结构子类型（structural subtyping）来实现的。在 TypeScript 中，如果一个类型 Y 的所有成员的类型都是另一个类型 X 的成员类型的子类型，那么类型 Y 可以认为是类型 X 的子类型。这种关系允许我们在 TypeScript 中使用更具体的类型来代替更一般的类型，实现了所谓的“subset类型”。

### 示例

假设我们有一个类型 `Person`，它有两个属性：`name` 和 `age`。

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

现在，我们定义一个新的类型 `Student`，它是 `Person` 类型的子集，增加了一个属性 `school`：

```typescript
type Student = {
    name: string;
    age: number;
    school: string;
};
```

在这种情况下，`Student` 类型可以看作是 `Person` 类型的一个扩展（或“subset”），因为它包含了 `Person` 类型的所有属性，并添加了额外的属性。如果在代码中我们需要一个 `Person` 类型的对象，但是我们给出了一个 `Student` 类型的对象，这在 TypeScript 中是被允许的，因为 `Student` 类型兼容 `Person` 类型。

### 代码使用

在函数中，我们可以看到类型的兼容性如何工作：

```typescript
function greet(person: Person) {
    console.log(`Hello, ${person.name}!`);
}

const student: Student = {
    name: 'Alice',
    age: 20,
    school: 'MIT'
};

// 这里可以直接传入 student，因为 Student 类型兼容 Person 类型
greet(student);  // 输出: Hello, Alice!
```

这个例子展示了 TypeScript 中类型系统的灵活性和强大功能，我们可以安全地使用 `Student` 对象来满足需要 `Person` 对象的函数需求，这正是所谓的“subset类型”或结构子类型的概念。
TypeScript 自身并未直接提供名为 “subset 类型” 的特定特性，但你可以利用 TypeScript 的高级类型系统来定义一个类型是另一个类型的子集。这可以通过多种方式实现，比如使用交叉类型、接口继承、或是使用工具类型如 `Partial<T>`。

比如，如果我们有一个基本的接口：

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

而我们想要定义一个类型，它是 `Person` 的子集，只包含 `name` 和 `age` 属性，我们可以使用 TypeScript 提供的 `Pick` 工具类型来实现：

```typescript
type SubsetPerson = Pick<Person, 'name' | 'age'>;

let person: SubsetPerson = {
    name: "Alice",
    age: 25
};
```

这里 `SubsetPerson` 是从 `Person` 类型中挑选出 `name` 和 `age` 属性来形成新的类型。通过这种方式，我们没有重新定义属性，而是利用了现存的类型定义，这有助于减少代码重复并保持类型的一致性。

另一个实现子集的方式是使用 `Partial<T>`，它将一个类型的所有属性都变为可选的：

```typescript
type OptionalPerson = Partial<Person>;

let someone: OptionalPerson = {
    name: "Bob"
};
```

在这个例子中，`OptionalPerson` 类型的对象可以包含 `Person` 的任意组合的属性，每个属性都是可选的。这也提供了一种灵活定义子集类型的方式。

总结来说，虽然 TypeScript 没有明确的“subset 类型”，但是它提供了强大的类型系统，通过工具类型和类型操作使得定义类型的子集成为可能。

Typescript 支持“ subset 类型”吗？

在TypeScript中，定义字符串数组可以通过几种方式实现，但在接口中定义时，我们通常会使用类型注解来明确指定数组中的元素类型为字符串。以下是两种常见的定义方式：

### 方式一：使用`string[]`

在这种方式中，我们直接使用`string[]`来标注类型，表明该接口的属性是一个由字符串组成的数组。

```typescript
interface IUserNames {
    names: string[];
}

// 使用例子
const userNames: IUserNames = {
    names: ["Alice", "Bob", "Charlie"]
};
```

这种方法非常直观，清楚地表明`names`是一个字符串数组。

### 方式二：使用`Array<string>`

这种方式使用`Array<元素类型>`的泛型形式来定义字符串数组。这与上面的方法在功能上是等价的，但在语法上稍有不同。

```typescript
interface IUserNames {
    names: Array<string>;
}

// 使用例子
const userNames: IUserNames = {
    names: ["Alice", "Bob", "Charlie"]
};
```

这种方法在一些情况下更具可读性，特别是当数组元素类型较复杂时（例如数组中的元素是其他接口或类型别名）。

### 总结

无论选择哪种方式，重要的是保持代码的一致性。在团队中应该统一使用一种方式来定义数组类型，这样可以减少理解和维护的负担。在上述两个例子中，我们都定义了一个接口`IUserNames`，其中包含一个属性`names`，该属性是一个字符串数组，这样可以确保类型安全，同时利用TypeScript提供的类型检查功能。

如何在TypeScript接口中定义字符串数组？

在TypeScript中，如果你想让一个对象的某个属性是可选的，可以在属性名后面加上一个问号`?`。这表示该属性是可选的，也就是说，在创建对象时，可以选择是否提供这个属性的值。

### 示例

假设我们有一个接口`Person`，它代表一个人的信息。我们希望`age`属性是可选的，因为可能有些情况下我们不知道一个人的年龄。

```typescript
interface Person {
    name: string;
    age?: number; // 使 age 属性可选
}

function createPerson(name: string, age?: number): Person {
    let person: Person = { name };
    if (age !== undefined) {
        person.age = age;
    }
    return person;
}

// 使用示例
let person1 = createPerson("Alice");
let person2 = createPerson("Bob", 30);

console.log(person1); // 输出: { name: 'Alice' }
console.log(person2); // 输出: { name: 'Bob', age: 30 }
```

在上面的例子中，我们定义了一个`Person`接口，其中`age`属性被标记为可选的。这允许我们在创建`Person`实例时不必总是提供一个年龄。`createPerson`函数展示了如何根据可选参数创建对象，如果提供了年龄，则添加到对象中。

这种方式很有用，尤其是在处理具有大量可选属性的大型表单数据时，可以有效地减少代码的复杂性。

TypeScript 中如何使单个属性可选

在 TypeScript 中，变量后面的感叹号（!）是一个非空断言操作符。这个操作符用于告诉 TypeScript 编译器，开发者已经确定这个变量在使用时不会为 null 或 undefined，即使从类型上看这个变量是有可能为 null 或 undefined 的。

这通常用在开发者能够确保某个值一定会被赋值，但 TypeScript 的类型检查可能无法推断出这一点的情况。使用非空断言操作符可以避免 TypeScript 的编译错误。

### 示例

假设我们有一个接口 `User` 和一个可能返回 `User` 或者 `null` 的函数 `getUserById`：

```typescript
interface User {
    id: number;
    name: string;
}

function getUserById(id: number): User | null {
    // 模拟用户数据获取
    if (id === 1) {
        return { id: 1, name: 'Alice' };
    }
    return null;
}

const user = getUserById(1);
console.log(user!.name);  // Alice
```

在这个例子中，尽管 `getUserById` 函数的返回类型是 `User | null`，意味着 `user` 变量可能是 `null`，但我们在调用 `getUserById(1)` 时，通过实现逻辑知道它会返回一个 `User` 对象。因此，我们可以使用 `!` 后缀来告诉 TypeScript 编译器 `user` 在这种情况下不会是 `null`，从而安全地访问 `user.name` 属性而不会引发编译错误。

然而，需要注意的是，滥用非空断言操作符可能会导致运行时错误，因为它基本上是在告诉编译器忽略空值检查。如果在不适当的情况下使用，而变量实际上是 `null` 或 `undefined`，那么在运行时访问这个变量的属性或方法时就会导致错误。因此，建议只在确实能够保证变量不为 `null` 或 `undefined` 的情况下使用此操作符。

在 TypeScript 中，变量后面的感叹号是什么意思？

在TypeScript中，“never”和“void”是两种非常特殊的类型，它们在函数的返回类型定义中扮演着重要的角色，但它们的用途和含义有所不同。

### Void

`void` 类型通常用于标识一个函数没有返回值。当函数执行完毕后，并不返回任何内容，我们通常将这个函数的返回类型设置为 `void`。这主要用在函数主要进行操作或副作用（例如打印日志、修改全局变量等），而不需要返回数据的场景。

**例如：**

```typescript
function logMessage(message: string): void {
    console.log(message);
}
```

在这个例子中，`logMessage` 函数用于在控制台输出一个信息，它不需要返回任何内容，因此使用 `void` 类型作为返回类型。

### Never

`never` 类型表示的是那些永远无法正常结束（无法到达终点）的函数的返回类型。这包括抛出异常的函数和无限循环的函数。

**例如：**

```typescript
function throwError(errorMsg: string): never {
    throw new Error(errorMsg);
}

function infiniteLoop(): never {
    while (true) {
    }
}
```

在这两个函数中，`throwError` 函数永远不会正常结束，因为它总是会抛出一个错误；`infiniteLoop` 函数也永远不会结束，因为它进入了一个无限循环。这两种情况下，函数的返回类型使用 `never`，意味着这个函数不会有任何正常的返回路径。

### 总结

总的来说，`void` 用于那些没有返回任何值的函数，而 `never` 用于那些根本就不会有返回的函数（由于异常或无限循环等原因）。理解这两者的区别，有助于更准确地描述函数的行为和预期。

Typescript 中的“ never ”和“ void ”有什么区别？

在Web开发中，实例化新的HTMLElement通常涉及使用JavaScript来动态创建新的DOM（Document Object Model）元素。这在创建动态交互式网页时非常常见。以下是一些基本步骤和示例，展示如何实例化一个新的HTMLElement：

### 步骤 1: 使用 `document.createElement()`
这是最常用的方法来创建一个新的元素。此函数接受一个字符串参数，该参数表示要创建的元素的类型。

**例子：创建一个新的`<div>`元素。**

```javascript
var newDiv = document.createElement("div");
```

### 步骤 2: 设置元素属性
创建元素后，可能需要设置一些属性，比如 `id`, `class`, `style` 等。

**例子：为新创建的`<div>`添加类名和样式。**

```javascript
newDiv.className = "my-new-div";
newDiv.style.color = "blue";
newDiv.style.fontSize = "14px";
```

### 步骤 3: 添加内容到元素
可以通过设置`textContent`或`innerHTML`属性，或者通过添加子元素来向元素添加内容。

**例子：向`<div>`中添加文本内容。**

```javascript
newDiv.textContent = "Hello, world!";
```

### 步骤 4: 将元素添加到DOM中
创建并配置完元素后，需要将其添加到DOM中的合适位置。这通常使用`appendChild()`或`insertBefore()`方法。

**例子：将新创建的`<div>`添加到网页的body中。**

```javascript
document.body.appendChild(newDiv);
```

### 综合示例
以下是一个综合示例，展示了如何创建一个新的`<div>`，配置它，并添加到DOM中：

```javascript
// 创建新元素
var newDiv = document.createElement("div");

// 设置属性
newDiv.className = "my-new-div";
newDiv.style.color = "blue";
newDiv.style.fontSize = "14px";

// 添加内容
newDiv.textContent = "Hello, world!";

// 添加到DOM
document.body.appendChild(newDiv);
```

通过这些步骤，我们可以灵活地在网页上动态地创建和配置新的HTML元素。这对于响应用户操作或实时更新页面内容非常有用。

如何实例化新的HTMLElement？

当您使用`mongoose`来连接到MongoDB数据库时，可能会遇到“current URL string parser is deprecated”这样的警告。这是因为老版本的`mongoose`使用的URL字符串解析器已经不再被官方推荐使用。

要解决这个问题，您可以在连接数据库时将选项`useNewUrlParser`设置为`true`。这样会让`mongoose`使用新的、符合当前标准的URL字符串解析器。这样可以避免上述的警告，同时确保您的应用程序在将来的MongoDB驱动升级中保持兼容性。

下面是一个连接到MongoDB时设置`useNewUrlParser`的例子：

```javascript
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/myapp', { useNewUrlParser: true })
  .then(() => console.log('MongoDB connected successfully.'))
  .catch(err => console.error('MongoDB connection error:', err));
```

在这个例子中，当我调用`mongoose.connect`时，我传入一个配置对象作为第二个参数，其中包含了`useNewUrlParser: true`。这告诉`mongoose`使用新的连接字符串解析器，防止了弃用的警告消息的出现。

此外，在新版本的`mongoose`中（例如5.x版本之后），`useNewUrlParser`已经默认设置为`true`，因此如果您使用的是较新版本的`mongoose`，您可能不需要明确设置这个选项。

最佳实践是始终保持您的依赖项更新到最新版本，这样可以确保您的应用程序利用了最新的功能，同时也避免了不必要的警告和错误。

通过将 useNewUrlParser 设置为 true 来避免“current URL string parser is deprecated”警告

在Typescript中删除数组中的某一项，通常有几种不同的方法。以下是一些常用的方法，每种方法都有相应的使用场景和示例。

### 1. 使用 `splice` 方法

`splice` 方法可以用来添加或删除数组中的元素。要删除特定的元素，你需要知道该元素的索引。`splice` 的第一个参数是开始修改的数组索引，第二个参数是要删除的元素数量。请注意，`splice` 是一个改变原数组的方法。

**示例：**

```typescript
let numbers = [1, 2, 3, 4, 5];
let indexToRemove = 2; // 我们想要删除数字 3，它的索引是 2
numbers.splice(indexToRemove, 1); // 从索引2的位置开始删除一个元素
console.log(numbers); // 输出: [1, 2, 4, 5]
```

### 2. 使用 `filter` 方法

如果你想要根据元素的值而不是索引来删除元素，或者需要删除满足特定条件的所有项，`filter` 方法是很好的选择。`filter` 创建一个新数组，包含通过提供的函数实现的测试的所有元素，不会改变原数组。

**示例：**

```typescript
let numbers = [1, 2, 3, 4, 5];
let valueToRemove = 3;
numbers = numbers.filter(item => item !== valueToRemove);
console.log(numbers); // 输出: [1, 2, 4, 5]
```

### 3. 使用 `slice` 方法

`slice` 方法可以用来创建数组的一个浅拷贝，从而不改变原数组。如果你知道要删除的元素的索引范围，可以使用 `slice` 来创建不包含这些元素的新数组。

**示例：**

```typescript
let numbers = [1, 2, 3, 4, 5];
let startOfNewArray = numbers.slice(0, 2); // 获取索引0到2（不包括2）的元素
let endOfNewArray = numbers.slice(3); // 获取索引3到数组末尾的元素
numbers = [...startOfNewArray, ...endOfNewArray]; // 使用展开运算符合并数组
console.log(numbers); // 输出: [1, 2, 4, 5]
```

### 4. 使用 `pop` 或 `shift` 方法

如果你想要删除数组的最后一个元素，可以使用 `pop` 方法，同样的，如果你想删除数组的第一个元素，可以使用 `shift` 方法。

**示例：**

```typescript
let numbers = [1, 2, 3, 4, 5];

numbers.pop(); // 删除数组的最后一个元素
console.log(numbers); // 输出: [1, 2, 3, 4]

numbers.shift(); // 删除数组的第一个元素
console.log(numbers); // 输出: [2, 3, 4]
```

你选择哪种方法取决于你的具体需求，比如是否需要原地修改数组、是否已知索引或者删除条件等。在实际的编码工作中，保持代码的可读性和清晰的逻辑也是非常重要的。

Typescript 如何删除数组中某一项？

在TypeScript中，将字符串转换为数字通常有两种常用的方法：使用全局的 `parseInt()` 或 `parseFloat()` 函数，以及使用一元加号运算符。下面是具体的例子：

### 使用 `parseInt()` 和 `parseFloat()`

`parseInt()` 函数用于将字符串解析为整数，而 `parseFloat()` 函数则用于解析为浮点数。

```typescript
let stringValue: string = "123";
let intValue: number = parseInt(stringValue);

// 如果字符串是浮点数表示，可以使用parseFloat来获取浮点数
stringValue = "123.456";
let floatValue: number = parseFloat(stringValue);

console.log(intValue);    // 输出：123
console.log(floatValue);  // 输出：123.456
```

`parseInt()` 函数可以接受第二个参数作为基数，以便解析不同进制的数字字符串。例如，如果你想解析十六进制的字符串，可以这样做：

```typescript
stringValue = "0xF";
intValue = parseInt(stringValue, 16);

console.log(intValue); // 输出：15
```

### 使用一元加号运算符

一元加号运算符（`+`）可以将其紧随的字符串转换成数字：

```typescript
stringValue = "123";
intValue = +stringValue;  // 一元加号

stringValue = "123.456";
floatValue = +stringValue; // 也能够处理浮点数

console.log(intValue);    // 输出：123
console.log(floatValue);  // 输出：123.456
```

这种方法很简洁，但是如果字符串不是合法的数字，则会得到 `NaN`（Not-a-Number）。

### 错误处理

在实际应用中，你通常需要处理可能发生的错误。例如，如果字符串不包含有效的数字，`parseInt()` 和 `parseFloat()` 会返回 `NaN`，而一元加号运算符也是如此。你可能需要在转换后检查结果是否为 `NaN`，并相应地处理：

```typescript
stringValue = "abc";
intValue = parseInt(stringValue);

if (isNaN(intValue)) {
    console.log("parseInt 失败，字符串不包含有效数字");
} else {
    console.log(intValue);
}

// 使用一元加号运算符时的检查
floatValue = +stringValue;

if (isNaN(floatValue)) {
    console.log("一元加号运算符转换失败，字符串不包含有效数字");
} else {
    console.log(floatValue);
}
```

在编写TypeScript代码时，考虑到类型安全和错误处理是非常重要的，以上例子都演示了如何将字符串安全地转换为数字，并如何处理潜在的错误。

[Exactly like](https://stackoverflow.com/questions/1133770/convert-a-string-to-an-integer) [in JavaScript](https://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which/17106702#17106702), you can use the [`parseInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) or [`parseFloat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) functions, or simply use the unary `+` operator:

    var x = "32";
    var y: number = +x;
    

All of the mentioned techniques will have correct typing and will correctly parse simple decimal integer strings like `"123"`, but will behave differently for various other, possibly expected, cases (like `"123.45"`) and corner cases (like `null`).

[![Conversion table](https://i.stack.imgur.com/QNMfI.png)](https://i.stack.imgur.com/QNMfI.png) Table taken from [this answer](https://stackoverflow.com/a/17106702/1483676)

The TypeScript way to do this would be:

    Number('1234') // 1234
    Number('9BX9') // NaN
    

as answered here: [https://stackoverflow.com/a/23440948/2083492](https://stackoverflow.com/a/23440948/2083492)

For our fellow Angular users:

Within a **template**, `Number(x)` and `parseInt(x)` throws an error, and `+x` has no effect. Valid casting will be `x*1` or `x/1`.

As shown by other answers here, there are multiple ways to do the conversion:

    Number('123');
    +'123';
    parseInt('123');
    parseFloat('123.45')
    

I'd like to mention one more thing on `parseInt` though.

When using `parseInt`, it makes sense to **always pass the radix parameter**. For decimal conversion, that is `10`. This is the default value for the parameter, which is why it _can_ be omitted. For binary, it's a `2` and `16` for hexadecimal. Actually, any radix between and including 2 and 36 works.

    parseInt('123')         // 123 (don't do this)
    parseInt('123', 10)     // 123 (much better)
    
    parseInt('1101', 2)     // 13
    parseInt('0xfae3', 16)  // 64227
    

In some JS implementations, `parseInt` **parses leading zeros as octal**:

> Although discouraged by ECMAScript 3 and forbidden by ECMAScript 5, many implementations interpret a numeric string beginning with a leading 0 as octal. The following may have an octal result, or it may have a decimal result. **Always specify a radix to avoid this unreliable behavior.**
> 
> — [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix)

The fact that code gets clearer is a nice side effect of specifying the radix parameter.

Since `parseFloat` only parses numeric expressions in radix 10, there's no need for a radix parameter here.

More on this:

*   [Why do we need to use radix? (SO Question)](https://stackoverflow.com/questions/6611824/why-do-we-need-to-use-radix)
*   [SO Answer to "What is the difference between parseInt() and Number()?"](https://stackoverflow.com/a/4090577/3861083)

Expounding on what Ryan said, TypeScript embraces the JavaScript idioms in general.

    var n = +"1"; // the unary + converts to number
    var b = !!"2"; // the !! converts truthy to true, and falsy to false
    var s = ""+3; // the ""+ converts to string via toString()
    

All the interesting in-depth details at [JavaScript Type Conversion](http://jibbering.com/faq/notes/type-conversion/).

Typescript 如何将字符串转换为数字？

在TypeScript中，`unknown`和`any`类型都用于表示可能是任意类型的值，但它们的使用目的和类型安全性方面有所不同。

### `any` 类型

- **类型安全性**: `any`是TypeScript类型系统中一个逃逸舱。当你把一个值标记为`any`类型时，你基本上是在告诉编译器：“相信我，我知道我在做什么，不要对这个值做类型检查。” 这意味着你放弃了TypeScript提供的大部分类型安全性。
  
- **使用情况**: `any`类型通常用在你不想要或者不需要类型检查的场合，比如当你从一个JavaScript项目逐步迁移到TypeScript时，或者当你在处理高度动态的内容时，它可以让你快速编码，不受类型系统的限制。
  
- **例子**: 假设你有一个来自第三方库的函数，该函数返回`any`类型。
  
  ```typescript
  function getDynamicData(): any {
    // 模拟从动态数据源获取数据
    return "I could be anything!";
  }
  
  const dynamicData = getDynamicData();
  dynamicData.foo(); // 编译器不会报错，即使foo方法在运行时不存在
  ```

### `unknown` 类型

- **类型安全性**: 相比之下，`unknown`类型是TypeScript中一个更安全的选择。它表示一个值的类型未知，因此你不能只是对它做任何操作。在对`unknown`类型的值执行大多数操作之前，你需要先进行类型检查或类型断言，以确保操作是安全的。
  
- **使用情况**: 当你的函数或变量可能接受任何类型的值，但你仍然想保留TypeScript的类型检查时，使用`unknown`是一个好选择。它标志着你需要在继续操作之前验证该值的类型。
  
- **例子**: 假设你有一个函数，它接受一个`unknown`类型的参数，并检查它是否为字符串。
  
  ```typescript
  function processUnknownValue(value: unknown) {
    if (typeof value === "string") {
      console.log(value.toUpperCase()); // 类型检查确保这是安全的
    } else {
      console.log("Not a string");
    }
  }
  
  processUnknownValue("hello"); // 输出: "HELLO"
  processUnknownValue(42);      // 输出: "Not a string"
  ```

总结来说，`any`类型在TypeScript中提供了完全的灵活性，允许你在不考虑类型安全的情况下执行任何操作。而`unknown`类型提供了一种方法来表示任何可能的类型，同时仍然需要在执行操作之前进行类型检查，以保持类型安全。在实践中，优先选择`unknown`是更好的习惯，因为它能帮助你写出更安全的代码。

Typescript 中 unkown 与 any 的区别？

Typescript中的`get`和`set`被称为访问器，它们是定义对象属性的特殊方法。`get`方法用于访问属性的值，而`set`方法用于设置属性的值。当你想要在读取或设置属性时加入额外逻辑时，这些方法特别有用。

下面是一个使用TypeScript中的`get`和`set`访问器的示例：

```typescript
class Person {
    private _firstName: string;
    private _lastName: string;

    constructor(firstName: string, lastName: string) {
        this._firstName = firstName;
        this._lastName = lastName;
    }

    // 使用get访问器来获取完整的名字
    get fullName(): string {
        return `${this._firstName} ${this._lastName}`;
    }

    // 使用set访问器来设置姓氏，并执行一些额外的逻辑，比如校验
    set lastName(name: string) {
        if (name.length > 0) {
            this._lastName = name;
        } else {
            console.error('Invalid last name');
        }
    }
}

let person = new Person('John', 'Doe');

// 通过get访问器获取fullName
console.log(person.fullName); // 输出：John Doe

// 通过set访问器修改姓氏
person.lastName = 'Smith';
console.log(person.fullName); // 输出：John Smith

// 尝试设置一个无效的姓氏
person.lastName = ''; // 输出：Invalid last name
```

在上面的例子中，我们定义了一个`Person`类，它有私有属性`_firstName`和`_lastName`。我们为这个类定义了两个访问器：

1. `get fullName()`：这个`get`访问器允许我们获取一个人的全名，它通过将`_firstName`和`_lastName`组合起来返回一个字符串。

2. `set lastName(name: string)`：这个`set`访问器允许我们设置一个人的姓氏。在设置姓氏之前，我们可以在这里加入验证逻辑，比如检查新姓氏是否为空，如果为空，则给出错误消息并拒绝更新。

通过使用`get`和`set`访问器，我们可以封装对象的内部状态，同时提供一个简洁的API来访问和修改这些状态，也可以增加验证或其他必要的逻辑。

Typescropt 如何使用 get 和 set ?

在TypeScript中，`get`和`set`访问器允许我们有效地封装对象中的属性，通过这种方式可以在读取或写入属性时执行额外的逻辑。`get`访问器用于定义如何读取属性值，而`set`访问器则定义如何设置属性值。下面是一个使用`get`和`set`访问器的例子：

```typescript
class Person {
    private _firstName: string;
    private _lastName: string;

    constructor(firstName: string, lastName: string) {
        this._firstName = firstName;
        this._lastName = lastName;
    }

    // 使用 get 访问器来读取 fullName
    get fullName(): string {
        return `${this._firstName} ${this._lastName}`;
    }

    // 使用 set 访问器来设置 firstName 和 lastName
    set fullName(name: string) {
        const parts = name.split(' ');
        if (parts.length !== 2) {
            throw new Error('请输入一个完整的名字，例如：John Doe');
        }
        this._firstName = parts[0];
        this._lastName = parts[1];
    }
}

let person = new Person('John', 'Doe');

// 通过 get 访问器获取 fullName
console.log(person.fullName); // 输出: John Doe

// 通过 set 访问器修改 fullName
person.fullName = 'Jane Smith';

// 再次通过 get 访问器获取修改后的 fullName
console.log(person.fullName); // 输出: Jane Smith
```

在上述例子中，`Person` 类有两个私有属性 `_firstName` 和 `_lastName`。为了能够控制对这些属性的访问，我们定义了一个 `fullName` 属性，它有一个 `get` 访问器和一个 `set` 访问器。

- `get fullName()` 方法用于在需要时构造并返回一个完整的名字，即 `_firstName` 和 `_lastName` 的组合。
- `set fullName(name: string)` 方法允许我们通过一个字符串来设置 `_firstName` 和 `_lastName`。如果传入的字符串不是两个部分组成，则会抛出错误。

这样，我们就可以用面向对象的方式，封装属性的具体实现细节，同时通过访问器提供简单的接口供外部代码使用。这样做的好处是可以在设置和获取属性时添加验证逻辑或其他附加操作，而不必暴露类的内部结构。

TypeScript uses getter/setter syntax that is like ECMAScript4/ActionScript3.

    class foo {
        private _bar: boolean = false;
        get bar(): boolean {
            return this._bar;
        }
        set bar(value: boolean) {
            this._bar = value;
        }
    }
    

However, in order to use it at all, you must make sure the TypeScript compiler targets ECMAScript5 or higher. If you are running the command line compiler, use `--target` flag like this:

    tsc --target ES5
    

If you are using Visual Studio, you must edit your project file to add the flag to the configuration for the TypeScriptCompile build tool. You can see that [here](https://stackoverflow.com/a/17261732/1733315):

That will produce this JavaScript, using the ECMAScript 5 `Object.defineProperty()` feature.

    var foo = (function () {
        function foo() {
            this._bar = false;
        }
        Object.defineProperty(foo.prototype, "bar", {
            get: function () {
                return this._bar;
            },
            set: function (value) {
                this._bar = value;
            },
            enumerable: true,
            configurable: true
        });
        return foo;
    })();
    

More recent versions of EcmaScript will produce code that looks more like the original TypeScript. For instance, targeting EcmaScript2017 will produce:

    "use strict";
    class foo {
        constructor() {
            this._bar = false;
        }
        get bar() {
            return this._bar;
        }
        set bar(value) {
            this._bar = value;
        }
    }
    

So to use it,

    var myFoo = new foo();
    if(myFoo.bar) {         // calls the getter
        myFoo.bar = false;  // calls the setter and passes false
    }
    

As @DanFromGermany suggests below, if you are simply reading and writing a local property like `foo.bar = true`, then having a setter and getter pair is overkill. You can always add them later if you need to do something, like logging, whenever the property is read or written.

Getters can be used to implement readonly properties. Here is an example that also shows how getters interact with readonly and optional types.

    //
    // type with optional readonly property.
    // baz?:string is the same as baz:string|undefined
    //
    type Foo = {
        readonly bar: string;
        readonly baz?: string;
    }
    const foo:Foo = {bar: "bar"}
    console.log(foo.bar) // prints 'bar'
    console.log(foo.baz) // prints undefined
    
    //
    // interface with optional readonly property
    //
    interface iFoo {
        readonly bar: string;
        readonly baz?: string;
    }
    
    const ifoo:iFoo = {bar: "bar"}
    console.log(ifoo.bar)  // prints 'bar'
    console.log(ifoo.baz)  // prints undefined
    
    
    //
    // class implements bar as a getter, 
    // but leaves off baz.
    //
    class iBarClass implements iFoo {
    
        get bar() { return "bar" }
    }
    const iBarInstance = new iBarClass()
    console.log(iBarInstance.bar) // prints 'bar'
    console.log(iBarInstance.baz) // prints 'undefined'
    // accessing baz gives warning that baz does not exist 
    // on iBarClass but returns undefined
    // note that you could define baz as a getter
    // and just return undefined to remove the warning.
    
    
    //
    // class implements optional readonly property as a getter
    //
    class iBazClass extends iBarClass {
        private readonly _baz?: string
    
        constructor(baz?:string) {
            super()
            this._baz = baz
        }
    
        get baz() { return this._baz; }
    }
    
    const iBazInstance = new iBazClass("baz")
    console.log(iBazInstance.bar)  // prints bar
    console.log(iBazInstance.baz)  // prints baz

Ezward has already provided a good answer, but I noticed that one of the comments asks how it is used. For people like me who stumble across this question, I thought it would be useful to have a link to the official documentation on getters and setters on the Typescript website as that explains it well, will hopefully always stay up-to-date as changes are made, and shows example usage:

[http://www.typescriptlang.org/docs/handbook/classes.html](http://www.typescriptlang.org/docs/handbook/classes.html)

In particular, for those not familiar with it, note that you don't incorporate the word 'get' into a call to a getter (and similarly for setters):

    var myBar = myFoo.getBar(); // wrong    
    var myBar = myFoo.get('bar');  // wrong
    

You should simply do this:

    var myBar = myFoo.bar;  // correct (get)
    myFoo.bar = true;  // correct (set) (false is correct too obviously!)
    

given a class like:

    class foo {
      private _bar:boolean = false;
    
      get bar():boolean {
        return this._bar;
      }
      set bar(theBar:boolean) {
        this._bar = theBar;
      }
    }
    

then the 'bar' getter for the private '\_bar' property will be called.

Here's a working example that should point you in the right direction:

    class Foo {
        _name;
    
        get Name() {
            return this._name;
        }
    
        set Name(val) {
            this._name = val;
        }
    }
    

Getters and setters in JavaScript are just normal functions. The setter is a function that takes a parameter whose value is the value being set.

You can write this

    class Human {
        private firstName : string;
        private lastName : string;
    
        constructor (
            public FirstName?:string, 
            public LastName?:string) {
    
        }
    
        get FirstName() : string {
            console.log("Get FirstName : ", this.firstName);
            return this.firstName;
        }
        set FirstName(value : string) {
            console.log("Set FirstName : ", value);
            this.firstName = value;
        } 
    
        get LastName() : string {
            console.log("Get LastName : ", this.lastName);
            return this.lastName;
        }
        set LastName(value : string) {
            console.log("Set LastName : ", value);
            this.lastName = value;
        } 
    
    }

I think I probably get why is it so confusing. In your example, we wanted getters and setters for `_name`. But we achieve that by creating getters and setters for an unrelated class variable `Name`.

Consider this:

    class Car {
        private tiresCount = 4;
        get yourCarTiresCount(){
            return this.tiresCount;
        }
        set yourCarTiresCount(count) {
            alert('You shouldn\'t change car tire count')
        }
    }
    

Above code does following:

1.  `get` and `set` create getter and setter for `yourCarTiresCount` (**not for `tiresCount`**).

The getter is :

    function () {
        return this.tiresCount;
    }
    

and the setter is :

    function (count) {
        alert('You shouldn\'t change car tire count');
    }
    

Meaning, every time we do `new Car().yourCarTiresCount`, getter runs. And for every `new Car().yourCarTiresCount('7')` setter runs.

2.  **Indirectly** create getter, but not the setter, for private `tireCount`.

Typescript 中如何使用 get 和 set

在TypeScript中，遍历对象的键可以使用几种不同的方法。以下是一些常用的方法：

### 1. `for...in` 循环

`for...in` 循环是JavaScript语言中遍历对象属性的传统方式。这种方法会遍历对象自己的属性以及原型链上可枚举的属性。

```typescript
const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key); // 输出 'a', 'b', 'c'
  }
}
```

使用 `hasOwnProperty` 是为了确保只遍历对象自己的属性，而不包括原型链上的属性。

### 2. `Object.keys()`

`Object.keys()` 方法会返回一个包含对象自身可枚举属性名称的数组。

```typescript
const obj = { a: 1, b: 2, c: 3 };

const keys = Object.keys(obj);
keys.forEach(key => {
  console.log(key); // 输出 'a', 'b', 'c'
});
```

这种方法不会遍历原型链上的属性。

### 3. `Object.entries()`

`Object.entries()` 方法返回一个给定对象自身可枚举属性的键值对数组。

```typescript
const obj = { a: 1, b: 2, c: 3 };

for (const [key, value] of Object.entries(obj)) {
  console.log(key); // 输出 'a', 'b', 'c'
}
```

类似于 `Object.keys()`，这种方法也不会包括原型链上的属性，并且提供了键和值。

### 4. `Object.getOwnPropertyNames()`

`Object.getOwnPropertyNames()` 方法返回一个数组，包含对象自身的所有属性（不仅仅是可枚举的属性）的名称。

```typescript
const obj = { a: 1, b: 2, c: 3 };

const propertyNames = Object.getOwnPropertyNames(obj);
propertyNames.forEach(name => {
  console.log(name); // 输出 'a', 'b', 'c'
});
```

这个方法可以获得对象所有自有属性的名称，包括不可枚举的属性。

### 例子

假设我们有一个表示用户信息的对象，并想要遍历这个对象的键：

```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: 'Jane Doe',
  email: 'jane.doe@example.com'
};

Object.keys(user).forEach(key => {
  console.log(key); // 输出 'id', 'name', 'email'
});
```

在这个例子中，我们使用了 `Object.keys()` 来遍历用户对象的键，并输出每个键。这种方法是常用且简洁的，适用于当你只需要对象的键时。

在TypeScript中使用这些方法时，也要注意对象的类型。如果对象的类型定义了可选属性或索引签名，那么在遍历时可能需要处理未定义的属性或动态键。

你已经很接近了，你只需要将 替换`=`为`:`. 您可以使用对象类型文字（请参阅规范第 3.5.3 节）或接口。使用对象类型文字与您所拥有的接近：

    var obj: { property: string; } = { property: "foo" };
    

但您也可以使用接口

    interface MyObjLayout {
        property: string;
    }
    
    var obj: MyObjLayout = { property: "foo" };

### 更新 2019-05-15（改进的 Code Pattern 作为替代方案）

经过多年使用`const`功能更多的代码并从中受益后，我建议在大多数情况下不要使用我原来的答案（本节下面的标题，即在构建对象时，强制类型系统进入特定类型而不是让它推断类型通常是表明出现问题）。

相反，我建议`const`尽可能多地使用变量，然后作为最后一步组成对象：

    const id = getId();
    const hasStarted = true;
    ...
    const hasFinished = false;
    ...
    return { hasStarted, hasFinished, id };
    

*   这将正确键入所有内容，而无需显式键入。
*   无需重新输入字段类型。
*   根据我的经验，这会产生最干净的代码。
*   这允许编译器提供更多的状态验证（例如，如果您在多个位置返回，编译器将确保始终返回相同类型的对象 - 这鼓励您在每个位置声明整个返回值 - 给出一个完全清晰的结果）该值的意图）。

### 奖励：可选字段 2022-09-29

    const id = getId();
    const optionalField = getOptionalValue();
    return {
        id,
        // This will always exist as a key in the object but it might be undefined
        optionalField,
        // This will only exist as a key in the object if it has a truthy value
        ...optionalField2 ? { optionalField } : {},
        // This will only exist as a key in the object if it is not null or undefined
        ...optionalField2 != null ? { optionalField } : {},
    };
    

### 添加 2020-02-26

如果您确实需要一个可以延迟初始化的类型：将其标记为可为空的联合类型（null 或 Type）。如果没有首先确保它具有值，类型系统将阻止您使用它。

在 中`tsconfig.json`，确保启用严格的 null 检查：

`"strictNullChecks": true`

然后使用此模式并允许类型系统保护您免受意外的空/未定义访问：

    
    
    const state = {
        instance: null as null | ApiService,
        // OR
        // instance: undefined as undefined | ApiService,
    
    };
    
    const useApi = () => {
        // If I try to use it here, the type system requires a safe way to access it
    
        // Simple lazy-initialization 
        const api = state?.instance ?? (state.instance = new ApiService());
        api.fun();
    
        // Also here are some ways to only access it if it has value:
    
        // The 'right' way: Typescript 3.7 required
        state.instance?.fun();
    
        // Or the old way: If you are stuck before Typescript 3.7
        state.instance && state.instance.fun();
    
        // Or the long winded way because the above just feels weird
        if (state.instance) { state.instance.fun(); }
    
        // Or the I came from C and can't check for nulls like they are booleans way
        if (state.instance != null) { state.instance.fun(); }
    
        // Or the I came from C and can't check for nulls like they are booleans 
        // AND I was told to always use triple === in javascript even with null checks way
        if (state.instance !== null && state.instance !== undefined) { state.instance.fun(); }
    };
    
    class ApiService {
        fun() {
            // Do something useful here
        }
    }
    

* * *

### 99% 的情况下不要执行以下操作：

### 2016-02-10 更新 - 处理 TSX（感谢@Josh）

使用`as`TSX 操作员。

    var obj = {
        property: null as string
    };
    

一个更长的例子：

    var call = {
        hasStarted: null as boolean,
        hasFinished: null as boolean,
        id: null as number,
    };
    

### 原答案

使用强制转换运算符可以使其简洁（通过将 null 强制转换为所需的类型）。

    var obj = {
        property: <string> null
    };
    

一个更长的例子：

    var call = {
        hasStarted: <boolean> null,
        hasFinished: <boolean> null,
        id: <number> null,
    };
    

这比拥有两部分（第一部分声明类型，第二部分声明默认值）要好得多：

    var callVerbose: {
        hasStarted: boolean;
        hasFinished: boolean;
        id: number;
    } = {
        hasStarted: null,
        hasFinished: null,
        id: null,
    };

我很惊讶没有人提到这一点，但您可以创建一个名为 的接口`ObjectLiteral`，它接受`key: value`类型对`string: any`：

    interface ObjectLiteral {
      [key: string]: any;
    }
    

然后你会像这样使用它：

    let data: ObjectLiteral = {
      hello: "world",
      goodbye: 1,
      // ...
    };
    

额外的好处是，您可以根据需要在任意数量的对象上多次重复使用此界面。

祝你好运。

您可以使用预定义的实用程序类型[**`Record<Keys, Type>`**](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)：

    const obj: Record<string, string> = {
      property: "value",
    };
    

它允许为对象文字指定键：

    type Keys = "prop1" | "prop2"
    
    const obj: Record<Keys, string> = {
      prop1: "Hello",
      prop2: "Aloha",
      something: "anything" // TS Error: Type '{ prop1: string; prop2: string; something: string; }' is not assignable to type 'Record<Keys, string>'.
                            //   Object literal may only specify known properties, and 'something' does not exist in type 'Record<Keys, string>'.
    };
    

以及属性值的类型：

    type Keys = "prop1" | "prop2"
    type Value = "Hello" | "Aloha"
    
    const obj1: Record<Keys, Value> = {
      prop1: "Hello",
      prop2: "Hey", // TS Error: Type '"Hey"' is not assignable to type 'Value'.
    };

如果您尝试编写类型注释，语法为：

    var x: { property: string; } = { property: 'hello' };
    

如果您尝试编写对象文字，语法为：

    var x = { property: 'hello' };
    

您的代码尝试在值位置使用类型名称。

Typescript 如何遍历的 object 的 key ？

在TypeScript中，类型检查是自动发生的，并且是语言的核心特性之一。当你定义了一个`interface`，TypeScript会在编译时进行类型检查，以确保你遵守了该接口定义的结构。

举个例子来说，假设我们有以下的`interface`：

```typescript
interface IUser {
  name: string;
  age: number;
  isActive: boolean;
}
```

当你尝试创建一个`IUser`类型的对象时，TypeScript编译器会自动检查这个对象是否匹配`IUser`接口。例如：

```typescript
let user: IUser = {
  name: 'Alice',
  age: 30,
  isActive: true
};
```

在这个例子中，`user`对象遵循了`IUser`的结构，因此它会成功编译。但是，如果你尝试添加一个不在`interface`中的属性，或者遗漏了一个属性，TypeScript编译器会抛出一个错误：

```typescript
let user: IUser = {
  name: 'Bob',
  // 'age' 属性丢失将会导致编译错误
  isActive: true
};
```

会产生类似以下的错误：

```
Property 'age' is missing in type '{ name: string; isActive: boolean; }' but required in type 'IUser'.
```

除此以外，你还可以在函数中使用接口来进行类型检查。例如：

```typescript
function greetUser(user: IUser) {
  console.log(`Hello, ${user.name}!`);
}

greetUser({
  name: 'Charlie',
  age: 25,
  isActive: false
}); // 正确使用

greetUser({
  name: 'Dave'
  // 缺少其他属性将导致错误
});
```

对于函数`greetUser`，调用它时传入的参数需要符合`IUser`接口的结构，否则TypeScript编译器会提示错误。

总的来说，在TypeScript中，`interface`类型检查是静态的，发生在编译时，而不是运行时。编译器会根据你定义的接口来检查代码中的结构和类型，确保类型的正确性和一致性。这个特性在大型项目中特别有用，因为它可以在早期就发现潜在的错误和问题。

You can achieve what you want without the `instanceof` keyword as you can write custom type guards now:

    interface A {
        member: string;
    }
    
    function instanceOfA(object: any): object is A {
        return 'member' in object;
    }
    
    var a: any = {member: "foobar"};
    
    if (instanceOfA(a)) {
        alert(a.member);
    }
    

Lots of Members
===============

If you need to check a lot of members to determine whether an object matches your type, you could instead add a discriminator. The below is the most basic example, and requires you to manage your own discriminators... you'd need to get deeper into the patterns to ensure you avoid duplicate discriminators.

    interface A {
        discriminator: 'I-AM-A';
        member: string;
    }
    
    function instanceOfA(object: any): object is A {
        return object.discriminator === 'I-AM-A';
    }
    
    var a: any = {discriminator: 'I-AM-A', member: "foobar"};
    
    if (instanceOfA(a)) {
        alert(a.member);
    }

In TypeScript 1.6, [user-defined type guard](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates) will do the job.

    interface Foo {
        fooProperty: string;
    }
    
    interface Bar {
        barProperty: string;
    }
    
    function isFoo(object: any): object is Foo {
        return 'fooProperty' in object;
    }
    
    let object: Foo | Bar;
    
    if (isFoo(object)) {
        // `object` has type `Foo`.
        object.fooProperty;
    } else {
        // `object` has type `Bar`.
        object.barProperty;
    }
    

And just as Joe Yang mentioned: since TypeScript 2.0, you can even take the advantage of tagged union type.

    interface Foo {
        type: 'foo';
        fooProperty: string;
    }
    
    interface Bar {
        type: 'bar';
        barProperty: number;
    }
    
    let object: Foo | Bar;
    
    // You will see errors if `strictNullChecks` is enabled.
    if (object.type === 'foo') {
        // object has type `Foo`.
        object.fooProperty;
    } else {
        // object has type `Bar`.
        object.barProperty;
    }
    

And it works with `switch` too.

How about User-Defined Type Guards? [https://www.typescriptlang.org/docs/handbook/advanced-types.html](https://www.typescriptlang.org/docs/handbook/advanced-types.html)

    interface Bird {
        fly();
        layEggs();
    }
    
    interface Fish {
        swim();
        layEggs();
    }
    
    function isFish(pet: Fish | Bird): pet is Fish { //magic happens here
        return (<Fish>pet).swim !== undefined;
    }
    
    // Both calls to 'swim' and 'fly' are now okay.
    
    if (isFish(pet)) {
        pet.swim();
    }
    else {
        pet.fly();
    }

typescript 2.0 introduce tagged union

[Typescript 2.0 features](https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript)

    interface Square {
        kind: "square";
        size: number;
    }
    
    interface Rectangle {
        kind: "rectangle";
        width: number;
        height: number;
    }
    
    interface Circle {
        kind: "circle";
        radius: number;
    }
    
    type Shape = Square | Rectangle | Circle;
    
    function area(s: Shape) {
        // In the following switch statement, the type of s is narrowed in each case clause
        // according to the value of the discriminant property, thus allowing the other properties
        // of that variant to be accessed without a type assertion.
        switch (s.kind) {
            case "square": return s.size * s.size;
            case "rectangle": return s.width * s.height;
            case "circle": return Math.PI * s.radius * s.radius;
        }
    }

Type guards in Typescript:
--------------------------

TS has **type guards** for this purpose. They define it in the following manner:

> Some expression that performs a runtime check that guarantees the type in some scope.

This basically means that the TS compiler can narrow down the type to a more specific type when it has sufficient information. For example:

    function foo (arg: number | string) {
        if (typeof arg === 'number') {
            // fine, type number has toFixed method
            arg.toFixed()
        } else {
            // Property 'toFixed' does not exist on type 'string'. Did you mean 'fixed'?
            arg.toFixed()
            // TSC can infer that the type is string because 
            // the possibility of type number is eliminated at the if statement
        }
    }
    

To come back to your question, we can also apply this concept of type guards to objects in order to determine their type. To define a type guard for objects, we need to define a function whose return type is a **type predicate**. For example:

    interface Dog {
        bark: () => void;
    }
    
    // The function isDog is a user defined type guard
    // the return type: 'pet is Dog' is a type predicate, 
    // it determines whether the object is a Dog
    function isDog(pet: object): pet is Dog {
      return (pet as Dog).bark !== undefined;
    }
    
    const dog: any = {bark: () => {console.log('woof')}};
    
    if (isDog(dog)) {
        // TS now knows that objects within this if statement are always type Dog
        // This is because the type guard isDog narrowed down the type to Dog
        dog.bark();
    }

Typescript 如何检查 interface 类型？

在命令行运行 TypeScript 文件需要几个步骤，我将一步一步详细解释这个过程。

### 第1步：安装Node.js

确保您的计算机上安装了Node.js。Node.js是一个JavaScript运行时，可以让您在服务器端运行JavaScript代码。如果您还没有安装Node.js，请前往官网下载并安装：

[Node.js官网](https://nodejs.org/)

### 第2步：安装TypeScript

通过命令行安装TypeScript编译器。使用npm（Node.js的包管理器）全局安装TypeScript可以使 `ts-node`命令在任何位置都可以使用。

```shell
npm install -g typescript
```

### 第3步：安装ts-node

`ts-node`是一个可以执行TypeScript文件并将它们直接在Node.js环境中运行的工具。它会在后台自动地调用TypeScript编译器将TypeScript代码转换成JavaScript代码，并立即执行转换后的代码。

```shell
npm install -g ts-node
```

### 第4步：编写TypeScript代码

在您喜欢的文本编辑器中创建一个新的TypeScript文件，例如 `example.ts`，并写入TypeScript代码。例如：

```typescript
// example.ts
function greet(person: string) {
  return "Hello, " + person + "!";
}

console.log(greet("world")); // 输出: Hello, world!
```

### 第5步：运行TypeScript文件

打开命令行工具，导航到包含 `example.ts`文件的目录，然后使用以下命令运行它：

```shell
ts-node example.ts
```

### 示例输出：

```plain
Hello, world!
```

`ts-node`会自动编译 `example.ts`文件到JavaScript，并在Node.js环境中执行。

以上就是在命令行中运行TypeScript文件的步骤。


> 我如何使用 Typescript 做同样的事情

您可以`tsc`使用以下命令在监视模式下运行`tsc -w -p .`，它将`.js`以实时方式为您生成文件，因此您可以`node foo.js`像平常一样运行

传输流节点
=====

有 ts-node ： https: [//github.com/TypeStrong/ts-node](https://github.com/TypeStrong/ts-node)它将动态编译代码并通过节点运行它 🌹

    npx ts-node src/foo.ts

运行以下命令并全局安装所需的包：

    npm install -g ts-node typescript '@types/node'
    

现在运行以下命令来执行打字稿文件：

    ts-node typescript-file.ts

我们有以下步骤：

1.  首先你需要安装打字稿
    
        npm install -g typescript
        
    
2.  创建一个文件 helloworld.ts
    
        function hello(person){
           return "Hello, " + person;
        }
        let user = "Aamod Tiwari";
        const result = hello(user);
        console.log("Result", result)
        
    
3.  打开命令提示符并键入以下命令
    
        tsc helloworld.ts
        
    
4.  再次运行命令
    
        node helloworld.js
        
    
5.  结果将显示在控制台上

你也可以试试tsx。tsx 是一个用于无缝运行 TypeScript 的 CLI 命令（替代 Node），它基于 esbuild 构建，因此速度非常快。

[https://github.com/esbuild-kit/tsx](https://github.com/esbuild-kit/tsx)

例子：

    npx tsx ./script.ts

要添加到上面的 @Aamod 答案，如果您想使用一个命令行来编译和运行代码，您可以使用以下命令：

视窗：

    tsc main.ts | node main.js
    

Linux / macOS：

    tsc main.ts && node main.js

如何通过命令行工具运行 TypeScript 文件？

要将 JSON 对象转换为 TypeScript 类，你可以创建一个类，其属性和类型与 JSON 对象的键和值类型相匹配。以下是一个简单的例子，展示了这个过程。

假设我们有如下的 JSON 对象：

```json
{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "isActive": true
}
```

我们可以创建一个 TypeScript 类来表示这个 JSON 对象：

```typescript
class User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;

  constructor(id: number, name: string, email: string, isActive: boolean) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.isActive = isActive;
  }
}
```

为了将 JSON 对象实例化为这个类的实例，我们可以编写一个函数来处理转换：

```typescript
function createUser(json: any): User {
  return new User(json.id, json.name, json.email, json.isActive);
}

// JSON 对象
const json = {
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "isActive": true
};

// 将 JSON 对象转换为 User 类的实例
const user = createUser(json);
```

下面是一些额外的注意事项：

1. **类型校验**: 在实际应用中，你可能需要验证 JSON 对象包含了所有必需的属性，并且它们的类型是正确的。TypeScript 的类型系统在编译时提供了一些帮助，但运行时你可能需要额外的校验。

2. **可选属性**: 如果 JSON 对象中的某些属性可能不存在，你应该在 TypeScript 类中将这些属性标记为可选。例如：

```typescript
class User {
  id: number;
  name: string;
  email: string;
  isActive?: boolean; // 可选属性

  // 如果 isActive 是可选的，构造函数参数也应相应地标记为可选
  constructor(id: number, name: string, email: string, isActive?: boolean) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.isActive = isActive;
  }
}
```

3. **复杂对象**: 如果你的 JSON 对象包含嵌套的对象或数组，你需要确保对应的 TypeScript 类型也反映了这个结构。

4. **自动化**: 如果你经常需要进行这种转换，可以考虑使用一些自动化工具，如 [quicktype](https://quicktype.io/) 或其他在线转换器，它们可以根据 JSON 输入自动生成 TypeScript 类型定义。

您无法将 Ajax 请求中的普通 JavaScript 结果简单地转换为原型 JavaScript/TypeScript 类实例。有多种技术可以实现这一点，并且通常涉及复制数据。除非您创建该类的实例，否则它不会有任何方法或属性。它将仍然是一个简单的 JavaScript 对象。

虽然如果您只处理数据，则可以只转换为接口（因为它纯粹是编译时结构），但这需要您使用 TypeScript 类，该类使用数据实例并使用该数据执行操作。

复制数据的一些示例：

1.  [将 AJAX JSON 对象复制到现有对象中](https://stackoverflow.com/questions/16373422/copying-ajax-json-object-into-existing-object)
2.  [在 JavaScript 中将 JSON 字符串解析为特定的对象原型](https://stackoverflow.com/questions/5873624/parse-json-string-into-a-particular-object-prototype-in-javascript)

本质上，你只需：

    var d = new MyRichObject();
    d.copyInto(jsonResult);

我遇到了同样的问题，我找到了一个可以完成这项工作的库： https: [//github.com/pleerock/class-transformer](https://github.com/pleerock/class-transformer)。

它的工作原理如下：

    let jsonObject = response.json() as Object;
    let fooInstance = plainToClass(Models.Foo, jsonObject);
    return fooInstance;
    

它支持嵌套的孩子，但你必须装饰你的班级成员。

在 TypeScript 中，您可以使用接口和泛型进行[类型断言，如下所示：](https://basarat.gitbook.io/typescript/type-system/type-assertion#type-assertion-vs-casting)

    var json = Utilities.JSONLoader.loadFromFile("../docs/location_map.json");
    var locations: Array<ILocationMap> = JSON.parse(json).location;
    

其中 ILocationMap 描述了数据的形状。此方法的优点是您的 JSON 可以包含更多属性，但形状满足接口的条件。

但是，这不会添加类实例方法。

如果您使用的是 ES6，请尝试以下操作：

    class Client{
      name: string
    
      displayName(){
        console.log(this.name)
      }
    }
    
    service.getClientFromAPI().then(clientData => {
      
      // Here the client data from API only have the "name" field
      // If we want to use the Client class methods on this data object we need to:
      let clientWithType = Object.assign(new Client(), clientData)
    
      clientWithType.displayName()
    })
    

但遗憾的是，此方法**不适用于嵌套对象**。

我发现一篇关于将 JSON 通用转换为 Typescript 类的非常有趣的文章：

[http://cloudmark.github.io/Json-Mapping/](http://cloudmark.github.io/Json-Mapping/)

您最终得到以下代码：

    let example = {
                    "name": "Mark", 
                    "surname": "Galea", 
                    "age": 30, 
                    "address": {
                      "first-line": "Some where", 
                      "second-line": "Over Here",
                      "city": "In This City"
                    }
                  };
    
    MapUtils.deserialize(Person, example);  // custom class

如何将 json 对象强制转换为 typescript 的 interface？

`.dts` 文件，即 TypeScript 声明文件，是一种提供 TypeScript 代码中存在的各类值的类型信息的文件。这些文件通常用于两个主要场景：

1. **与 JavaScript 库的互操作**：当 TypeScript 代码需要与纯 JavaScript 库一起工作时，`.dts` 文件可以提供该 JavaScript 库中函数、对象和类的类型定义。这样，TypeScript 编译器就能理解 JavaScript 库的结构，并且确保 TypeScript 代码以类型安全的方式使用这些库。

2. **模块声明**：在 TypeScript 项目中，如果某个模块不希望暴露它的源代码，但需要让其他 TypeScript 代码理解其公共接口的类型信息，那么就可以使用 `.dts` 文件来声明这些公共接口。

一个简单的例子是，假设有一个简单的 JavaScript 函数库 `math-lib.js`，它提供了一个加法函数：

```javascript
// math-lib.js
function add(a, b) {
  return a + b;
}
module.exports = { add };
```

要在 TypeScript 中使用这个库并享受类型检查的好处，我们需要一个声明文件 `math-lib.d.ts`，如下所示：

```typescript
// math-lib.d.ts
export function add(a: number, b: number): number;
```

有了这个声明文件，TypeScript 代码可以安全地导入和使用 `add` 函数，并且如果尝试传入非数字类型的参数，TypeScript 编译器将会产生错误。

使用声明文件，从而使得 TypeScript 项目能够更加安全地使用外部 JavaScript 代码库，同时也能帮助开发者更好地理解外部代码的类型结构。

“d.ts”文件用于提供有关用 JavaScript 编写的 API 的打字稿类型信息。这个想法是你正在使用像 jQuery 或 underscore 这样的东西，一个现有的 javascript 库。您想从打字稿代码中使用这些内容。

您可以编写仅包含类型注释的 d.ts 文件，而不是在打字稿中重写 jquery 或下划线或其他内容。然后，您可以从 Typescript 代码中获得静态类型检查的 TypeScript 优势，同时仍然使用纯 JS 库。

这要归功于 TypeScript 的限制，即不允许您在语句末尾添加“.ts”扩展名`import`。因此，当您引用某个文件时，比如说，`my-module.js`如果它`my-module.d.ts`旁边有 ，那么 TypeScript 将包含其内容：

    src/
      my-module.js
      my-module.d.ts
      index.ts
    

_我的模块.js_

    const thing = 42;
    
    module.exports = { thing };
    

_我的模块.d.ts_

    export declare const thing: number;
    

_索引.ts_

    import { thing } from "./my-module"; // <- no extension
    
    // runtime implementation of `thing` is taken from ".js"
    console.log(thing); // 42
    
    // type declaration of `thing` is taken from ".d.ts"
    type TypeOfThing = typeof thing; // number

`d`代表[声明文件](https://en.wikipedia.org/wiki/TypeScript#Declaration_files)：

> 当编译 TypeScript 脚本时，可以选择生成一个声明文件（扩展名为 .d.ts），该文件充当已编译 JavaScript 中组件的接口。在此过程中，编译器会剥离所有函数和方法体，仅保留导出类型的签名。当第三方开发人员从 TypeScript 使用 JavaScript 库或模块时，生成的声明文件可用于描述导出的虚拟 TypeScript 类型。
> 
> 声明文件的概念类似于 C/C++ 中的头文件的概念。

    declare module arithmetics {
        add(left: number, right: number): number;
        subtract(left: number, right: number): number;
        multiply(left: number, right: number): number;
        divide(left: number, right: number): number;
    }
    

> 可以为现有 JavaScript 库手动编写类型声明文件，就像为 jQuery 和 Node.js 所做的那样。
> 
> 流行 JavaScript 库的大量声明文件托管在 GitHub 上的[DefinelyTyped](https://github.com/DefinitelyTyped)和[Typings Registry](https://github.com/typings/registry)中。提供了一个名为[Typings](https://github.com/typings/typings)的命令行实用程序来帮助从存储库中搜索和安装声明文件。

我从必须使用`.d.ts`文件煞费苦心地映射 JavaScript 项目中学到了以下内容。

使用`.d.ts`文件映射 JavaScript 要求您的`.d.ts`文件命名与您的文件命名相同`.js`。每个文件都需要与同名文件`.js`保持内联（保存在同一目录中） 。`.d.ts`将需要类型的 JS/TS 代码从`.d.ts`文件指向`.d.ts`文件。

例如：`test.js`和`test.d.ts`位于`testdir/`文件夹中，然后将其导入到反应组件中：

    import * as Test from "./testdir/test";
    

该`.d.ts`文件被导出为命名空间，如下所示：

    export as namespace Test;
        
    export interface TestInterface1{}
    export class TestClass1{}

针对_特定案例的_**工作示例**：

假设您有通过_npm_共享的_my-module_。

你安装它`npm install my-module`

你这样使用它：

    import * as lol from 'my-module';
    
    const a = lol('abc', 'def');
    

该模块的逻辑全部在`index.js`：

    module.exports = function(firstString, secondString) {
    
      // your code
    
      return result
    }
    

要添加类型，请创建一个文件`index.d.ts`：

    declare module 'my-module' {
      export default function anyName(arg1: string, arg2: string): MyResponse;
    }
    
    interface MyResponse {
      something: number;
      anything: number;
    }

就像 @takeshin 所说的 .d 代表打字稿（.ts）的声明文件。

**在继续回答这篇文章之前需要澄清几点 -**

1.  Typescript 是 javascript 的语法超集。
2.  Typescript 不能单独运行，它需要被转译为 javascript（[Typescript 到 javascript 转换](https://storefront-staging.paytm.com/dev1/v2/h/mumbiker-nikhil?merchant_id=43486&aggregator-bid=1707)）
3.  “类型定义”和“类型检查”是 Typescript 通过 JavaScript 提供的主要附加功能。（[检查 type script 和 javascript 之间的区别](https://stackify.com/typescript-vs-javascript-migrate/)）

如果您认为 typescript 只是语法超集，那么它有什么好处 - [https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system](https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system)

**回答这篇文章 -**

正如我们所讨论的，TypeScript 是 javascript 的超集，需要转换为 javascript。因此，如果库或第三方代码是用 typescript 编写的，它最终会转换为可由 javascript 项目使用的 javascript，但反之亦然。

对于前 -

如果你安装了 javascript 库 -

    npm install --save mylib
    

并尝试在打字稿代码中导入它 -

    import * from "mylib";
    

你会得到错误。

> “找不到模块‘mylib’。”

正如@Chris 提到的，许多库（例如 underscore、Jquery）已经用 javascript 编写。我们需要一种替代解决方案，而不是为打字稿项目重写这些库。

为此，您可以在名为 \*.d.ts 的 javascript 库中提供类型声明文件，如上面的情况 mylib.d.ts 所示。声明文件仅提供各自 javascript 文件中定义的函数和变量的类型声明。

现在当你尝试时 -

    import * from "mylib";
    

mylib.d.ts 被导入，充当 javascript 库代码和 typescript 项目之间的接口。

TypeScript 的 `.dts` 文件是定义文件（Definition Files）的缩写。它们用于为已存在的 JavaScript 代码提供类型定义信息。这意味着你可以在 TypeScript 项目中使用纯 JavaScript 写的库或框架，而 `.dts` 文件会告诉 TypeScript 编译器这些库的结构，包括它们的类型、函数、类和其他 API 的签名。

`.dts` 文件的好处是它们允许开发者在不改变原有 JavaScript 代码的情况下，享受到 TypeScript 提供的类型检查和代码自动补全等特性。

例如，如果你在 TypeScript 项目中使用 jQuery，你可以引入 jQuery 的定义文件（通常通过 DefinitelyTyped 社区提供的 `@types/jquery` 包），这样 TypeScript 编译器就能理解 jQuery 的 `$` 函数、jQuery 对象的方法等等。代码示例如下：

```typescript
// 引入 jQuery 的类型定义
/// <reference types="jquery" />

// 使用 jQuery
$('selector').html('Hello, world!');
```

在这个例子中，`$('selector').html('Hello, world!');` 这行代码通过了 TypeScript 编译器的类型检查，因为 `.dts` 文件提供了 `.html()` 方法的类型信息。

定义文件也可以帮助开发者理解第三方库的使用方式，因为它们充当了库的文档。通过查看定义文件，开发者可以了解到某个函数接受哪些参数，这些参数的类型是什么，以及函数返回什么类型的值。这极大地提高了开发效率和代码的安全性。

最后，`.dts` 文件也可以用来定义自己的代码的公共接口，特别是在编写库时，这样使用你库的其他 TypeScript 用户就可以获得类型检查和代码智能提示。

TypeScript相关问题