5分鐘上手TypeScript踩坑
前言
最近在學習TypeScript，發現TypeScript的官方文件中的5分鐘上手TypeScript輔導教程中會有許多新手可能很難理解的地方，所以記錄一下
宣告一下我用的版本是
npm install [email protected] -g
以後版本可能有所不同
什麼是TypeScript
維基百科上說 “TypeScript是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個嚴格超集，並添加了可選的靜態型別和基於類的面向物件程式設計。”
從名字上我們就可以看出 TypeScript 和 JavaScript 不同的地方就是type，因為 TypeScript 相較於 JavaScript 多了型別檢查這一功能，都知道 JavaScript 是一門動態型別、靜態作用域的語言，但是 TypeScript 的出現更想變成一門靜態型別的語言
如何執行TypeScript
瀏覽器只能執行js、html、css語言，那ts要如何執行在瀏覽器上呢，我們要記住
瀏覽器可以執行js
瀏覽器不能執行ts
要把ts變成js才可以在瀏覽器上執行
tsc會把ts轉化成js
那tsc是什麼，如何獲取呢，需要我們學會使用npm，然後安裝
npm install -g typescript
就可以得到tsc和ts-node這兩個命令了
構建第一個TypesScript檔案
在五分鐘上手TypeScript的文件中，要求我們將以下程式碼輸入到greeter.ts檔案裡
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
因為上面我們說過瀏覽器不能執行ts，而document.body.innerHTML又需要我們在瀏覽器上執行，所以我們需要先把ts檔案轉化成js檔案，這樣會比較麻煩，所以下面我都建議改成用console.log
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
console.log(greeter(user));然後
ts-node greeter.ts
可以在終端中直接打出輸出結果
型別註解
在上面的程式碼中，我們還看不出ts和js的區別，下面對上面的程式碼進行一個改變
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
console.log(greeter(user));在引數後加個冒號然後加個型別，這樣就相當於給引數加上的了一層禁錮，當你輸入的引數並不是字串型別的時候
function greeter(person: string) {
return "Hello, " + person;
}
let user = 123;
console.log(greeter(user));進行編譯轉化成js的時候就會報錯，如下
greeter.ts(7,21): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
這樣子你發現錯誤的時機就從執行到瀏覽器上階段提前到了編譯階段
另外值得一提的是如果，引數是undefined，那麼型別檢查並不會報錯，例如
function greeter(person: string) {
return "Hello, " + person;
}
let user = undefined;
console.log(greeter(user));執行之後會正確輸出
Hello, undefined
介面
學過 java 或者 c# 的人可能會很熟悉這個，就是相當於規定了一個物件一定需要包含幾個屬性，例如官方文件所給的例子，如果我們的物件不符合規則少寫一個屬性
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane"};
console.log(greeter(user));就會報錯
greeter.ts(12,21): error TS2345: Argument of type '{ firstName: string; }' is not assignable to parameter of type 'Person'.
Property 'lastName' is missing in type '{ firstName: string; }'.
但如果我們多寫了屬性
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" , m:'ss'};
console.log(greeter(user));它仍然是可以正常執行的
類
TypeScript 的類的建立有點像 ES6 但是多了一個 public 的關鍵詞，熟悉 java 的同學可能會知道，但是在ts中這個public的具體是什麼作用，在官方文件給的例子中可以看出
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
console.log(greeter(user));實際上就相當於
class Student {
fullName: string;
firstName: string;
middleInitial: string;
lastName: string;
constructor(firstName, middleInitial, lastName) {
this.firstName = firstName
this.middleInitial = middleInitial
this.lastName = lastName
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
console.log(greeter(user));後記
以上就是對5分鐘上手TypeScript的解讀，我也在繼續學習當中，ts相較與js更加嚴格，可以在js執行之前發現錯誤，程式碼更不容易出現bug，看得出來是js從動態型別向靜態型別的一種轉變，但是上面我寫的時候也發現，undefined型別並沒有檢查出來，所以可能還在不停完善中，但是不影響以後前端學習TypeScript可能是必須選項