TypeScript入门👩‍💻

大家好，如果你关注 Web 开发，应该听说过“TypeScript”这个热门术语。我大约一两个月前开始在我的 React 项目中使用 TypeScript，并且非常喜欢它。一开始用 TypeScript 写代码确实有点难，但相信我，一旦你体验过 TypeScript 的强大功能，尤其是代码编辑器里酷炫的“智能感知”功能，你绝对不会想再回到传统的 JavaScript。它真的能让你的 JS 开发工作轻松很多。

它有什么作用？

TypeScript 为 JavaScript 代码提供类型定义，这不仅大大加快了开发过程，还有助于轻松捕获错误。

在项目中配置 TypeScript

要将 TypeScript 添加到您的项目中，请键入以下命令将 TypeScript 安装为开发依赖项。

yarn add typescript -D
或者
npm install typscript --save-dev

现在，我们需要 ts-node。ts-node 是一个 Node.js 包，用于执行 TypeScript 文件或在 REPL 环境中运行 TypeScript。

yarn add ts-node -D
或者
npm install ts-node --save-dev

我们还需要生成一个tsconfig.json包含项目所有 TypeScript 配置的文件。要初始化 tsconfig.json 文件，请键入以下命令。

npx tsc --init

tsconfig.json你会看到在项目的根文件夹中生成了一个类似这样的文件。

创建一个名为 `<filename>` 的文件index.ts，并将以下代码粘贴到该文件中。console.log('Hello world')

现在npx ts-node index.ts在终端中输入命令以获取输出结果。

如果您想将 TypeScript 代码编译为 JavaScript 代码npx tsc index.ts，请键入 `npm run dev`，您将在项目中看到生成了一个 index.js 文件。

TypeScript基础知识

原始数据类型

JavaScript 中有三种基本数据类型，即 `int` number、 ` stringint` 和`int` boolean。要在 TypeScript 中创建带有类型定义的变量，请执行以下操作：

const username: string = "Shaan Alam";
const age: number = 18;
const isAdult: boolean = true;

要为变量指定数据类型，只需在变量名前添加冒号即可。不过，本例中无需这样做，因为 TypeScript 会自动推断其数据类型。

数组

创建数组的方式与创建普通变量的方式相同。只需加上[]数据类型即可。例如，如果要创建一个字符串数组，可以这样做：

const names: string[] = ["Alice", "Bob", "John"];

// Similarly for numbers and booleans
const ages: number[] = [18, 19, 24];
const areAdults: boolean[] = [true, true, true];

需要注意的是，如果您使用string[]数据类型创建了一个数组，则数组中只能包含字符串元素，否则 TypeScript 会抛出错误。

// Not Allowed!! ❌
const names: string[] = ["Alice", "Bob", { name: "John", age: 18 }];

任何

TypeScript 还提供了一种名为 `any` 的数据类型，可以用来防止特定值导致类型检查错误。例如，在前面的例子中，我们可以这样做，TypeScript 就不会显示错误。

// Okay!! ✅
const names: any[] = ["Alice", "Bob", { name: "John", age: 18 }];

但是，不建议使用any数据类型，因为它可能会导致错误。
一个合适的用例any是，当您事先不知道数据类型时，可以使用它any来停止显示错误。

函数

TypeScript 允许你通过键入参数和返回值来定义函数类型。

// Typing parameters
function sumOfNumbers(a: number, b: number) {
  return a + b;
}

// Typing parameters and return value
function sumOfNumbers(a: number, b: number): number {
  return a + b;
}

sum(12, 34); // Okay ✅
sum("190", "234"); // Wrong ❌. TypeScript won't allow this

但是，你并不总是需要显式地指定返回值，TypeScript 足够智能，可以从 return 语句本身推断出返回值。

对象类型

JavaScript 中最常用的数据结构之一是对象。TypeScript 可以帮助你为对象提供类型定义。
如果你创建一个这样的对象，并将鼠标悬停在用户上方，它会显示对象的形状，这是由 TypeScript 自动推断的。

let user = {
  fullName: "Shaan Alam",
  age: 18,
};

您可以像创建普通对象一样，在括号中键入对象，并提供对象属性及其类型。

let user2: { fullName: string, age: number } = {
  fullName: "Shaan Alam",
  age: 18,
};

类型别名

如果想对不同的对象使用相同的类型定义该怎么办？为不同的对象编写定义会非常重复。类型别名可以帮你解决这个问题。
你可以使用类型别名创建并调用自己的类型。

type User = {
  fullName: string;
  age: number;
};

let user3: User = {
  fullName: "Alice",
  age: 20,
};

let user4: User = {
  fullName: "Bob",
  age: 34,
};

let user5: User = {
  fullName: "John",
  age: 35,
};

在这个例子中，User创建了一个类型 ID，并将其用作具有相同数据类型的多个对象的类型定义。

您还可以使用类型别名来为函数指定类型，例如这样。

type Sum = (a: number, b: number) => number;
const sumOfNumbers: Sum = (a, b) => a + b;

接口

接口与类型类似，但也存在一些差异。我们可以用接口重写上面的例子，如下所示。

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

let user3: User = {
  fullName: "Alice",
  age: 20,
};

let user4: User = {
  fullName: "Bob",
  age: 34,
};

let user5: User = {
  fullName: "John",
  age: 35,
};

Note - A good difference between the use case for interface and type aliases can be that you can use interface for typing objects and type aliases for other things!

刚开始学习 TypeScript 可能会比较难，但相信我，之后你会发现它非常值得。以下是一些你可以学习 TypeScript 的资源。