本文共 14945 字，大约阅读时间需要 49 分钟。
typescript 学习
点击图片进入Scrimba课程
TypeScript has been gaining a lot of popularity amongst JavaScript developers in the last few years. And it’s no wonder, as TypeScript code tends to be less error-prone, more readable and easier to maintain.
在过去的几年中，TypeScript在JavaScript开发人员中越来越受欢迎。 这也就不足为奇了，因为TypeScript代码往往不那么容易出错，更易于阅读，并且易于维护。
So we’ve partnered up with the eminent online instructor and created a The course contains 22 lessons and is for people who already know JavaScript but who want a quick intro to TypeScript.
因此，我们与著名的在线讲师并创建了 该课程包含22节课程， 面向已经了解JavaScript但想要快速入门TypeScript的人们。
Take the course
在参加课程
Now let’s have a look at each of the lectures in the course.
现在，让我们看一下该课程中的每个讲座。
In the introductory screencast, Dylan gives an overview of why you should learn TypeScript, and how the course is laid out. He also tells you a little bit about himself, so that you are familiar with him before jumping into the coding stuff.
在介绍性的截屏视频中，Dylan概述了为什么您应该学习TypeScript以及该课程的布局。 他还向您介绍了一些关于他自己的信息，以便您熟悉编码之前的知识。
Compile time type-checking is one of the most important features of TypeScript. It lets us catch errors related to the types of data at compile time. This lesson explains the data types available in TypeScript.
编译时类型检查是TypeScript的最重要功能之一。 它使我们能够在编译时捕获与数据类型有关的错误。 本课说明TypeScript中可用的数据类型。
let firstName: string;let age: number;let isMarried: boolean;
You can see how we have types attached to all the variables. If we try to put a string value in place of a number type variable, TypeScript will catch it at compile time.
您可以看到我们如何将类型附加到所有变量。 如果我们尝试将字符串值代替数字类型变量，TypeScript将在编译时捕获它。
In TypeScript, we keep a single type for a variable but that is not possible every time. So, instead, TypeScript provides us with theany type. This means we can assign multiple types of values to one variable.
在TypeScript中，我们为变量保留一个单一类型，但这并非每次都可行。 因此，TypeScript可以为我们提供any类型。 这意味着我们可以为一个变量分配多种类型的值。
let myVariable: any = 'Hello World'; myVariable = 10; myVariable = false;
Above, we’ve declared myVariable with any type. First we assigned it a string, next a number, and finally a boolean. This is possible because of the any type.
上面，我们用any类型声明了myVariable 。 首先，我们给它分配一个字符串，接下来是一个数字，最后是一个布尔值。 由于any类型，这都是可能的。
Sub types are used when we are unaware of the value of the variable. TypeScript provides us with two sub types: null and undefined. This lesson explains when we should use either of those.
当我们不知道变量的值时，使用子类型。 TypeScript为我们提供了两种子类型： null和undefined 。 本课说明何时应使用其中任何一个。
let myVariable: number = undefined;
The variable myVariable has been assigned the value of undefined because, at this point in time, we don’t know what it is going to be. We can also use null here.
已为变量myVariable分配了undefined的值，因为在当前时间点，我们不知道它将是什么。 我们也可以在此处使用null 。
Part 5 talks about the difference between implicit and explicit typing. In the examples above, we saw explicit types where we set the type of the variable. Implicit typing, on other hand, is performed by the compiler without us stating the variable type.
第5部分讨论隐式和显式类型之间的区别。 在上面的示例中，我们看到了用于设置变量类型的显式类型。 另一方面，隐式类型是由编译器执行的，而无需我们声明变量类型。
let myVariable = 'Hello World';
In this example, we have not assigned any type to the variable. We can check the type of this variable using thetypeof function. This will show that myVariable is of string type because the compiler took care of the typing.
在此示例中，我们没有为变量分配任何类型。 我们可以使用typeof函数检查此变量的类型。 这将显示myVariable是string类型，因为编译器负责输入。
In this lesson we’ll learn how we can check the type of a variable, and catch any error or perform any operation. It uses an example in which we test if our variable is of type Bear (where Bear is a class). If we want to check the type of our variable, we can use theinstanceof method.
在本课程中，我们将学习如何检查变量的类型，捕获任何错误或执行任何操作。 它使用一个示例来测试变量是否属于Bear类型(其中Bear是一个class )。 如果要检查变量的类型，可以使用instanceof方法。
import { Bear } from 'somefile.ts'; let bear = new Bear(3); if (bear instanceof Bear) { //perform some operation } Type assertion means we can cast a variable to any particular type, and we tell TypeScript to handle that variable using that type. Let’s try to understand it with an example:
类型断言意味着我们可以将变量转换为任何特定类型，并告诉TypeScript使用该类型来处理该变量。 让我们尝试通过一个例子来理解它：
let variable1: any = 'Hello World'; if ((variable1 as string).length) { //perform some operation } variable1 has the type of any . But, if we want to check its length, it will produce an error until we tell TypeScript to handle it as a string. This lesson explains more details about this concept.
variable1具有any的类型。 但是，如果我们要检查其长度，它将产生一个错误，直到我们告诉TypeScript将其作为字符串处理。 本课说明有关此概念的更多详细信息。
This part of the course explains TypeScript arrays. In JavaScript, when we assign values to an array, we can put in different types of items. But, with TypeScript, we can declare an array with types as well.
本课程的这一部分将介绍TypeScript数组。 在JavaScript中，当我们为数组分配值时，可以放入不同类型的项目。 但是，使用TypeScript，我们也可以声明具有类型的数组。
let array1: number[] = [1, 2, 3, 4, 5];
In the above example, we declared an array of numbers by assigning it the number type. Now TypeScript will make sure the array contains only numbers.
在上面的示例中，我们通过分配number类型来声明数字数组。 现在，TypeScript将确保数组仅包含数字。
Sometimes we need to store multiple types of values in one collection. Arrays will not serve in this case. TypeScript gives us the data type of tuples. These are used to store values of multiple types.
有时我们需要在一个集合中存储多种类型的值。 在这种情况下，阵列将无法使用。 TypeScript为我们提供元组的数据类型。 这些用于存储多种类型的值。
let tuple_name = [10, 'Hello World'];
This example shows that we can have data items of number and string types in one collection. This lesson explains the concept of tuples in more detail.
此示例说明我们可以在一个集合中包含数字和字符串类型的数据项。 本课将更详细地说明元组的概念。
In this lesson, we will learn about enums in TypeScript. Enums are used to define a set of named constants which can be used to document intent or to create a set of different cases.
在本课程中，我们将学习TypeScript中的枚举。 枚举用于定义一组命名常量，可用于记录意图或创建一组不同的情况。
**enum** Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT" } Here is a basic example of how enums are declared, and how different properties are created inside them. The rest of the details are explained in this section of the course.
这是一个如何声明枚举以及如何在其中创建不同属性的基本示例。 本课程的本节将说明其余的细节。
In JavaScript, objects have a pretty major role in how language has been defined and has evolved. This lesson talks about objects in TypeScript — how to declare an object, and which kinds of values can fit inside the object type.
在JavaScript中，对象在语言的定义和发展方面起着非常重要的作用。 本课讨论TypeScript中的对象-如何声明对象，以及哪种类型的值可以适合对象类型。
Using TypeScript, we can also assign types to the parameters of a function. In this section of the course, Dylan explains how we can add types to parameters. This is a very useful way to handle errors regarding data type in a function.
使用TypeScript，我们还可以将类型分配给函数的参数。 在课程的这一部分中，Dylan解释了如何向参数添加类型。 这是处理有关函数中数据类型错误的非常有用的方法。
const multiply = (num1: number, num2: number) => { return num1 * num2; } We have declared a function multiply which takes two parameters and returns the value from multiplying them. We added a type of number to both the parameters so that no other value except a number can be passed to them.
我们已经声明了一个函数multiply ，该函数接受两个参数并通过将它们相乘返回值。 我们在两个参数中都添加了一种number类型，因此除了数字以外没有其他值可以传递给它们。
Like parameters, we can also add type-checking to the return value of a function. This way we can make sure that the return value from a function has an expected type. This part of the course explains the concept in detail.
像参数一样，我们还可以在函数的返回值中添加类型检查。 这样，我们可以确保函数的返回值具有预期的类型。 本部分课程将详细介绍该概念。
const multiply = (num1: number, num2: number): number => { return num1 * num2; } We have added a return type of number to the function. Now, if we return anything except a number, it will show us an error.
我们在函数中添加了number的return类型。 现在，如果我们返回除number以外的任何内容，它将显示一个错误。
In TypeScript, we can create a custom type using the keyword of type. We can then type-check objects on the basis of that type.
在TypeScript中，我们可以使用type.关键字创建自定义type. 然后，我们可以根据该类型对对象进行类型检查。
type person = {firstName: string};const example3: person = {firstName: 'Dollan'}; This feature is almost deprecated in TypeScript, so you should rather use interface or class for this purpose. However, it’s important that you get to know it, as you might come across custom types when you start to dive into TS code.
TypeScript中几乎不推荐使用此功能，因此您应为此目的使用interface或class 。 但是，了解这一点很重要，因为当您开始使用TS代码时可能会遇到自定义类型。
In TypeScript, the core focus is on type-checking which enforces the use of a particular type. Interfaces are a way of naming these types. It’s basically a group of related methods and properties that describe an object. This part of the course explains how to create and use interfaces.
在TypeScript中，核心重点是类型检查，该检查强制使用特定类型。 接口是命名这些类型的一种方式。 基本上，这是一组描述对象的相关方法和属性。 本部分课程说明了如何创建和使用界面。
interface Person { firstName: string, lastName: string, age: number } In the example above, we have an interface Person which has some typed properties. Note that we don’t initiate data in interfaces, but rather define the types that the parameters will have.
在上面的示例中，我们有一个Person接口，该接口具有一些类型化的属性。 请注意，我们不是在接口中初始化数据，而是定义参数将具有的类型。
A barrel is a way to rollup exports from multiple modules into a single module. A barrel is, itself, a module, which is exporting multiple modules from one file. This means that a user has to import just one module instead of all the modules separately.
桶是将多个模块的导出汇总到单个模块的一种方法。 桶本身就是一个模块，它从一个文件中导出多个模块。 这意味着用户只需要导入一个模块，而不是分别导入所有模块。
// Without barrel import { Foo } from '../demo/foo'; import { Bar } from '../demo/bar'; import { Baz } from '../demo/baz';` Instead of using these multiple lines separately to import these modules, we can create a barrel. The barrel would export all these modules and we import only that barrel.
无需单独使用这些多行来导入这些模块，我们可以创建一个桶。 桶将导出所有这些模块，而我们仅导入该桶。
// demo/barrel.ts export * from './foo'; // re-export all of its exportsexport * from './bar'; // re-export all of its exportsexport * from './baz'; // re-export all of its exports
We can simply create a TypeScript file and export the modules from their respective file. We can then import this barrel wherever we need it.
我们可以简单地创建一个TypeScript文件并从各自的文件中导出模块。 然后，我们可以在需要时将其进口。
import { Foo, Bar, Baz } from '../demo'; // demo/barrel.ts When using interfaces, we often face a number of problems. For example, interfaces can’t seem to enforce anything coming from the server side, and they can't keep the default value. To solve this issue, we use the concept of models classes. These act as an interface, and also may have default values and methods added to them.
使用接口时，我们经常会遇到许多问题。 例如，接口似乎无法强制执行来自服务器端的任何操作，并且它们无法保留默认值。 为了解决这个问题，我们使用模型类的概念。 这些充当接口，并且可能还添加了默认值和方法。
In this section, we’ll talk about intersection types. These are the ways we can use multiple types to a single entity or class. Sometimes we need to use multiple types to map one entity and, at that time, this feature comes in very handy.
在本节中，我们将讨论交叉点类型。 这些是我们可以对单个实体或类使用多种类型的方法。 有时我们需要使用多种类型来映射一个实体，那时，此功能非常方便。
import { FastFood, ItalianFood, HealthyFood} from ‘./interfaces’; let food1: FastFood | HealthyFood; let food2: ItalianFood; let food3: FastFood; let food4: FastFood & ItalianFood; In the example above, we have three interfaces and we are creating different objects from them. For example, food1 is going to be either FastFood or HealthyFood. Similarly, food4 is going to be FastFood as well as ItalianFood.
在上面的示例中，我们有三个接口，并且正在根据它们创建不同的对象。 例如， food1将是要么FastFood 或 HealthyFood 。 同样， food4将是FastFood 以及 ItalianFood 。
In short, generics is a way to create reusable components which can work on a variety of data types rather than a single one.
简而言之，泛型是一种创建可重用组件的方法，该组件可用于多种数据类型而不是单个数据类型。
The concept of generics is actually not available in JavaScript so far, but is widely used in popular object-oriented languages such as C# or Java. In this lesson, we’ll learn how to use generics in TypeScript, and look at its key benefits.
到目前为止，泛型的概念实际上还没有在JavaScript中提供，但是在流行的面向对象的语言(例如C＃或Java)中得到了广泛使用。 在本课程中，我们将学习如何在TypeScript中使用泛型，并了解其主要优点。
The idea of access modifiers is relatively new in the arena of JavaScript and TypeScript, but they have been available in other object-oriented languages for a long time. Access modifiers control the accessibility of the members of a class.
访问修饰符的概念在JavaScript和TypeScript领域相对较新，但是很长一段时间以来，它们就已经在其他面向对象的语言中可用。 访问修饰符控制类成员的可访问性。
In TypeScript, there are two access modifiers: public and private. Every member of a class defaults to public until you declare it otherwise.
在TypeScript中，有两个访问修饰符：public和private。 除非另行声明，否则类的每个成员都默认为public。
class Customer { customerId: number; public companyName: string; private address: string; } customerId is a default public member, so it’s always available to the outside world. We have specifically declared companyName aspublic, so it will also be available outside of class. address is marked as private, therefore it won’t be accessible outside the class.
customerId是默认的公共成员，因此外界始终可以使用它。 我们已专门将companyName声明为public ，因此它也可以在课程之外使用。 address被标记为private,因此在全班同学都无法访问。
In this lesson, we’ll learn the steps to install and run TypeScript on local computers. Those steps generally involve installing Node and TypeScript, and then compiling “.ts” files.
在本课程中，我们将学习在本地计算机上安装和运行TypeScript的步骤。 这些步骤通常涉及安装Node和TypeScript，然后编译“ .ts”文件。
Click the image to get to the course.
单击图像进入课程。
Yay! You’ve completed the course. In the last part of the video, Dylan will give some tips on how to take this learning further and improve the code we write today.
好极了！ 您已完成课程。 在视频的最后部分，Dylan将提供一些技巧，以帮助您进一步学习和改进我们今天编写的代码。
In this lesson, he also covers how you can use the amazing TSLint. This tool helps you write better production level code using best practices and conventions. It comes up with some basic settings which you can modify to meet your needs.
在本课程中，他还将介绍如何使用惊人的TSLint。 该工具可帮助您使用最佳实践和约定编写更好的生产级别代码。 它带有一些基本设置，您可以对其进行修改以满足您的需求。
Thanks for reading! My name is Per Borgen, I'm the co-founder of – the easiest way to learn to code. You should check out our if want to learn to build modern website on a professional level.
谢谢阅读！ 我叫Per Borgen，我是的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的 。
翻译自:
typescript 学习
转载地址：http://znkzd.baihongyu.com/