前言原文地址：https://flaviocopes.com/typescript/原文作者：Flavio译者：Timbok翻译工具：Google Translate本文首发于我的个人网站: Timbok.top正文什么？都2019了，你还不会TypeScirpt？别担心，我也不会，前几天看到一篇写的很好的入门文章，翻译一下，一起学习。TypeScript是2018年发展最快的技术之一。它无处不在，每个人都在谈论它。本文将指导您了解其关键概念过去几年中，很少有技术能有TypeScript这么大的影响。让我添加一些证据，支持TypeScript。在“The State of JavaScript 2018”调查中，近50％的受访者表示他们使用TypeScript，并会再次使用它。超过30％的人表示他们想学习它。对此感兴趣的人中有很大一部分。TypeScript是由微软创建的，它对于创建编程语言并不陌生，其创建者之一是Anders Hejlsberg，一位以Turbo Pascal（❤️）和Delphi而闻名的丹麦软件工程师。我把心思放在Turbo Pascal上，因为Pascal是我的第一个编程语言，我们在学校使用了Turbo Pascal。它是一种开源语言，在https://github.com/Microsoft/TypeScript上公开开发。Angular是使用TypeScript的，据说Vue.js使用TypeScript制作3.0版本。Node.js的创建者Ryan Dahl也说了很多关于它的事情。我认为这些东西有助于你清晰认识TypeScript。这不仅仅是一种随机的JavaScript风格，将在下个月消亡，它绝对会留下来。事实上，这意味着您可能需要在未来的项目或下一个工作中使用它。也许它会帮助你找到一份工作，所以让我们深入研究它。编写并编译您的第一个TYPESCRIPT文件TypeScript开始很容易。如果您曾经写过一行JavaScript，那么您已经编写了TypeScript代码！我所做的这个奇怪的陈述是TypeScript成功的原因之一：它是JavaScript的严格超集。这有点像SCSS的CSS。特别是，它是ECMAScript 2015（也称为ES6）的超集。这意味着任何有效的JavaScript也是有效的TypeScript。TypeScript的许多功能都等同于JavaScript。例如变量，模块系统，迭代器等。所以，没有必要编写绝对的第一个TypeScript文件，因为你已经在你不知道的情况下写过，让我们通过显式制作一个TypeScript文件来制作一个“hello world！”，并将其编译成JavaScript。运行npm install -g typescript以全局安装可使用tsc命令使用的TypeScript编译器。创建一个新文件夹，然后创建一个app.ts文件。.ts是TypeScript文件扩展名。写下第一个程序：const greet = () => { console.log(‘Hello world!’)}greet()这只是普通的JavaScript，但存储在一个.ts文件中。现在使用编译程序tsc app.ts。结果将是一个新的JavaScript文件：app.js，包含以下内容：var greet = function () { console.log(‘Hello world!’);};greet();TypeScript代码已编译为JavaScript。JavaScript代码稍有改动，例如你可以注意到它添加了分号，var用来代替const和使用常规函数而不是箭头函数。它看起来像旧的 JavaScript，对吗？这是因为TypeScript默认编译为ES5，因为这是几乎可以保证在所有现代浏览器中都支持的ECMAScript版本。您可以将编译目标更改为其他版本，例如编译为ES2018：tsc app.ts –target ES2018：const greet = () => { console.log(‘Hello world!’);};greet();看，这里几乎没有改变我们的原始.ts文件，除了额外的分号。有一个非常方便的网站，可让您在https://www.typescriptlang.org/play/上使用TypeScript到JavaScript编辑。类型到目前为止，我们编译了一个.ts文件，但我们只编译了纯JavaScript。您看到了TypeScript的第一个功能：您可以使用现代JavaScript并将其编译为ES5（或更高版本），这是Babel所做的。我们还没有使用任何TypeScript功能。TypeScript提供的最重要的功能是类型系统：静态类型，接口，类型推断，枚举，混合类型，泛型，联合/交集类型，访问修饰符，空检查。如果你曾经使用过类型语言，比如Go或C，你已经知道它是如何工作的。如果没有，并且您只使用Python或Ruby这样的动态语言进行编程，这对您来说是全新的，但不要担心。例如，类型系统允许您向变量，函数参数和函数返回类型添加类型，从而为程序提供更严格的结构。我们编译的JavaScript代码没有类型，它们在编译阶段会丢失。以下是在TypeScript中定义字符串变量的方法：const greeting : string = “hello!“类型推断让我们避免在明显的情况下编写类型：const greeting = “hello!“类型由TS确定。这是函数接受特定类型的参数的方式：const multiply = (a: number, b: number) => { return a * b}如果传递一个字符串给multiply()，编译器会给你一个错误。以下是函数声明其返回值的方式：const multiply = (a: number, b: number): number => { return a * b}有效类型是numberstringbooleanenumvoidnullundefinedanyneverArraytupleany 是一种全能类型，如其名称所示，可识别任何类型。类ES2015 / ES6为JavaScript 添加了类，作为原型继承的简单语法糖。无论喜欢与否，在引擎盖下，JavaScript仍然使用原型继承，具有其独特的功能和怪癖。TypeScript类与JavaScript类略有不同。原因是TypeScript在JavaScript之前引入了类（它们是在ES2015 / ES6中引入的）。就像在JavaScript中一样，您以这种方式声明类：class Car {}默认情况下，所有字段都是公开 您可以将字段设置为私有或受保护：class Car { public color: string private name: string protected brand: string}就像在其他编程语言中发生的那样，私有字段只能在声明它们的类中访问。受保护的字段也只能通过派生类来访问。您还可以声明静态字段，它们是类字段而不是对象字段：class Car { static numberOfWheels = 4}您可以使用构造函数初始化字段：class Car { color: string constructor(theColor: string) { this.color = theColor }}这种简写语法使其更简单：class Car { constructor(public color: string) {} printColor() { alert(this.color) }}(new Car(‘red’)).printColor()字段也可以是只读的：class Car { readonly color: string}在这种情况下，它的值只能在构造函数中设置。类具有方法：class Car { color: string constructor(public color: string) { this.color = color } drive() { console.log(‘You are driving the car’) }}与纯JavaScript一样，您可以使用new关键字从这些类创建对象：const myCar = new Car(‘red’)并且您可以使用extend关键字扩展现有类：class ElectricCar extends Car { //…}您可以在构造函数和方法中调用super()来调用扩展类对应的方法类可以定义为抽象，这意味着需要有一个扩展它的类，并实现其最终的抽象方法：abstract class Car { abstract drive()}class SportsCar extends Car { drive() { console.log(‘You are driving a sports car’) }}访问器字段可以有getter和setter。例：class Car { private _color: string get color(): string { return this._color } set color(color: string) { this._color = color }}接口接口基于基本类型构建。您可以将接口用作类型，并且此接口可以包含其他类型定义：interface SetOfNumbers { a: number; b: number;}const multiply = (set: SetOfNumbers) => { return set.a * set.b}multiply({ a:1, b: 2 })接口也可以是类实现的接口：interface Car { name: ‘string’ new (brand: string) drive(): void}class SportsCar implements Car { public name construtor(public brand: string) { //… } drive() { console.log(‘You are driving a sports car’) }}函数特点函数可以使用?来表明参数类型可选：class Car { drive(kilometers?: number) { if (kilometers) { console.log(Drive the car for ${kilometers} kilometers) } else { console.log(Drive the car) } }}参数也可以有默认值：class Car { drive(kilometers = 10) { console.log(Drive the car for ${kilometers} kilometers) }}函数可以使用…接受不同数量的参数：class Car { drive(kilometers = 10, …occupants: string[]) { console.log(Drive the car for ${kilometers} kilometers, with those people on it:) occupants.map((person) => console.log(person)) }}(new Car()).drive(20, ‘Flavio’, ‘Roger’, ‘Syd’)枚举枚举是定义命名常量的一种很好的方法，遗憾的是，它不受JavaScript支持，但是被其他语言推广。TypeScript为我们提供了枚举：enum Order { First, Second, Third, Fourth}TS在内部为每个值分配唯一标识符，我们可以简单地引用Order.First，Order.Second依此类推。您可以显式地为常量指定值：enum Order { First = 0, Second = 1, Third = 2, Fourth = 3}或者也使用字符串：enum Order { First = ‘FIRST’, Second = ‘SECOND’, Third = ‘THIRD’, Fourth = ‘FOURTH’}泛型泛型是许多不同编程语言的一部分。简而言之，您可以创建一个使用不同类型的函数，接口或类，而无需预先指定类型。但是在编译时，如果你开始使用一个类型的函数，然后你改变类型（例如从数字到字符串），编译器将抛出一个错误。我们可以通过省略类型或使用any类型来实现这一点，但是使用泛型，所有工具都能够帮助我们示例语法：function greet<T>(a : T) { console.log(Hi ${a}!)}greet(‘Flavio’)有趣的T符号标识通用类型。可以使用以下extends关键字将类型限制为某个类或接口：interface Greetable { name: string }function greet<T extends Greetable>(a : T) { alert(Hi ${a.name}!)}greet({ name: ‘Flavio’})总结这些都是TypeScript的基础知识。详细学习地址：中文文档：https://github.com/zhongsp/TypeScript英文文档：http://www.typescriptlang.org/docs/home.html能力有限，水平一般，翻译不妥之处，还望指正。感谢。