博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
TYPESCRIPT指南(译文)
阅读量:6165 次
发布时间:2019-06-21

本文共 5852 字,大约阅读时间需要 19 分钟。

前言

  • 原文地址:
  • 原文作者:
  • 译者:
  • 翻译工具:Google Translate

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

正文

什么?都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。

它是一种开源语言,在上公开开发。

Angular是使用TypeScript的,据说Vue.js使用TypeScript制作3.0版本。Node.js的创建者Ryan Dahl也说了很多关于它的事情。

我认为这些东西有助于你清晰认识TypeScript。这不仅仅是一种随机的JavaScript风格,将在下个月消亡,它绝对会留下来。事实上,这意味着您可能需要在未来的项目或下一个工作中使用它。也许它会帮助你找到一份工作,所以让我们深入研究它。

编写并编译您的第一个TYPESCRIPT文件

TypeScript开始很容易。如果您曾经写过一行JavaScript,那么您已经编写了TypeScript代码!

我所做的这个奇怪的陈述是TypeScript成功的原因之一:它是JavaScript的严格超集。

这有点像SCSS的CSS。

特别是,它是(也称为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文件,除了额外的分号。

有一个非常方便的网站,可让您在上使用TypeScript到JavaScript编辑。

类型

到目前为止,我们编译了一个.ts文件,但我们只编译了纯JavaScript。

您看到了TypeScript的第一个功能:您可以使用现代JavaScript并将其编译为ES5(或更高版本),这是所做的。我们还没有使用任何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')  }}复制代码

访问器

字段可以有gettersetter。例:

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.FirstOrder.Second依此类推。

您可以显式地为常量指定值:

enum Order {  First = 0,  Second = 1,  Third = 2,  Fourth = 3}复制代码

或者也使用字符串:

enum Order {  First = 'FIRST',  Second = 'SECOND',  Third = 'THIRD',  Fourth = 'FOURTH'}复制代码

泛型

泛型是许多不同编程语言的一部分。简而言之,您可以创建一个使用不同类型的函数,接口或类,而无需预先指定类型。

但是在编译时,如果你开始使用一个类型的函数,然后你改变类型(例如从数字到字符串),编译器将抛出一个错误。

我们可以通过省略类型或使用any类型来实现这一点,但是使用泛型,所有工具都能够帮助我们

示例语法:

function greet
(a : T) { console.log(`Hi ${a}!`)}greet('Flavio')复制代码

有趣的T符号标识通用类型。

可以使用以下extends关键字将类型限制为某个类或接口:

interface Greetable { name: string }function greet
(a : T) { alert(`Hi ${a.name}!`)}greet({ name: 'Flavio'})复制代码

总结

这些都是TypeScript的基础知识。详细学习地址:

  • 中文文档:
  • 英文文档:

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

转载地址:http://tluba.baihongyu.com/

你可能感兴趣的文章
vue项目中路由切换时取消所有等待中的请求
查看>>
JS数组重要方法
查看>>
JVM学习(二)垃圾收集器
查看>>
[leetcode-JavaScript]---206.反转链表
查看>>
时间复杂度 - O(1)[算法]
查看>>
为hexo博客添加基于gitment评论功能
查看>>
《魂斗罗归来》之状态模式VS策略模式
查看>>
Vue 源码学习(一)
查看>>
Inquirer.js一个demo轻松搞定!
查看>>
八、目前JDK中,单例模式这3种写法你知道吗?
查看>>
Vue+Koa+Mongodb 小练习
查看>>
前端页面中的保存逻辑
查看>>
一个 MVP + Retrofit + Rxjava + Dagger2 新闻阅读项目
查看>>
java 库存 进销存 商户 多用户管理系统 SSM springmvc 项目源码
查看>>
从自身成长聊一下我理解的“终身学习”
查看>>
从统计局采集最新的省市区镇数据,用js在浏览器中运行 V2
查看>>
Flutter - Drawer 抽屉视图与自定义header
查看>>
ERP系统的优势_库存管理软件开发
查看>>
如何内行地评价公链(一)从真正的不可能三角谈起
查看>>
BigDecimal 详解
查看>>