无比打字与拼英打字

什么是打字稿？(What is typescript?)

The short answer is, typescript is a strong type language that is built on javascript. When writing typescript, it feels like writing 90% javascript, plus 10% extra. This 10% extra, as suggested by the name “Typescript”, is the type part.

简短的答案是，打字稿是一种基于javascript的强类型语言。 编写打字稿时，感觉就像写了90％的javascript，外加10％的额外费用。 正如名称“ Typescript”所建议的那样，这10％的额外费用就是字体部分。

Have you ever run into problems like this:

您是否遇到过以下问题：

const add = (num1, num2) => {console.log(num1 + num2)}

Both num1 and num2 are the user input from the website. When the user puts 12 and 13, for example, you expect the return of the add function is 25. However, you may get 1213, because by default javascript reads user input as a string, not a number. So what actually happened behind the scene when the user put 12 and 13, is

num1和num2都是网站上的用户输入。 例如，当用户输入12和13时，您期望add函数的返回值为25。但是，您可能会得到1213，因为默认情况下javascript会将用户输入读取为字符串，而不是数字。 因此，当用户放置12和13时，幕后发生的实际情况是

"12" + "13" = "1213"

Two strings are concatenated into a longer string rather than adding the two numbers together.

将两个字符串连接成一个更长的字符串，而不是将两个数字加在一起。

Then will typescript fix this, you may ask. The answer is actually no. Typescript won’t fix this for you and return you 25 instead of “1213”. What typescript can do is throwing an error at you before you compile and see “1213” on your screen. The error reads like this, “The arguments function ‘add’ takes should be 2 numbers, but what it actually gets are 2 strings. This is an error.” The number and string, along with many other types, are the 10% extra on top of normal javascript.

然后您可能会问打字稿解决此问题。 答案实际上是否定的。 Typescript不会为您解决此问题，而是返回25(而不是“ 1213”)。 打字稿能做的是在编译之前向您抛出错误，并在屏幕上看到“ 1213”。 错误内容如下：“参数函数'add'接受的应该是2个数字，但实际上得到的是2个字符串。 这是一个错误。” 数字和字符串以及许多其他类型是普通javascript的10％的额外费用。

那么，如何使用Typescript？ (So, How to use Typescript?)

To install, run in the command line

要安装，请在命令行中运行

npm i -g typescript

Then, in your project folder, create file index.ts. This is going to be the file we spend most of our time working on for this practice. However, browsers can’t read .ts files directly. We need to compile .ts file into a javascript file first, and then have the browser read that javascript file created by the typescript file.

然后，在您的项目文件夹中，创建文件index.ts。 这将成为我们花费大部分时间进行此练习的文件。 但是，浏览器无法直接读取.ts文件。 我们需要先将.ts文件编译为javascript文件，然后让浏览器读取由打字稿文件创建的javascript文件。

To actually doing what we explained, run

实际执行我们解释的操作

tsc index.ts

in your terminal, and this should create a javascript file for you “index.js” which doesn’t include anything yet. If you then edit on your index.ts, for example

在您的终端中，这应该为您创建一个JavaScript文件“ index.js”，该文件不包含任何内容。 例如，如果您随后在index.ts上进行编辑

console.log("Hello World!")

Then you run tsc index.ts again in your terminal. You should see your index.js is updated with the exact same code “console.log("Hello World!")” This is the fundamental way to compile a typescript file in a project. Every time you write something new, run tsc index.ts to update the javascript file. There will be easier ways, but for now, just repeat this routine so we can focus on the fundamentals.

然后，您在终端中再次运行tsc index.ts。 您应该看到使用完全相同的代码“ console.log(“ Hello World！”)”更新了index.js，这是在项目中编译打字稿文件的基本方法。 每次您编写新内容时，请运行tsc index.ts来更新javascript文件。 会有更简单的方法，但是现在，只需重复此例程即可，以便我们专注于基础知识。

In typescript, you can specify the type of every variable. For example, the same function “add” in typescript would look like

在打字稿中，您可以指定每个变量的类型。 例如，打字稿中相同的函数“ add”看起来像

const add = (num1: number, num2: number) => {console.log(num1 + num2)}

So now, we tell our function add that you can only take arguments who are numbers. So if you run

因此，现在，我们告诉函数添加，您只能接受数字形式的参数。 所以如果你跑

add("12", "13")

Normal javascript would not throw you an error where it should, but typescript would give you the error you wish to see. “Argument of type ‘12’ and ‘13’ are not assignable to parameter of type number”. “12” and “13” are not numbers, fix it.

普通的javascript不会在应该出现的地方抛出错误，但是打字稿会给您您希望看到的错误。 “类型'12'和'13'的参数不能分配给类型号的参数”。 “ 12”和“ 13”不是数字，请修正。

打字稿中的类型 (Types in Typescript)

There are 11 basic types in typescript. Let’s take a look at each of them.

打字稿中有11种基本类型。 让我们看看它们中的每一个。

Number Types

号码类型 const myLuckyNumber: number = 10

In typescript, there is no distinguish between integers and floats. They are all numbers

在打字稿中，没有区别整数和浮点数。 他们都是数字

2. String Types

2.字符串类型

const greet: string = "Hello"

3. Boolean Types

3.布尔类型

const isOn: boolean = true

4. Enum Types

4.枚举类型

This is a special type that typescript has but javascript doesn’t. Enumerated data types (enums) are a set of numeric values with more friendly names. For example:

这是打字稿具有的一种特殊类型，而javascript没有。 枚举数据类型(枚举)是一组具有更友好名称的数字值。 例如：

enum Room { bathroom, kitchen, livingRoom }let firstRoom: Room = 0

Here we set the firstRoom equal to the bathroom, without explicitly put word “bathroom” as the input. Later on you decide your firstRoom would instead be a kitchen, you can reassign the value like this:

在这里，我们将firstRoom设置为与bathroom相等，而未明确输入单词“ bathroom”作为输入。 稍后，您决定将firstRoom改为厨房，则可以像这样重新分配值：

firstRoom = 1

5. Void Types

5.空洞类型

This type is used for a function that will never have a return value.

此类型用于永远不会有返回值的函数。

const showConsoleLog = () :void => { console.log("hoho") }

6. Null Types

6.空类型

You can declare a variable and decide never to assign a value to it.

您可以声明一个变量，然后决定从不为其分配值。

let cursedVar:null = null

7. Undefined Types

7.未定义的类型

Similar to null, you You can declare a variable and decide to leave it undefined.

与null相似，您可以声明一个变量并决定使其保持未定义状态。

let cursedVar2: undefined = null

8. Any Types

8.任何类型

Any types, as its name suggests, would take any input and will never throw an error at you. Using any type is basically throwing away the purpose of existence of typescript because you simply go back to normal javascript. Try to avoid using any types as much as you can.

顾名思义，任何类型都将接受任何输入，并且永远不会对您造成错误。 使用任何类型基本上是放弃了打字稿存在的目的，因为您只需回到普通的javascript。 尽量避免使用任何类型。

let tempVar: any = "hmm"tempVar = 100;tempVar = true;

9. Array Types

9.数组类型

In typescript, when you define an array, you can specify the type of elements this array includes. For example, if you want an array of only numbers:

在打字稿中，定义数组时，可以指定此数组包含的元素类型。 例如，如果您只需要一个数字数组：

let numArr: number [] = [1, 4, 5]

If you want an array of a mix of numbers and strings

如果要混合使用数字和字符串组成的数组

let mixArr: (number | string) [] = [1, 4, 5, "a"]

The “|” is called a Union in typescript. Use it when you expect to have more than one type.

“ |” 在打字稿中被称为联合。 当您希望有不止一种类型时，请使用它。

10. Tuple Types

10.元组类型

Back to the previous array example. If you not only want an array to include numbers and strings, but specifically, you want to make sure the first element is always a number, and the second element is always a string. You want to use Tuple.

返回上一个数组示例。 如果不仅要让数组包含数字和字符串，而且要特别是要确保第一个元素始终是数字，第二个元素始终是字符串。 您想使用元组。

let friend1: [string, number] = ["James", 2020];

It will give you an error if you try to switch the sequence

如果您尝试切换顺序，它将给您一个错误

friend1 = [2020, "James"] #=> this will give you an error

11. Never Types

11.从不输入

The never type is newly introduced type to typescript which indicates the values that will never occur. For example,

never类型是typescript的新引入类型，它指示永远不会出现的值。 例如，

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

而已 (That’s it)

I hope you enjoy this guide, and have fun with typescript.

希望您喜欢本指南，并喜欢打字稿。

翻译自: https://medium.com/swlh/what-is-typescript-and-how-it-works-6b1b8850ccba

无比打字与拼英打字