还在纠结用不用ES6，不如来试试TypeScript
还在纠结用不用ES6，不如来试试TypeScript
IMWeb前端团队
发布于 2017-12-28 18:09:37
发布于 2017-12-28 18:09:37
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吧。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录