乐趣区

TYPESCRIPT指南(译文)

前言

原文地址: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
}
有效类型是

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

中文文档:https://github.com/zhongsp/TypeScript

英文文档:http://www.typescriptlang.org/docs/home.html

能力有限,水平一般,翻译不妥之处,还望指正。感谢。

退出移动版