摘要：接口前端程序員很難理解的點(diǎn)也是一門面向?qū)ο蟮恼Z言，但是中它是基于原型實(shí)現(xiàn)的，中使用了類，這樣會更清晰的體會到面向?qū)ο筮@一說法，但是實(shí)際在中的面向?qū)ο蟾油暾?，它跟這些語言一樣，通過接口和類去完整的面向?qū)ο缶幊獭?/p>

初中時自學(xué)過JAVA，學(xué)了大概一個多月吧， 學(xué)了一個多月，看視頻這些，后面放棄了編程。 依稀記得，那段日子極度苦逼，我想如果當(dāng)時是學(xué)javaScript就好了。

說正事，typeScript現(xiàn)在真的很火，聽過一句話，大項(xiàng)目，好點(diǎn)的公司，必須上typeScript，還有React，沒有為什么，這里并不是說其他的技術(shù)不好，只是說大型項(xiàng)目，最好TS，它對于我們后期代碼維護(hù)，前期的調(diào)試能省去很多時間。

Node.js之快速搭建微信公眾號服務(wù)器

Node.js之快速搭建服務(wù)器+前后端數(shù)據(jù)庫session交互

ES6教程全篇

前端中大廠面試必問 原生javaScript操作

TS相對JS來說，它真的非常嚴(yán)格，只要稍微不匹配接口或者值的類型，又或者是參數(shù)的個數(shù)不對，值改變后跟原值類型不

一致，都會導(dǎo)致報錯。 建議使用npm 全局安裝typeScript 然后使用 tsc *.ts 進(jìn)行編譯TS文件

"typeScript的新增核心概念:"

let app:string=2;這段代碼就會報錯，因?yàn)橹?2 是一個number，而規(guī)定app是string類型，這樣在TS中會報錯的

any:可以是任意類型

vold:一個空的返回類型，比如function move():vold{} 這樣代表這個函數(shù)沒有返回值 ，如果換成any，那么就隨便這個

函數(shù)返回什么類型，但是他必須return 否則TS會報錯

let app = "hello" ; app=1 ; 這段代碼就會報錯，因?yàn)門S把他當(dāng)成了 let app:string = "hello",再次改變

app的值，必須是string類型，否則報錯 ，這就是類型推論

let app: string | number = "hello" ; app = 1; 這段代碼是不會報錯的，因?yàn)閍pp是一個聯(lián)合類型的變量，它即可以是

string又可以是number，只要符合其中一個類型即可，當(dāng)然你也可以寫更多個。

javaScript也是一門面向?qū)ο蟮恼Z言，但是ES5中它是基于原型實(shí)現(xiàn)的，ES6中使用了class類，這樣會更清晰的體會到

面向?qū)ο筮@一說法，但是實(shí)際在TS中的面向?qū)ο蟾油暾?，它跟JAVA這些語言一樣，通過接口和類去完整的面向?qū)ο缶幊獭?/p>

你可以把對象想象成一個女人 （在TS中抽象成一個變量 let app ）

我們使用接口去描述這個女人 （在TS中使用 let app : interfacename）

最后使用一些方法去獲得這個女人的聯(lián)系方式 （在TS中使用class類里面的方法去實(shí)現(xiàn)）

比如 ：

class ask{

    name:string;
    
    tel ? :number  ;   //這里為什么加問號，因?yàn)槟悴灰欢苣玫剿奶柎a，如果拿不到，那么便可以不傳參數(shù)，
    
    但是如果不加? ，你又沒那么號碼，那么你沒有參數(shù)傳進(jìn)來，TS就會報錯 
    
    age:number ;
    
    constructor(name,age,tel){
         this.name=name;
         this.age=age;
         this.tel=tel
    }
}

interface check {

    name : string;
    
    age:number;
    
    tel ? :number;  
    
}

let woman :check = new ask ("rose",20,1888888888);//假設(shè)你拿到美女所有資料 傳入構(gòu)造函數(shù) 

這樣你可以打印一把 console.log(woman)，看看它是怎樣的，上面這段代碼是沒有報錯的。

上面的代碼通過tsc命令編譯成JS文件后

var ask = /* @class / (function () {

function ask(name, age, tel) {


    this.name = name;
    
    
    this.age = age;
    
    
    this.tel = tel;
    
    
}
return ask;

}());

let woman = new ask("rose", 20, 1888888888);

console.log(woman)

"這里要注意，很多TS的代碼編譯后，是不會出現(xiàn)在JS文件中，比如const enum的枚舉， interface這些，當(dāng)然后面還會遇到更多"




-------------


### 元組的概念

JS中的數(shù)組，能儲存大量的內(nèi)容，所謂的元祖，其實(shí)就是數(shù)據(jù)類型的不同的數(shù)組

[1,"1",true,false] 其實(shí)這個就是一個元組，只是叫法不一樣。

-------


### 枚舉 enum 和 const enum的區(qū)別

enum app { red, blue, pink, deeppink }

console.log(app.red, app.blue, app.pink, app.deeppink) // 輸出0,1,2,3

enum app2 { red = 2, blue, pink, deeppink }

console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // 輸出2,3,4,5

枚舉默認(rèn)的第一個值是0；也可以自己定義，如果自定義和系統(tǒng)默認(rèn)的沖突，TS是不認(rèn)識的，

他也不會報錯，但是我不建議你這樣做，畢竟誰沒事找事呢？

### 還有一種常量枚舉 

const enum Directions {

Up,
Down,
Left,
Right

}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 結(jié)果是 0 1 2 3

* 假如包含了計算成員，則會在編譯階段報錯：

 * const enum Color {Red, Green, Blue = "blue".length};   

* 常數(shù)枚舉與普通枚舉的區(qū)別是，它會在編譯階段被刪除，并且不能包含計算成員。  一試便知 

* 一個類一次只可以繼承一個接口，但是可以一次對應(yīng)多個接口
* 要想實(shí)現(xiàn)多個類繼承，那么使用子類繼續(xù)繼承其他類，循環(huán)下去

interface check {

name: string;
age: number;
hobby: Array
fuck: number[]   //這兩種寫法是一樣的

}

class exp implements check {

name: string
age: number
hobby:Array
fuck: number[]
constructor(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}

}

let app = new exp("hello", 18, [1, 2, 3], [2, 3, 4])

-------經(jīng)過TS編譯后得到  

var exp = /* @class / (function () {

function exp(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
return exp;

}());
var app = new exp("hello", 18, [1, 2, 3], [2, 3, 4]);

typeScript可能最難的就是如何理解優(yōu)雅的面向?qū)ο缶幊?，接口interface只是為了描述而已，


真正去實(shí)現(xiàn)，需要class類去實(shí)現(xiàn)，ES6在typeScript中位置舉足輕重，

所以我建議你先去學(xué)習(xí)原生javaScript+ES6再來學(xué)習(xí)typeScript，那樣會輕松很多，


下面放一個阮一峰的ES6的學(xué)習(xí)文檔鏈接，里面寫得非常詳細(xì)，一定要認(rèn)真看。 

 
[ECMAScript 6 入門](http://es6.ruanyifeng.com/)