本篇文章帶給大家的內容是關於如何從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類型，否則報錯，這就是型別推論
聯合類型
##let app: string | number = 'hello' ; app = 1; 這段程式碼是不會報錯的，因為app是一個聯合類型的變量，它即可以是-
string又可以是number，只要符合其中一個類型即可，當然你也可以寫更多個。
介面 interface (前端程式設計師很難理解的點)
javaScript也是一門物件導向的語言，但是ES5中它是基於原型實現的，ES6中使用了class類，這樣會更清晰的體會到-
物件導向這一說法，但是實際在TS中的物件導向更加完整，它跟JAVA這些語言一樣，透過介面和類別去完整的物件導向程式設計。
你可以把物件想像成一個女人（在TS中抽象化成變數let app ）- 我們使用介面來描述這個女人（在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)，看看它是怎樣的，上面這段程式碼是沒有報錯的。
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中文網其他相關文章！
