如何從JavaScript到TypeScript？-js教程-PHP中文網

本篇文章帶給大家的內容是關於如何從JavaScript到TypeScript？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

想學習typeScript，我覺得你首先要對原生javaScript非常熟練，最基礎的知識最重要，然後要掌握ES5 ES6 ES7（7以後的最好知道一些），新技術掌握了，以後就不會那麼累。 typeScript =type javaScript ，在ES5/6/7 javaScript基礎上加了一個type!

TS相對JS來說，它真的非常嚴格，只要稍微不匹配接口或者值的類型，又或者是參數的個數不對，值改變後面跟原值型別不

一致，都會導致報錯。建議使用npm 全域安裝typeScript 然後使用tsc *.ts 進行編譯TS檔案

'typeScript的新增核心概念:'let app:string=2;這段程式碼就會報錯，因為值2 是一個number，而規定app是string類型，這樣在TS中會報錯的

新增值的類型：

any:可以是任意型別
vold:一個空的回傳類型，例如function move():vold{} 這樣代表這個函數沒有回傳值，如果換成any，那麼就隨便這個

函數回傳什麼類型，但是他必須return 否則TS會報錯

新增概念：類型推論

let app = 'hello' ; app=1 ; 這段程式碼就會報錯，因為TS把他當成了let app:string = 'hello',再次改變

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

聯合類型

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

介面 interface (前端程式設計師很難理解的點)

物件導向這一說法，但是實際在TS中的物件導向更加完整，它跟JAVA這些語言一樣，透過介面和類別去完整的物件導向程式設計。

我們使用介面來描述這個女人（在TS中使用let app : interfacename )
最後使用一些方法來獲得這個女人的聯絡方式（在TS中使用class類別裡面的方法去實現）

例如：

class ask{

    name:string;
    
    tel ? :number  ;   //这里为什么加问号，因为你不一定能拿到她的号码，如果拿不到，那么便可以不传参数，
    
    但是如果不加? ，你又没那么号码，那么你没有参数传进来，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);//假设你拿到美女所有资料 传入构造函数

登入後複製

這樣你可以印出一把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的程式碼編譯後，是不會出現在JS檔中，例如const enum的枚舉，interface這些，當然後面還會遇到更多"

元組的概念

JS中的數組，能儲存大量的內容，所謂的元祖，其實就是資料型別的不同的陣列
[1,'1',true,false] 其實這個就是一個元組，只是叫法不一樣。

枚舉enum 和const enum的區別

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
預設的第一個值是0；也可以自己定義，如果自訂和系統預設的衝突，TS是不認識的，

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

還有一個常數列舉

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

登入後複製

* 假如包含了計算成員，則會在編譯階段報錯：
* const enum Color {Red, Green , Blue = "blue".length}; * 常數枚舉與普通枚舉的區別是，它會在編譯階段被刪除，並且不能包含計算成員。一試便知

類別和接口（最重要的之一）

* 一個類別一次只可以繼承一個接口，但是可以一次對應多個接口

* 要實現多個類別繼承，那麼使用子類別繼續繼承其他類，循環下去

interface check {
name: string;
age: number;
hobby: Array<number>
fuck: number[]   //这两种写法是一样的
}

登入後複製

class exp implements check {
name: string
age: number
hobby:Array<number>
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])

登入後複製

-------經過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可能最難的就是如何理解優雅的物件導向編程，介面interface只是為了描述而已，

真正去實現，需要class類別去實現，ES6在typeScript中位置舉足輕重，
所以我建議你先去學習原生javaScript ES6再來學習typeScript，那樣會輕鬆很多，###

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript教學影片欄位！

以上是如何從JavaScript到TypeScript？的詳細內容。更多資訊請關注PHP中文網其他相關文章！