TYPESCRIPT指南（译文）

时间 2019-11-08

标签 typescript 指南译文繁體版

原文原文链接

前言

原文地址：flaviocopes.com/typescript/
原文做者：Flavio
译者：Timbok
翻译工具：Google Translate

本文首发于个人我的网站: Timbok.topjavascript

正文

什么？都2019了，你还不会TypeScirpt？别担忧，我也不会，前几天看到一篇写的很好的入门文章，翻译一下，一块儿学习。html

TypeScript是2018年发展最快的技术之一。它无处不在，每一个人都在谈论它。本文将指导您了解其关键概念java

过去几年中，不多有技术能有TypeScript这么大的影响。让我添加一些证据，支持TypeScript。git

在“The State of JavaScript 2018”调查中，近50％的受访者表示他们使用TypeScript，并会再次使用它。超过30％的人表示他们想学习它。对此感兴趣的人中有很大一部分。es6

TypeScript是由微软建立的，它对于建立编程语言并不陌生，其建立者之一是Anders Hejlsberg，一位以Turbo Pascal（❤️）和Delphi而闻名的丹麦软件工程师。我把心思放在Turbo Pascal上，由于Pascal是个人第一个编程语言，咱们在学校使用了Turbo Pascal。github

它是一种开源语言，在github.com/Microsoft/T…上公开开发。typescript

Angular是使用TypeScript的，听说Vue.js使用TypeScript制做3.0版本。Node.js的建立者Ryan Dahl也说了不少关于它的事情。npm

我认为这些东西有助于你清晰认识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文件，除了额外的分号。

有一个很是方便的网站，可以让您在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
}
复制代码

有效类型是

number
string
boolean
enum
void
null
undefined
any
never
Array
tuple

any 是一种全能类型，如其名称所示，可识别任何类型。

类

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的基础知识。详细学习地址：

中文文档：github.com/zhongsp/Typ…
英文文档：www.typescriptlang.org/docs/home.h…

能力有限，水平通常，翻译不妥之处，还望指正。感谢。