typescript

1. typescript 含義

TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集...

就是 js 的擴展，融入了大量 es6 的語法，文件後綴爲 .ts  ，可經過安裝 typescript （npm install -g typescript ） ，運行  tsc hello （js 文件名） 生成對應 js 文檔 ，或者在線編譯

2.細節點

2.1 多行字符串   ``

const str = `ss

asa`;

 

2.2 字符串模板   `${name}`  `${get()}`

var str2=`eee${str}`

 

2.3  自動拆分字符串

function get(tmp,name,age){...} 

get `saa${name}ssasa`

 

2.4  類型  / 自動推斷類型

var name:string='wj'     ( number  boolean )

var name='wj'

 

2.5 任意類型

var name:any='wj'

 

2.6  函數傳參 及返回值限制

function test(name:string):void{ return '' }

 

2.7  自定義類型

class Person{name:string,age:number}

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

View Code

替代數組的 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);

View Code

應用Math.max方法

// ES5 的寫法  
Math.max.apply(null, [14, 3, 77])  
// ES6 的寫法  
Math.max(...[14, 3, 77])  
//  等同於  
Math.max(14, 3, 77);

View Code

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);  

View Code

合併數組

// 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' ]

View Code

與解構賦值結合

// 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 // []

View Code

將字符串轉爲真正的數組

[...'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) } }

 

2.10 可選參數 必須位於必選參數後面   b？：string

 

2.11 generator 函數

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.相關文檔

在線編譯網站

typescript

babel

安裝第三方 *.d.ts 文件

typings

DefinitelyTyped