1. typescript 含义
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集...
就是 js 的扩展，融入了大量 es6 的语法，文件后缀为 .ts ，可通过安装 typescript （npm install -g typescript ） ，运行 tsc hello （js 文件名） 生成对应 js 文档 ，或者在线编译
2.细节点
2.1 多行字符串 ``
var zhang:Person= new Person ();
zhang.name=''
2.8 省略参数 ...arg es6扩展运算符 三个点
定义：扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
基本用法：省略
function a(...arg){ arg.forEach(val){ console.log(val) } }
将一个数组，变为参数序列
function push(array, ...items) { array.push(...items); } function add(x, y) { return x + y; } var numbers = [4, 38]; add(...numbers) // 42
替代数组的 apply 方法
// ES5 的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f.apply(null, args); // ES6 的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f(...args);
应用Math.max方法
// ES5 的写法 Math.max.apply(null, [14, 3, 77]) // ES6 的写法 Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77);
push数组
// ES5 的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6 的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2);
合并数组
// ES5 [1, 2].concat(more) // ES6 [1, 2, ...more] var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; // ES5 的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6 的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
与解构赋值结合
// ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list 下面是另外一些例子。 const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5] const [first, ...rest] = []; first // undefined rest // []: const [first, ...rest] = ["foo"]; first // "foo" rest // []
将字符串转为真正的数组
[...'hello'] // [ "h", "e", "l", "l", "o" ]
类数组转为真数组
[...arguments] // 替换es5中的Array.prototype.slice.call(arguments)写法
对象扩展运算符
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
等价于
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 } //Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。
常见用法：修改对象的部分属性
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}}; // {a: 2, b: 4}
2.9 参数默认值 末尾值（默认）
function a(name,age:20,...arg){ arg.forEach(val){ console.log(val) } }
function* dosomething(){
console.log('start');
yield '100'
console.log('end');
}
var func1=dosomething();
func1.next()
...
func1.next()
2.12 析构表达式
对象析构表达式
变量取用、起别名 、多层变量 二次析构
getStock(){
return {
code:'10010',
price:{
priceEnd:'$100'
}
str:'' // 无关代码
...
}
}
var {code:codex,price:{priceEnd}}=getStock() // codex 变量表示将取出来的code重命名
2.13 数组析构表达式
var arr=[1,2,3,4]
var [arr1,arr2]=arr; // arr1 1 arr2 2
var [arr1,,,arr2]=arr; / arr1 1 arr2 4
var [arr1,arr2,...oth]=arr; / arr1 1 arr2 2 oth [3,4]
2.14 箭头表达式
var sum = (arg1,arg2) => arg1+arg2
var sum = (arg1,arg2) => {
return arg1+arg2
}
var sum = arg1=> arg1
var sum = ()=> {}
arr.filter(val => val % 2 === 0 ) // [2,4]
2.15 箭头函数 - 保持 this 定义指向
setTimeout ...
2.16 forEach for in for of
var arr=[1,2,3]
forEach 自定义属性循环不出来 可以 break continue return 中断
for in 自定义属性可以循环出来 可以 break continue return 中断 （ 循环中 i 代表属性，自定义属性可遍历出来 ）
for of 定义属性循环不出来 可以 break continue return 中断 （ 循环中 i 代表索引，自定义属性不可遍历出来 ）
2.17 类
继承 extends privite
泛型 只能放一类
var workers:Array<Person> = []
workers[0]=new Person('wj');
workers[1]=new Employee('wj','29');
workers[2]=2 //err
2.18 接口 interface
interface IPerson {
name：string，
age：number
}
class Person{
constructor (public config:IPerson){}
}
2.19 接口的实现 implements
interface Animal{
eat()
}
class Sheep implements Animal{
eat(){
...
}
}
2.20 模块 import export
第三方常用文件 *.d.ts
3.相关文档
在线编译网站
安装第三方 *.d.ts 文件
DefinitelyTyped