by Preethi Kasireddy

通过Preethi Kasireddy

为什么要在JavaScript中使用静态类型？ (使用Flow进行静态打字的4部分入门) (Why use static types in JavaScript? (A 4-part primer on static typing with Flow))

As a JavaScript developer, you can code all day long without encountering any static types. So why bother learning about them?

作为JavaScript开发人员，您可以整天编写代码，而不会遇到任何静态类型。 那么，为什么还要花时间去了解它们呢？

Well it turns out learning types isn’t just an exercise in mind-expansion. If you’re willing to invest some time in learning about static types’ advantages, disadvantages, and use cases, it could help your programming immensely.

事实证明，学习类型不仅仅是拓展思维能力的一种练习。 如果您愿意花一些时间来学习静态类型的优点，缺点和用例，则可以极大地帮助您的编程。

Interested? Well you’re in luck — that’s what the rest of this four-part series is about.

有兴趣吗 好吧，您很幸运–这就是这个由四个部分组成的系列文章的其余部分。

一，定义 (First, a definition)

The quickest way to understand static types is to contrast them with dynamic types. A language with static types is referred to as a statically-typed language. On the other hand, a language with dynamic types is referred to as a dynamically-typed language.

理解静态类型的最快方法是将它们与动态类型进行对比。 具有静态类型的语言称为静态类型语言 。 另一方面，具有动态类型的语言称为动态类型的语言。

The core difference is that statically-typed languages perform type checking at compile time, while dynamically-typed languages perform type checking at runtime.

核心区别在于， 静态类型的语言在编译时执行类型检查，而动态类型的语言在运行时执行类型检查。

This leaves one more concept for you to tackle: what does “type-checking” mean?

剩下的一个概念供您解决：“ 类型检查”是什么意思？

To explain, let’s look at types in Java versus Javascript.

为了说明，让我们看一下Java与Javascript中的类型。

“Types” refers to the type of data being defined.

“类型”是指要定义的数据的类型。

For example, in Java if you define a boolean as:boolean result = true;

例如，在Java中，如果将boolean定义为： boolean result = true;

This has a correct type, because the boolean annotation matches the value given to result, as opposed to an integer or anything else.

这具有正确的类型，因为boolean注释与给result给出的值匹配，而不是整数或其他任何值。

On the other hand, if you tried to declare:boolean result = 123;

另一方面，如果您尝试声明： boolean result = 123;

…this would fail to compile because it has an incorrect type. It explicitly marks result as a boolean, but then defines it as the integer 123.

…由于类型错误，因此无法编译。 它显式将result标记为boolean ，然后将其定义为整数123 。

JavaScript and other dynamically-typed languages have a different approach, allowing the context to establish what type of data is being defined:

JavaScript和其他动态类型化语言具有不同的方法，允许上下文确定要定义的数据类型：

var result = true;

var result = true;

Long story short: statically-typed languages require you to declare the data types of your constructs before you can use them. Dynamically-typed languages do not. JavaScript implies the data type, while Java states it outright.

长话短说：静态类型的语言要求您先声明构造的数据类型，然后才能使用它们。 动态类型的语言则没有。 JavaScript隐含了数据类型，而Java则将其完全声明。

So as you can see, types allow you to specify program invariants, or the logical assertions and conditions under which the program will execute.

如您所见，类型使您可以指定程序不变式或程序将在其下执行的逻辑断言和条件。

Type-checking verifies and enforces that the type of a construct (constant, boolean, number, variable, array, object) matches an invariant that you’ve specified. You might, for example, specify that “this function always returns a string.” When the program runs, you can safely assume that it will return a string.

类型检查验证并强制执行构造的类型(常量，布尔值，数字，变量，数组，对象)与您指定的不变量匹配。 例如，您可以指定“此函数始终返回字符串”。 程序运行时，可以放心地假设它将返回一个字符串。

The differences between static type checking and dynamic type checking matter most when a type error occurs. In a statically-typed language, type errors occur during the compilation step, that is, at compile time. In dynamically-typed languages, the errors occur only once the program is executed. That is, at runtime.

发生类型错误时，静态类型检查和动态类型检查之间的差异最为重要。 在静态类型的语言中，在编译步骤期间(即在编译时)会发生类型错误。 在动态类型的语言中，仅在执行程序后才发生错误。 也就是说，在运行时 。

This means that a program written in a dynamically-typed language (like JavaScript or Python) can compile even if it contains type errors that would otherwise prevent the script from running properly.

这意味着以动态类型语言(例如JavaScript或Python)编写的程序可以编译，即使该程序包含类型错误也可能导致脚本无法正常运行。

On the other hand, if a program written in a statically-typed language (like Scala or C++) contains type errors, it will fail to compile until the errors have been fixed.

另一方面，如果以静态类型的语言(例如Scala或C ++)编写的程序包含类型错误，则在修复错误之前，它将无法编译。

JavaScript的新时代 (A new era of JavaScript)

Because JavaScript is a dynamically-typed language, you can go about declaring variables, functions, objects and anything without declaring the type.

因为JavaScript是一种动态类型的语言，所以您可以声明变量，函数，对象和其他任何东西而无需声明类型。

Convenient, but not always ideal. Which is why tools like Flow and TypeScript have recently stepped in to give JavaScript developers the *option* to use static types.

方便，但并不总是理想的。 这就是为什么诸如Flow和TypeScript之类的工具最近介入以使JavaScript开发人员可以选择使用静态类型的原因。

Flow is an open-source static type checking library developed and released by Facebook that allows you to incrementally add types to your JavaScript code.

Flow是Facebook开发和发行的开源静态类型检查库，它允许您将类型逐步添加到JavaScript代码中。

TypeScript, on the other hand, is a superset that compiles down to JavaScript — although it feels almost like a new statically-typed language in its own right. That said, it looks and feels very similar to JavaScript and isn’t hard to pick up.

另一方面， TypeScript是可编译为JavaScript的超集，尽管它本身感觉几乎就像是一种新的静态类型化语言。 也就是说，它的外观和感觉与JavaScript非常相似，并且不难掌握。

In either case, when you want to use types, you explicitly tell the tool about which file(s) to type-check. For TypeScript you do this by writing files with the .ts extension instead of .js. For Flow, you include a comment on top of the file with @flow

在任何一种情况下，当您要使用类型时，都可以明确告知工具要检查哪些文件。 对于TypeScript，您可以通过编写扩展名为.ts而不是.js文件来实现。 对于Flow，使用@flow在文件顶部添加@flow

Once you’ve declared that you want to type-check a file, you get to use their respective syntax for defining types. One distinction to make between the two tools is that Flow is a type “checker” and not a compiler. TypeScript, on the other hand, is a compiler.

声明要对文件进行类型检查后，就可以使用它们各自的语法来定义类型。 两种工具之间的区别是Flow是类型“检查器”而不是编译器。 另一方面，TypeScript是编译器。

I truly believe that tools like Flow and TypeScript present a generational shift and advancement for JavaScript.

我真的相信，诸如Flow和TypeScript之类的工具将为JavaScript带来代代相传的进步 。

Personally, I’ve learned so much by using types in my day-to-day. Which is why I hope you’ll join me on this short and sweet journey into static types.

就个人而言，我通过每天使用类型学到了很多东西。 这就是为什么我希望您能和我一起经历短暂而愉快的静态类型之旅。

The rest of this 4-part post will cover:

此4部分帖子的其余部分将涉及：

Part I. A quick intro to the Flow syntax and language

第一部分： Flow语法和语言快速入门

Parts II & III. Advantages & Disadvantages of static types (with detailed walk-through examples)

第二部分和第三部分。 静态类型的优缺点(详细的演练示例)

Part IV. Should you use static types in JavaScript or not?

第四部分 您是否应该在JavaScript中使用静态类型？

Note that I chose Flow over TypeScript in the examples in this post because of my familiarity with it. For your own purposes, please do research and pick the right tool for you. TypeScript is also fantastic.

请注意，由于对本文的熟悉，我在本文的示例中选择了Flow over TypeScript。 为了您自己的目的，请进行研究并选择适合您的工具。 TypeScript也很棒。

Without further ado, let’s begin!

事不宜迟，让我们开始吧！

第1部分：Flow语法和语言快速入门 (Part 1: A quick intro to Flow syntax and language)

To understand the advantages and disadvantages of static types, you should first get a basic understanding of the syntax for static types using Flow. If you’ve never worked in a statically-typed language before, the syntax might take a little while to get used to.

要了解静态类型的优缺点，首先应该使用Flow基本了解静态类型的语法。 如果您以前从未使用过静态类型的语言，则语法可能需要一些时间才能习惯。

Let’s begin by exploring how to add types to JavaScript primitives, as well as constructs like Arrays, Object, Functions, and etc.

让我们开始探讨如何向JavaScript原语以及类型(如数组，对象，函数等)添加类型。

布尔值 (boolean)

This describes a boolean (true or false) value in JavaScript.

这描述了JavaScript中的boolean (正确或错误)。

Notice that when you want to specify a type, the syntax you use is:

请注意，当您要指定类型时，使用的语法是：

数 (number)

This describes an IEEE 754 floating point number. Unlike many other programming languages, JavaScript doesn’t define different types of numbers (like integers, short, long, and floating points). Instead, numbers are always stored as double precision floating point numbers. Hence, you only need one number type to define any number.

这描述了IEEE 754浮点数。 与许多其他编程语言不同，JavaScript不会定义不同类型的数字(例如整数，短整数，长整数和浮点数)。 而是始终将数字存储为双精度浮点数。 因此，您只需要一种数字类型即可定义任何数字。

number includes Infinity and NaN.

number包括Infinity和NaN 。

串 (string)

This describes a string.

这描述了一个字符串。

空值 (null)

This describes the null data type in JavaScript.

这描述了JavaScript中的null数据类型。

虚空 (void)

This describes the undefined data type in JavaScript.

这描述了JavaScript中undefined数据类型。

Note that null and undefined are treated differently. If you tried to do:

请注意，对null和undefined的处理方式有所不同。 如果您尝试这样做：

Flow would throw an error because the type void is supposed to be of type undefined which is not the same as the type null.

Flow将引发错误，因为void类型应该是undefined类型，与null类型不同。

数组 (Array)

Describes a JavaScript array. You use the syntax Array<;T> to describe an array whose elements are of some type T.

描述一个JavaScript数组。 您使用语法Array< ; T>来描述一个数组，其元素是 类型T。

Notice how I replaced T with string, which means I’m declaring messages as an array of strings.

请注意，我是如何用string替换T ，这意味着我将messages声明为字符串数组。

目的 (Object)

This describes a JavaScript object. There are a few different ways to add types to objects.

这描述了一个JavaScript对象。 有几种不同的方法可以向对象添加类型。

You could add types to describe the shape of an object:

您可以添加类型来描述对象的形状：

You could define objects as maps where you map a string to some value:

您可以将对象定义为将字符串映射到某个值的映射：

You could also define an object as an Object type:

您还可以将对象定义为Object类型：

This last approach lets us set any key and value on your object without restriction, so it doesn’t really add much value as far as type-checking is concerned.

这最后一种方法使我们可以不受限制地在您的对象上设置任何键和值，因此就类型检查而言，它实际上并没有增加太多的值。

任何 (any)

This can represent literally any type. The any type is effectively unchecked, so you should try to avoid using it unless absolutely necessary (like when you need to opt out of type checking or need an escape hatch).

这实际上可以表示任何类型。 any类型实际上是未经检查的，因此除非绝对必要，否则您应尝试避免使用它(例如，当您需要选择退出类型检查或需要进行转义填充时)。

One situation you might find any useful for is when using an external library that extends another system’s prototypes (like Object.prototype).

你可能会发现一个情况any使用扩展另一个系统的原型(比如Object.prototype中)的外部库时有用的。

For example, if you are using a library that extends Object.prototype with a doSomething property:

例如，如果您使用通过doSomething属性扩展Object.prototype的库：

You may get an error:

您可能会得到一个错误：

To circumvent this, you can use any:

为了避免这种情况，您可以使用以下any ：

功能 (Functions)

The most common way to add types to functions is to add types to it’s input arguments and (when relevant) the return value:

向函数添加类型的最常见方法是向其输入参数和返回值(在相关时)添加类型：

You can even add types to async functions (see below) and generators:

您甚至可以将类型添加到异步函数(参见下文)和生成器中：

Notice how our second parameter getPurchaseLimit is annotated as a function that returns a Promise. And amountExceedsPurchaseLimit is annotated as also returning a Promise.

请注意，第二个参数getPurchaseLimit如何被注释为返回Promise的函数。 并且amountExceedsPurchaseLimit被注释为还返回Promise 。

输入别名 (Type alias)

Type aliasing is one of my favorite ways to use static types. They allow you to use existing types (number, string, etc.) to compose new types:

类型别名是我最喜欢的使用静态类型的方法之一。 它们允许您使用现有类型(数字，字符串等)来编写新类型：

Above, I created a new type called PaymentMethod which has properties that are comprised of number and string types.

上面，我创建了一个名为PaymentMethod的新类型，它具有由number和string类型组成的属性。

Now if you want to use the PaymentMethod type, you can do:

现在，如果要使用PaymentMethod类型，则可以执行以下操作：

You can also create type aliases for any primitive by wrapping the underlying type inside another type. For example, if you want to type alias a Name and EmailAddress:

您还可以通过将基础类型包装在另一个类型中来为任何基元创建类型别名。 例如，如果您要输入别名Name和EmailAddress ：

By doing this, you’re indicating that Name and Email are distinct things, not just strings. Since a name and email aren’t really interchangeable, doing this prevents you from accidentally mixing them up.

通过这样做，您表示“ Name和“ Email是不同的东西，而不仅仅是字符串。 由于名称和电子邮件实际上并不能互换，因此可以防止您不小心混淆它们。

泛型 (Generics)

Generics are a way to abstract over the types themselves. What does this mean?

泛型是一种抽象类型本身的方法。 这是什么意思？

Let’s take a look:

让我们来看看：

I created an abstraction for the type T. Now you can use whatever type you want to represent T. For numberT, T was of type number. Meanwhile, for arrayT, T was of type Array<number>.

我为类型T创建了一个抽象。 现在，您可以使用任何想要表示T类型。 对于numberT ， T为number类型。 同时，对于arrayT ，T的类型为Array<numb arrayT >。

Yes, I know. It’s dizzying stuff if this is the first time you’re looking at types. I promise the “gentle” intro is almost over!

是的我知道。 如果这是您第一次查看类型，那真是令人头晕的东西。 我保证“温柔”的介绍已经结束！

也许 (Maybe)

Maybe type allows us to type annotate a potentially null or undefined value. They have the type T|void|null for some type T, meaning it is either type T or it is undefined or null. To define a maybe type, you put a question mark in front of the type definition:

也许type允许我们键入可能为null或undefined值的注释。 对于某些类型T ，它们具有类型T|void|null ，这意味着它是类型T或undefined或为null 。 要定义一个maybe类型，可以在类型定义的前面加一个问号：

Here I’m saying that message is either a string, or it’s null or undefined.

在这里，我说的是消息是string ，或者为null或undefined 。

You can also use maybe to indicate that an object property will be either of some type T or undefined:

您还可以使用也许表明对象属性将是T类型或undefined类型：

By putting the ? next to the property name for middleInitial, you can indicate that this field is optional.

通过放置? 在middleInitial的属性名称middleInitial ，可以指示该字段是可选的。

不相交的工会 (Disjoint unions)

This is another powerful way to model data. Disjoint unions are useful when you have a program that needs to deal with different kinds of data all at once. In other words, the shape of the data can be different based on the situation.

这是另一种强大的数据建模方法。 当您有一个需要同时处理各种数据的程序时，不相干联合很有用。 换句话说，数据的形状可以根据情况而不同。

Extending on the PaymentMethod type from our earlier generics example, let’s say that you have an app where users can have one of three types of payment methods. In this case, you can do something like:

PaymentMethod我们从前面的通用示例扩展了PaymentMethod类型，那么您有一个应用程序，用户可以在其中使用三种付款方式之一。 在这种情况下，您可以执行以下操作：

Then you can define your PaymentMethod type as a disjoint union with three cases.

然后，您可以将您的PaymentMethod类型定义为三种情况的不相交联合。

Payment method now can only ever be one of these three shapes. The property type is the property that makes the union type “disjoint”.

现在，付款方式只能是这三种形状之一。 属性type是使联合类型“不相交”的属性。

You’ll see more practical examples of disjoint union types later in part II.

在第二部分的后面，您将看到不连续联合类型的更多实际示例。

All right, almost done. There are a couple other features of Flow worth mentioning before concluding this intro:

好吧，快完成了。 在结束本简介之前，还需要提及Flow的其他几个功能：

1) Type inference: Flow uses type inference where possible. Type inference kicks in when the type checker can automatically deduce the data type of an expression. This helps avoid excessive annotation.

1)类型推断 ：流尽可能使用类型推断。 当类型检查器可以自动推断表达式的数据类型时，类型推断就开始了。 这有助于避免过多的注释。

For example, you can write:

例如，您可以编写：

Even though this Class doesn’t have types, Flow can adequately type check it:

即使此类没有类型，Flow也可以进行适当的类型检查：

Here I’ve tried to define area as a string, but in the Rectangle class definition we defined width and height as numbers. So based on the function definition for area, it must be return a number. Even though I didn’t explicitly define types for the area function, Flow caught the error.

在这里，我尝试将area定义为string ，但是在Rectangle类定义中，我们将width和height定义为数字。 因此，根据area的功能定义，必须返回一个number 。 即使我没有为area函数明确定义类型，Flow仍然捕获了错误。

One thing to note is that the Flow maintainers recommend that if you were exporting this class definition, you’d want to add explicit type definitions to make it easier to find the cause of errors when the class is not used in a local context.

需要注意的一件事是，Flow维护人员建议，如果您正在导出此类定义，则希望添加显式类型定义，以使当不在本地上下文中使用该类时更容易找到错误原因。

2) Dynamic type tests: What this basically means is that Flow has logic to determine what the the type of a value will be at runtime and so is able to use that knowledge when performing static analysis. They become useful in situations like when Flow throws an error but you need to convince flow that what you’re doing is right.

2)动态类型测试 ：这基本上意味着Flow具有逻辑来确定运行时值的类型，因此能够在执行静态分析时使用该知识。 它们在诸如Flow抛出错误但您需要使Flow确信所做的事情是正确的情况下很有用。

I won’t go into too much detail because it’s more of an advanced feature that I hope to write about separately, but if you want to learn more, it’s worth reading through the docs.

我不会赘述太多，因为它是我希望单独编写的一项高级功能，但是如果您想了解更多信息，则值得阅读这些文档 。

我们已经完成了语法 (We’re done with syntax)

We covered a lot of ground in one section! I hope this high-level overview has been helpful and manageable. If you’re curious to go deeper, I encourage you to dive into the well-written docs and explore.

我们在一个部分中介绍了很多内容！ 我希望此概述对您有所帮助且易于管理。 如果您想进一步了解，建议您深入研究编写良好的文档并进行探索。

With syntax out of the way, let’s finally get to the fun part: exploring the advantages and disadvantages of using types!

不用担心语法，让我们最后进入有趣的部分： 探索使用类型的优缺点 ！

Next up: Part 2 & 3.

接下来： 第2和3部分 。

翻译自: https://www.freecodecamp.org/news/why-use-static-types-in-javascript-part-1-8382da1e0adb/