TypeScript 真的太火了。从 2014 - 2019，TypeScript 一直是增长最快的语言之一。随着越来越多的项目和大佬使用并安利了它，TS 的热度和应用甚至超过了 JS 本身……如果你是一名前端开发，还没有学习过 TypeScript ，那 2020 年就有新的目标了。TypeScript 和 JavaScript 是目前最流行的两种脚本语言，如果只会一个，那你可能直接就丢失了一半的工作机会了。幸运的是，如果你已经掌握了 JS，过渡到 TS 会很容易。TS 并非一门全新的语言，而是 JS 的超集，它可以使用 JavaScript 中的所有代码和编码概念，可以说是为了让 JavaScript 开发变得更容易而生的。下面就是一份快速过渡指南：

---

TypeScript 是一种越来越流行和需要的语言。它建立在 JavaScript 之上，为 JavaScript 添加了功能，可以帮助我们编写有更少错误且易于维护的代码。如今的 Web 应用正变得越来越复杂，为了应对这种不断增加的复杂，JavaScript 需要升级。在对 JS 升级的尝试中，TypeScript 成为了不可否认的赢家。TypeScript 是 JavaScript 的超集，这意味着它是功能强化版的 JavaScript。根据定义，所有现有的 JavaScript 代码也是 TypeScript 代码。

设置 TypeScript

Web 浏览器和 NodeJS 不理解 TypeScript 代码，所以首先，你必须将其编译为 JavaScript 代码。执行此编译过程的 TypeScript 编译器称为 tsc。让我们看看如何使用它。

作为 npm 项目的一部分

我们可以像这样在本地将 TypeScript 添加到 npm 项目中：

mkdir test-appcd test-appnpm init -ynpm install --save-dev typescriptnpx tsc --init

执行  tsc --init后，将生成一个名为 tsconfig.json 的文件，并放置在项目的根目录中。该文件包含 TypeScript 编译器(tsc)的设置和选项。理想情况下，我们将 TypeScript 文件保存在一个目录中，并且所有生成的 JavaScript 文件都进入其自己的目录中。让我们为 TS 文件创建一个 src目录，为 JS 文件创建dist 目录。

mkdir src dist

通过编辑 tsconfig.json 文件中的两个字段，我们可以告诉 tsc 在哪里找到我们的 TS 文件，以及在哪里放置我们的 JS 文件：在代码编辑器中打开项目，然后进行上述更改。最后，我们可以在 package.json 文件中添加一个 “build：dev” 脚本：保存更改后，编译器会在监视模式下运行并重新编译代码。我还设置了让它保留控制台输出，这是个人偏好你也可以删除。还添加了一个启动脚本，让我们运行快速测试。在src目录内创建一个名为 index.ts 的文件：

touch src / index.tsecho“ console.log('hello');” > src / index.ts

编译代码并运行它：

npm run build：dev(在单独的终端窗口或选项卡中) npm start

我们将在test-app稍后返回。现在，通过按Ctrl C终端杀死进程。

作为 React 项目的一部分

我们可以使用 create-react-app(CRA)工具创建一个使用 TypeScript 配置的新 React 项目：

npx create-react-app my-app --template typescript(OR) yarn create react-app my-app --template typescript

一切都已经由 CRA 设置。我们可以像普通的 React 项目一样运行项目：yarn start或npm start。不需要特殊的配置，例如编辑 tsconfig.json 文件。

Types

在 JavaScript 中，变量的类型是在代码执行期间动态确定的，该阶段称为运行时。常见类型的实例是number，string，和boolean。变量的类型可能会在应用程序运行过程中发生变化，从而导致意外错误：JavaScript 是一种弱类型语言。相比之下，TypeScript 是强类型的，这意味着变量的类型在运行时不能更改：TypeScript 为应用程序引入了编译阶段。在此阶段，编译器将查找并识别类型不匹配和错误。此过程称为静态类型检查。现代 Web 应用程序庞大而复杂，包含许多活动。靠人力去确保我们的 JavaScript 代码中保持类型一致是不可能的。幸运的是，TypeScript 可以为我们完成这项工作。

判断变量的类型

在上一个示例中，尽管我们没有明确指明 balance 这个变量的类型，但是 TypeScript 能够推断出它。我们可以通过在变量名称后指定类型来明确显示：在JavaScript 的基本元素有：boolean，number，string，undefined，null，数组。TypeScript 中有一个特殊类型称为any。any顾名思义，声明为 type 的变量可以是任何类型，并且基本上是普通的 JavaScript 变量。any应尽可能避免；否则，我们做的还是编写弱类型的 JavaScript 代码。

元组

TypeScript 引入的新类型称为元组。元组的一个示例是三维空间中的坐标：(x，y，z)。我们可以创建一个元组来表示服务器的响应：元组具有固定数量的元素，我们可以为每个元素指定不同的类型。元组是许多现代编程语言(例如 Python，Go 和 Elixir)中的常见功能。

枚举

枚举是具有自动生成的数值的常量列表：枚举是创建常量的便捷方法。除非另有说明，否则第一个常量从 0 开始，并且每个后续常量的值都比前一个常量大。枚举已经在许多语言(例如 Java 和 C＃)中可用，并且是字符串常量的更好替代，因为它们的运算速度要快得多。

指定多种类型

可以指定一个变量具有多种类型：这是通过使用 Union 类型实现的，其形式为：type_1 | type_2 | … | type_n。使用 Union 类型需要谨慎，因为基本上会恢复为弱类型。

除了基本类型……

除了基本类型，我们还有所谓的引用类型：array，function，和object。

对象和接口

要声明对象的类型，我们使用一种称为接口的 TypeScript 功能。在 TypeScript 中，接口描述对象的属性。让我们创建其中两个：TypeScript 使用 duck typing (动态类型的一种风格)来确定对象是否具有兼容类型。我们看到pets数组能够接受Person对象，在这种情况下为friend。虽然friend是Person类型的对象，它也被视为Pet的对象，因为Person和Pet具有相同的属性。用英语有一个表达：如果它看起来像鸭子，像鸭子一样游泳，而像鸭子一样嘎嘎，那么它很可能就是鸭子。这是鸭子类型一名的来源。类TypeScript 的类与 JavaScript 类差不多，但支持更多功能。类，像接口一样，也可以用于定义对象的属性。这是一个典型的类定义：我们在类中定义了许多函数。当函数是类定义的一部分时，它称为方法。我们稍微讨论一下声明函数和方法的类型。我们看到了一些被标记为private，或者public,还有一个是protected。这些被称为可见标志符，其目的是限制对属性和方法的访问。它们是面向对象设计的重要组成部分。

功能(和方法)

如上例所示，我们不仅可以为函数的参数定义类型，还可以为其返回类型定义类型。看下面的例子：TypeScript 也有一个void类型。如果一个函数没有返回值，我们可以将其标记为 返回 void。这在 C，C ++ 和 Java 等语言中很常见。

指定未知类型

如果我们提前知道变量可能是哪些类型，则可以使用联合类型，但如果不知道该怎么办？TypeScript 还从其他语言中借用了一种称为泛型的功能。泛型让我们指定一个可变的类型。让我们创建两个堆栈类。堆栈是后进先出(LIFO)数据结构：我们的第一个堆栈仅限于处理数字。如果我们需要一堆字符串，则必须复制堆栈并将每个实例更改number为string。幸运的是，有更好的方法。我们的第二个堆栈使用一个名为的T可变类型参数，可以根据需要指定该参数：泛型参数通常用T做约定命名。在 TypeScript 编程中，K并且V也很常见。

含泛型的数组

还有另一种使用泛型创建数组的方法。如图，我们修改了 stack 类的版本，简单重命名为  Stack：这种形式经常发生，你肯定会遇到它。

声明类型的另一种方法

实际上，我们可以使用type关键字来声明新类型：第一个函数getPatient1很难读取，因为它的返回类型是一个对象，我们可以优化代码。type 关键字可用于将接口连接在一起，并创建所谓的联合类型：

进一步阅读

TypeScript 具有更多功能，您可以通过浏览官方文档来了解，比如命名空间，装饰器或抽象类等。官方文档还提供了多种声明类型的详尽方法和列表。TypeScript 中的类系统比 JavaScript 中的类系统强大得多。用 TypeScript 编写复杂的面向对象的代码要容易得多。翻译：实验楼作者：Richard Prasad链接：https://medium.com/better-programming/going-from-javascript-to-typescript-dde6d016917e?实验楼推出了一门 TypeScript 课程，通过 TypeScript + React ，带你从 0 开始一步一步地开发一个前端组件，在这里为大家推荐一下。

你将学到的：

•  前沿的前端开发方式

•  TypeScript 开发 React 项目

•  前端组件的单元测试

•  React Hooks 的使用

•  复杂的组件化开发

•  webpack 项目打包配置

课程详细讲解了使用 TypeScript + React Hooks 开发一个复杂的 DatePicker 组件，共分为 8 个章节。

React Hook 是今后 React 团队主推的编程方式，组件开发更加函数式，逻辑复用更加的简单。通过这个课程，你可以学习到复杂的组件是如何开发的，也可以了解清楚 DatePicker 的实现原理。相信通过这样一个结合学习，你的前端技术可以得到一个系统提升。

本课程 8 折优惠 中，点击