文档章节

TypeScript介绍

乱蓬头
 乱蓬头
发布于 2017/07/12 14:27
字数 1188
阅读 5
收藏 0

摘要: # TypeScript介绍 ## 官方声明 > **JavaScript that scales。**TypeScript is a typed superset of JavaScript that compiles to plain JavaScript ## 特点 - 出自**Anders Hejlsberg**之手(C#,Delphi作者) - 兼容ES

TypeScript介绍

官方声明

JavaScript that scales。TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

特点

  • 出自**Anders Hejlsberg**之手(C#,Delphi作者)

  • 兼容ES规范,同时也有自己的一些规范(如namespace)

  • 自带编译器,也是TS写的

  • 语言即服务(IDE,第三方库的方法声明等)

静态分析

输入错误

interface ISort {
  name: string,
  age: number
}

function sortByName(a: ISort[]) {
  var result = a.slice(0);
  result.sort((x, y) => {
    return x.name.localCompare(y.name);
  });
  return result;
}

执行tsc编译:

error TS2339: Property 'localCompare' does not exist on type 'string'.

localCompare这种输入手误在没有智能提示的情况下是较为常见的,如果这个函数是原生JS,那会等到运行时才会报错。如果使用支持TS的IDE,则输入localCompare后会直接标红,避免运行时这块代码被执行到然后报错再Debug。

非空判断

function countLines(text?: string[]): number {
  let count = 0;
  for (const line of text) {
    if (line && line.length !== 0) {
      count = count + 1;
    }
  }
  return count;
}

执行tsc编译:

error TS2532: Object is possibly 'undefined'.

可以看到for (const line of text) {这行中的text变量是有可能为undefined的(?:是TS语法,表示存在不存在都有可能)。这种缺少非空判断到时的JS运行时错误在工作中也是容易出现的。

访问权限

class Person {
  protected name: string;
  public age: number;
  constructor(name: string) { this.name = name; }
}

class Employee extends Person {
  static someAttr = 1;
  private department: string;

  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.name);

执行tsc编译:

error TS2445: Property 'name' is protected and only accessible within class 'Person' and its subclasses.

Person中name属性是protected类型,只能在自己类中或者子类中使用,这和Java是一样的。

interface Machine {
  move(): void
}

interface Human {
  run(): void
}

class Robot implements Machine, Human {
  run() {
    console.log('run');
  }
}

执行tsc编译:

error TS2420: Class 'Robot' incorrectly implements interface 'Machine'.
  Property 'move' is missing in type 'Robot'.

Robot类实现多个接口时,必须实现每个接口的所有抽象方法,这也是实现多继承的一种方法。

扩展性

TS适合大规模JS应用,正如他的官方宣传语JavaScript that scales

  • 类型系统+静态分析+智能感知/提示,使大规模的应用代码质量更高,更好维护。
  • 有类似VSCode这样配套的IDE支持,方便的查看引用关系,并进行重构,再也不用全局搜索,一个个修改了。
  • 数据结构(应用配置、前后端接口等JSON格式数据)的类型校验,和强类型的后端配合更为无缝、健壮,方便后期前后端整体迭代、重构。

超集

由于兼容ES规范,所以可以比较方便的升级现有的JS代码,逐渐的加类型注解。渐进式(容我盗个词)增强代码健壮性。不过这个也是理论上的,我目前维护的一个项目有比较重的历史包袱,模块管理是CommonJS/ES6 Modules混杂的,我尝试将编译系统从Babel完全迁移到TS,折腾后并没有成功(Babel还是很强大的= =)。

对于历史包袱比较多的老项目,不建议完全替换Babel,但是可以曲线引入TS,用TS编译到ES6,再用Babel来编译到ES5。

代码运行时质量

大型前端应用如何兼顾开发迭代&持续交付的速度和线上运行时的的质量,近期思考后认为很重要的一点就是增强应用数据结构或者说是结构化数据(配置、前后端后接口等JSON格式数据)的稳定性、健壮性。引入强类型系统,增加编译期检查,减少运行时错误,可以显著的改善这个点。很多问题可以在编码时发现,而不是出现运行时错误时再Debug。

和Babel、Flow的对比

  • TypeScript 是推荐套餐,Babel 系列是自助餐。
  • TypeScript自带编译器,包含ES最新规范,还有自己的Features和类型校验;Flow是一个类型校验工具。在类型校验这块两者目前已经相差不大。
  • Babel、Flow是Facebook在推,TypeScript是Microsoft在推,都有不错的生态,但我个人感觉Flow目前还不够成熟(听说FB最近招了一些Lisp大牛来做这个事,没有考证过),TS出自一位大牛(C#、Delphi作者)之手,目前生态发展的非常好,社区口碑也很不错,感觉更靠谱些(并不是说Flow不靠谱)。

开发效率

  • IDE智能提示/纠错,对于迭代、重构、减少Bug提升代码质量会有帮助,同时也可以提升开发效率。

提示:

本文转载自:http://click.aliyun.com/m/25767/

乱蓬头
粉丝 0
博文 382
码字总数 2595
作品 0
私信 提问
来用 TypeScript(技术周刊 2019-04-01)

前端快爆 WebKit 已经实现了 ResizeObserver API,此前该 API 已被 Chrome 支持。通过 ResizeObserver 可以监听元素盒子尺寸的变化。🔗 点评:随着 Edge 迁移到 Chromium 内核,只剩 Fire...

阿里妈妈前端快爆
04/03
0
0
Typescript 小书之入门篇-连载中...

假想你会问(没有这个问题更好) 已经有 Typescript 官方手册 和 Typescript 非官方中文网 这两个权威且全面讲解 Typescript 的站点,干嘛还要再浪费时间整理这本小书? 首先,对于官方的和类...

pr
07/03
0
0
TypeScript 入门

一、TypeScript    TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,兼容JavaScript,可以载入JS代码然后运行。它与JavaScript相比进步的地方包括:加入注释...

笔阁
2015/10/22
937
0
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,...

红薯
2012/10/07
66K
35
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进 步的地方 包括:加入注释...

彭博
2012/11/27
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
27分钟前
2
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部