您可能缺少对Typescript的介绍

照片来自Amar Yashlaha的Unsplash

去年我写了一篇关于Angular的帖子，我认为这对新角落非常有帮助。我想为新手到达Typescript做同样的事情。

什么是打字稿？

Typescript是由Microsoft开发和维护的开源编程语言。它是JavaScript的严格超集，为其添加了可选的静态类型。它在大约7年前于2012年10月1日首次推出，现在是版本3.6，经过多次发布。由于Typescript不遵循语义版本，因此每个版本都引入了新功能和一些重大更改。直到今年，发布周期是每两个月一个新版本，但他们已经转移到3个月的发布周期，以提高每个版本的稳定性。它是用TS开发的，并使用TSC编译为JS，这意味着它自己编译。

在早期版本中，Typescript引入了不稳定的JS概念，例如类，模块等。这些概念导致人们误以为微软试图创建一种新的脚本语言来取代JavaScript，而不是一种改进JavaScript本身的语言。在较新的版本中，Typescript采用了较新版本的ECMAScript的新功能，并且还改进了与普通JavaScript文件的集成。

Typescript是JavaScript的超集是什么意思？

简而言之，每个JavaScript源文件都应该正常工作。但是，情况并非总是如此。为了使其成立，您应该禁用Typescript strict 类型检查，自版本2.3引入以来默认启用。但是，那么你不会利用类型检查。如果您尝试使用Typescript编译器编译任何JS源文件，只需更改扩展名 .js 至 .ts 你可能会发现一些抱怨 tsc。

介绍Typescript编译器（tsc）并输入注释

我们将看到一个例子。首先，我们要安装 typescript。您可以在全局安装它，但是对于此示例，我将创建一个npm项目。确保您使用的是最新的Node LTS。

1. $mkdir ts-example

2. $npm init -y

3. $npm i typescript

4. $touch fibonacci.ts //这很有趣，因为我在Windows上，这不起作用。

5. 我们粘贴代码：

   function fibonacci(num, memo) {      memo = memo || {};       if (memo(num)) return memo(num);      if (num <= 1) return 1;       return (memo(num) = fibonacci(num - 1, memo) + fibonacci(num - 2, memo));    } 

1. $npx tsc

2. 在控制台中查看这些错误：

   fibonacci.ts:1:10 - error TS7023: 'fibonacci' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.                ~~~~~~~~~     fibonacci.ts:1:20 - error TS7006: Parameter 'num' implicitly has an 'any' type.     1 function fibonacci(num, memo) {                         ~~~     fibonacci.ts:1:25 - error TS7006: Parameter 'memo' implicitly has an 'any' type.     1 function fibonacci(num, memo) {                              ~~~~ 

1. 或者，如果您使用的是编辑器：

   function fibonacci(num, memo) {             ~~~~~~1   ~~2  ~~3      memo = memo || {};       if (memo(num)) return memo(num);      if (num <= 1) return 1;       return (memo(num) = fibonacci(num - 1, memo) + fibonacci(num - 2, memo));    } 

这是一个有效的JS函数。 Fibonacci函数，用于存储备忘录中先前调用的结果 object 然后在递归调用中再次返回，直到它结束。（1）虽然Typescript报告3个错误，但它们都可能是相同的，但我们将单独检查它们：

1. 'fibonacci' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
2. Parameter 'num' implicitly has an 'any' type.
3. Parameter 'memo' implicitly has an 'any' type.

这意味着什么？你可能会问。好吧，这是打字稿告诉你，它无法做它应该做的事情，键入。它没有关于什么的信息 fibonacci 返回类型是，参数不应该是什么。但是，我们可以解决这个问题，因为我们知道这些信息，我们可以提供TS。

1. fibonacci 函数应该返回一个数字。
2. num 参数应该是一个数字。
3. memo 参数应该是一个对象。

现在我们使用Typescript类型注释来提供那些信息 tsc。在Typescript中输入注释是在使用冒号后跟类型声明变量之后开始的描述。对于函数和方法，该描述适用于返回类型而不是函数本身。

  var a: number;   // "var a" is the regular JS variable declaration, and ": number" is the type annotation.   function a(): string {/* */}   // "function a() {}" is the regular JS function declaration, and ": string" is the return type annotation. 

因此，我们将此用于我们的Fibonacci示例并运行 tsc 再次命令，或者如果我们在编辑器中：

function fibonacci(num: number, memo: object): number {   memo = memo || {};    if (memo(num)) return memo(num);       ~~~1              ~~~2   if (num <= 1) return 1;    return (memo(num) = fibonacci(num - 1, memo) + fibonacci(num - 2, memo));           ~~~3 } 

现在我们有第二个错误。这通常是人们开始抱怨的时候。

• 你知道吗？ F * ck吧这不是我的错，Typescript不理解这个简单的代码。好吧……也许吧，但你是否更好地理解了有或没有注释的功能？使用类型注释，您可以直接读取所需的类型以及如何使用它。
• 我可以用JSDocs注释我的代码。是的，你可以，但没有任何东西可以检查你的代码，但也许是Typescript编译器本身，稍后会更多，如果你已经打算使用 tsc 为什么不写 ts 文件？

介绍接口，类型和类型别名

回到错误，我们可以注意到它实际上是同一个错误： Element implicitly has an 'any' type because the expression of type 'number' can't be used to index type '{}'. No index signature with a parameter of type 'number' was found on type '{}'. 这可能不是问题的最佳描述，但你可能会阅读很多东西。 tsc 抱怨 memo 拥有 object 类型。在 strict mode，object type等于空对象（{}），并且访问未在变量类型中声明的属性会将该属性标记为任何属性，因为Typescript不知道它正在键入，但它可以假设它确实以某种方式存在，但不是 strict mode。因为我们在 strict mode 打字稿告诉我们：嘿，你正试图访问我不知道的属性，我可以像任何一样给你，但你也不想要。因此，我需要您提供有关您尝试获取的此属性的正确输入信息。

我们将使用类型别名来解决这个问题。 Typescript有3种获取类型信息的方法：

• 一个JS class 具有类型信息，也是可用于应用程序的有效构造函数。你可以扩展，并在其他类中实现类，注意你可以实现许多类，但只能扩展一个。

• 一个 interface。这是一个TS功能，允许您声明对象的形状。这在运行时不存在，因此您无法调用它或将其指定为 class不用担心，如果你试图这样做，TS会抱怨。您可以在接口声明中扩展类和其他接口。您可以在a中实现许多接口 class。

• 一种 type。这是另一个TS功能，允许您声明对象的形状。这在运行时也不存在，但你无法扩展它，只有在实现时才能实现它 type 有静默知道的成员。有了 type 您可以使用类型修饰符，映射器，条件和其他复杂的类型结构，如类型别名。

因此，类型别名是 type 这有助于我们更好地表达复杂物体的形状。有多复杂 memo？你可能会问。当你不知道它所拥有的所有属性时，表达一个对象实际上有点复杂。的属性 memo 在运行时计算，它们不是静态知道的。 Typescript有几个内置的官方助手，但由于某些原因，未在官方文档中列出。其中一些别名是： NonNullable， ReturnType， InstanceType， Readonly 和 Record。最后一个是我们将用来解决问题的方法：

function fibonacci(num: number, memo: Record<number, number>): number {   memo = memo || {};    if (memo(num)) return memo(num);   if (num <= 1) return 1;    return (memo(num) = fibonacci(num - 1, memo) + fibonacci(num - 2, memo)); } 

同 Record 我们正在告诉打字稿 memo 是一个对象 number 签名和 number 属性。它检查它，现在一切似乎都没问题。

编译

我们知道 tsc 命令（或不），但它只是从Typescript编译（技术上转换）到vanilla JavaScript，同时检查所有类型都是正确的。默认， tsc 将输出 .js 文件无论类型是否正确。如果你查看输出它看起来更像我们的例子的第一个版本，那没关系。那是因为没有设备可以运行TS源代码，而是JS，所以TS所做的就是删除所有注释并留下一个干净的JS文件。

的力量 tsc 在它的配置文件中， tsconfig.json 及其编译器选项。有了它，您可以启用或禁用强大的功能，例如不发出错误或允许编译JS文件。

期待

正如我之前所说，TS移动速度非常快，引入了新的ES功能，如可选链接和Nullish Coalescing，以及新的TS功能，如递归类型引用和断言签名，所有这些都将在11月初推出的下一个TS 3.7中出现。通常，使用TS（作为Angular或React）的框架不能那么快，因此它们经常在发布后的几个月内为新版本的TS提供支持。但是，它并不会阻止您使用Playground中的新功能。

此外，您可以使用JSDocs在JS文件中提供类型注释，然后使用TS驱动的编辑器作为VS代码，以在常规JS文件中使用TS的所有检查和功能。

这就是所有人

像往常一样，感谢阅读。希望这个对你有帮助。你和TS一起工作过吗？它是什么样的？我在这里错过了什么吗？期待在评论中阅读你

（1）：为了记录，我从这里获得了这个功能：https://medium.com/developers-writing/fibonacci-sequence-algorithm-in-javascript-b253dc7e320e。我不经许可，我希望作者不要生气。感谢您分享这个。 ?。我接受它是因为Fibonacci函数看起来很简单，但是我们已经看到它们的类型很复杂。

PS：我不知道它为什么会显示这样的代码片段。抱歉。 🙁