這篇文章給大家分享的是有關(guān)從JavaScript到TypeScript的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

樂(lè)昌網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

想學(xué)習(xí)typeScript，我覺(jué)得你首先要對(duì)原生javaScript非常熟練，最基礎(chǔ)的知識(shí)最重要，然后要掌握ES5+ES6+ES7（7以后的最好知道一些），新技術(shù)掌握了，以后就不會(huì)那么累。 typeScript =type+ javaScript ，在ES5/6/7+javaScript基礎(chǔ)上加了一個(gè)type!

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

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

'typeScript的新增核心概念:'let app:string=2;這段代碼就會(huì)報(bào)錯(cuò)，因?yàn)橹?2 是一個(gè)number，而規(guī)定app是string類(lèi)型，這樣在TS中會(huì)報(bào)錯(cuò)的

新增值的類(lèi)型：

any:可以是任意類(lèi)型
vold:一個(gè)空的返回類(lèi)型，比如function move():vold{}  這樣代表這個(gè)函數(shù)沒(méi)有返回值 ，如果換成any，那么就隨便這個(gè)

函數(shù)返回什么類(lèi)型，但是他必須return  否則TS會(huì)報(bào)錯(cuò)

新增概念：類(lèi)型推論

• let app = 'hello' ;   app=1  ;   這段代碼就會(huì)報(bào)錯(cuò)，因?yàn)門(mén)S把他當(dāng)成了 let app:string   = 'hello',再次改變

app的值，必須是string類(lèi)型，否則報(bào)錯(cuò) ，這就是類(lèi)型推論

聯(lián)合類(lèi)型

• let app: string | number = 'hello' ; app = 1; 這段代碼是不會(huì)報(bào)錯(cuò)的，因?yàn)閍pp是一個(gè)聯(lián)合類(lèi)型的變量，它即可以是

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

接口  interface (前端程序員很難理解的點(diǎn))

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

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

• 你可以把對(duì)象想象成一個(gè)女人 （在TS中抽象成一個(gè)變量 let app ）
• 我們使用接口去描述這個(gè)女人 （在TS中使用 let app : interfacename）
• 最后使用一些方法去獲得這個(gè)女人的聯(lián)系方式 （在TS中使用class類(lèi)里面的方法去實(shí)現(xiàn)）

比如 ：

class ask{

    name:string;
    
    tel ? :number  ;   //這里為什么加問(wèn)號(hào)，因?yàn)槟悴灰欢苣玫剿奶?hào)碼，如果拿不到，那么便可以不傳參數(shù)，
    
    但是如果不加? ，你又沒(méi)那么號(hào)碼，那么你沒(méi)有參數(shù)傳進(jìn)來(lái)，TS就會(huì)報(bào)錯(cuò) 
    
    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)，看看它是怎樣的，上面這段代碼是沒(méi)有報(bào)錯(cuò)的。

• 上面的代碼通過(guò)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的代碼編譯后，是不會(huì)出現(xiàn)在JS文件中，比如const enum的枚舉， interface這些，當(dāng)然后面還會(huì)遇到更多"
### 元組的概念

• JS中的數(shù)組，能儲(chǔ)存大量的內(nèi)容，所謂的元祖，其實(shí)就是數(shù)據(jù)類(lèi)型的不同的數(shù)組
• [1,'1',true,false]  其實(shí)這個(gè)就是一個(gè)元組，只是叫法不一樣。

### 枚舉 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)的第一個(gè)值是0；也可以自己定義，如果自定義和系統(tǒng)默認(rèn)的沖突，TS是不認(rèn)識(shí)的，

他也不會(huì)報(bào)錯(cuò)，但是我不建議你這樣做，畢竟誰(shuí)沒(méi)事找事呢？

### 還有一種常量枚舉

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

* 假如包含了計(jì)算成員，則會(huì)在編譯階段報(bào)錯(cuò)：
* const enum Color {Red, Green, Blue = "blue".length};  
* 常數(shù)枚舉與普通枚舉的區(qū)別是，它會(huì)在編譯階段被刪除，并且不能包含計(jì)算成員。  一試便知

類(lèi)和接口  （最重要的之一）

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

interface check {
name: string;
age: number;
hobby: Array
fuck: number[]   //這兩種寫(xiě)法是一樣的
}

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)過(guò)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類(lèi)去實(shí)現(xiàn)，ES6在typeScript中位置舉足輕重，

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

感謝各位的閱讀！關(guān)于從JavaScript到TypeScript的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！