专栏首页IMWeb前端团队还在纠结用不用ES6,不如来试试TypeScript

还在纠结用不用ES6,不如来试试TypeScript

The only limits in our life are those we impose on ourselves.

弱爆的 ES6 in browser

注意是在浏览器,怎么弱法?简单的说:

几乎是语法糖,async function这些很有用的东西要依赖一个巨型Polyfill才可使用。

ES6特性

兼容性

箭头函数

支持

类的声明和继承

部分支持,IE8不支持

增强的对象字面量

支持

字符串模板

支持

解构

支持,但注意使用方式

参数默认值,不定参数,拓展参数

支持

let与const

支持

for of

IE不支持

iterator, generator

不支持

模块 module、Proxies、Symbol

不支持

Map,Set 和 WeakMap,WeakSet

不支持

Promises、Math,Number,String,Object 的新API

不支持

export & import

支持

生成器函数

不支持

数组拷贝

支持

详情请参考 ouven 的文章 Babel下的ES6兼容性与规范

那么TypeScript呢?

其实 TypeScript能用的 ES6 语法糖基本都支持了。

下面举些例子,大家可以对照上面的文章看看。

箭头函数
  • ts:
var add = (a, b) => a + b;
  • javascript
var add = function (a, b) { return a + b; };
增强对象字面量
  • ts
var human = {
    breathe() {
        console.log('breathing...');
    }
};
  • javascript
var human = {
    breathe: function () {
        console.log('breathing...');
    }
};
字符串模版
  • ts
const tmpl = `
<div class="content">
  <h1>这是换行了。</h1>
</div>`;

function sayHi(name) {
    return `How are you, ${name}?`;
}
  • javascript
var tmpl = "\n<div class=\"content\">\n  <h1>\u8FD9\u662F\u6362\u884C\u4E86\u3002</h1>\n</div>";
function sayHi(name) {
    return "How are you, " + name + "?";
}
解构
  • ts
var [name, gender, age] = ['wayou', 'male', 'secrect'];

function getArr() {
    return [1, 2, 3];
}

var [a, b, c] = (() => [1, 2, 3])();

var { one, two, three } = (() => {
    const one = 1, two = 2, three = 3;
    return { one, three, two };
})();
  • javascript
var _a = ['wayou', 'male', 'secrect'], name = _a[0], gender = _a[1], age = _a[2];
function getArr() {
    return [1, 2, 3];
}
var _b = (function () { return [1, 2, 3]; })(), a = _b[0], b = _b[1], c = _b[2];
var _c = (function () {
    var one = 1, two = 2, three = 3;
    return { one: one, three: three, two: two };
})(), one = _c.one, two = _c.two, three = _c.three;
默认参数
  • ts
function sayHello(age, name='dude'){
    console.log(`Hello ${name}`);
}
sayHello(12);
  • javascript
function sayHello(age, name) {
    if (name === void 0) { name = 'dude'; }
    console.log("Hello " + name);
}
sayHello(12);
不定参数
  • ts
function add(...x) {
    return x.reduce((m, n) => m + n);
}
  • javascript
function add() {
    var x = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        x[_i - 0] = arguments[_i];
    }
    return x.reduce(function (m, n) { return m + n; });
}
let & const
  • ts
{
    let a = 10;
}
a;  //  IDE或编译器会告诉你:cannot find name 'a'

const c = 123;
c = 321; // IDE或编译器会告诉你:Left-hand side of assignment expression cannot be a constant.
数组拷贝
  • ts
const items = [1,2,3];
const itemsCopy = [...items];
  • javascript
var items = [1, 2, 3];
var itemsCopy = items.slice();

可选的类型系统

为什么要将类型加到 Javascript中呢?

  • 类型可以让你更敏捷地重构代码(比如可以利用 VS 自动重构)。可以在编译阶段更容易的发现错误,而不是放在运行时。
  • 类型是一种良好的文档形式。
类型可以推断

但这并不意味着我们需要重复写各种类型声明,现代编程语言提供一种叫类型推断(type inference)的方式来简化类型的声明,例如:

var foo = 123;
foo = '456'; // Error: cannot assign `string` to `number`

帅呆了,编译器通过上下文,知道 foo 变量应当是一个数字,所以当想将其设置成字符串的时候,编译器报错。

类型是结构上的相同

为了让 Javascript开发简洁,类型并非是强制的,而是只要结构上一致便可以使用,例如:

interface Point2D {
    x: number;
    y: number;
}
interface Point3D {
    x: number;
    y: number;
    z: number;
}
var point2D: Point2D = { x: 0, y: 10, }
var point3D: Point3D = { x: 0, y: 10, z: 20 }
function iTakePoint2D(point: Point2D) { /* do something */ }

iTakePoint2D(point2D); // 精准匹配
iTakePoint2D(point3D); // 有额外的信息,没有问题
iTakePoint2D({ x: 0 }); // Error: missing information `y`

未来

ES7 将引入奇怪的 Typed Objects,不过目前看来 ES7 还是遥遥无期,如果想拥有类型,还是先使用 TypeScript吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下! debounce 当监听一些scroll,resize事...

    IMWeb前端团队
  • ES6学习笔记

      在ES5中,除了全局作用域外,限定所声明的变量的作用域是函数作用域。这使得ES5在很多情况下为了模拟块级作用域(避免变量名污染)需要使用立即执行的匿名函数。...

    IMWeb前端团队
  • Babel下的ES6兼容性与规范

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大...

    IMWeb前端团队
  • JavaScript代码压缩细节

    对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小。

    慕白
  • 移动端Webapp中的那些Bug

    持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0(IOS 10.3.3) Github: webapp-bugs 1....

    糊糊糊糊糊了
  • 名企刷题指南-剑指offer第5期(45-55题)

    45.LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看...

    前端迷
  • Js 使用new关键字调用函数和直接调用函数的区别

    var friend=new Person("Nicholas",29,"Software Engineer");

    大道七哥
  • 一篇文章把你带入到JavaScript中的闭包与高级函数

    在JavaScript中,函数是一等公民。JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等...

    达达前端
  • JavaScript匿名函数与闭包

    匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数。 一.匿名函数 //普通函数 function box() {//函数名是box retur...

    汤高
  • 用node.js进行微信公众平台的开发

      微信服务器就相当于一个转发服务器,终端(手机、Pad等)发起请求至微信服务器,微信服务器,然后将请求转发给自定义服务(这里就是我们的具体实现)。服务处理完毕...

    笔阁

扫码关注云+社区

领取腾讯云代金券