5分钟了解TypeScript
1.安裝TypeScript
有兩種方式安裝TypeScript:
-
Via npm
-
通過安裝VS插件，更多可參見這里。
對于npm用戶，可以直接使用下面的命令行安裝：
nmp install -g TypeScript2.創建第一個TypeScript文件
打開editor，最好使用VSCode并且安裝TypeScript插件支持。創建greeter.ts文件，并寫入：
function greeter(person) {return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);3.編譯你的代碼
TypeScript文件后綴都是.ts。雖然我們使用的是ts后綴，但是上面寫的這些code就只是javascript內容，你可以直接copy一下，然后使用這些內容進行測試。打開終端，找到該文件所在目錄，執行以下命令：
tsc greeter.ts便會生成一個greeter.js文件，里面內容如下：
function greeter(person) {return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user);其實剛才的ts文件內容和編譯出來的js內容是一樣的，在web application中，可以直接使用編譯出來的js文件。
現在，可以使用TypeScript的一些新特性，添加 : string來注釋person的類型：
function greeter(person: string) {return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);4.Type annotations
在TypeScript中，Type annotations可以用來標識變量或者參數的類型，在上面的例子中，使用了string類型來標識person。那么這個時候一旦將代碼更改為：
function greeter(person: string) {return "Hello, " + person; } let user = [1,2,3]; document.body.innerHTML = greeter(user);編譯器就會報錯：
greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.同樣地，如果在調用greeter函數的時候什么也不傳入，則會報錯誤：
greeter.ts(7,27): error TS2554: Expected 1 arguments, but got 0.也就是說，TypeScript會根據代碼結構和提供的類型注釋提供代碼靜態分析。
雖然報錯，但greeter.js還是被生成了，你可以繼續使用包含錯的的TypeScript，但是結果可能不會滿足你的預期。?
5.Interface
還是在上面的demo代碼基礎上進行修改，我們可以使用interface來描述一個對象有firstName和lastName兩個屬性。在TypeScript中，如果其內部結構兼容，則兩種類型兼容。這就說明了我們可以通過Interface來實現對象，而不需要implement去實現。
interface Person {firstName: string;lastName: string; } function greeter(person: Person) {return "Hello, " + person.firstName + " " + person.lastName; } let user = {firstName: "Jane", lastName: "User"}; document.body.innerHTML = greeter(user);這里需要注意，interface里面只能聲明屬性或者簽名，而無法添加方法。
6.class
TypeScript支持JavaScript的新功能，其中很重要的一個功能就是基于類的面向對象編程（OOP）。
這里創建一個Student的類，它有一個構造函數和一個屬性。看一下下面的代碼，你會發現類和Interface在一起結合的很完美，程序員可以自己決定正確的抽象。另外，還有一個public的關鍵字，和java中的public類似：
class Student {fullName: string;constructor(public firstName: string,public middleInitial: string,public lastName: string) {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"); document.body.innerHTML = greeter(user);值得關注的是，我們將上面代碼進行編譯為js文件，你可以看到編譯后的文件為：
var Student = /** @class */ (function () {function Student(firstName, middleInitial, lastName) {this.firstName = firstName;this.middleInitial = middleInitial;this.lastName = lastName;this.fullName = firstName + " " + middleInitial + " " + lastName;}return Student; }()); function greeter(person) {return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);其實就是個Student的函數。
說了這么多，怎么能直接看到運行效果呢？很簡單，創建一個html文件，然后在里面引用編譯的js文件即可：
<!DOCTYPE html><head><title>TypeScript Greeter</title></head><body><script src="greeter.js"></script></body> </html>使用瀏覽器打開此html文件即可運行 ~ ~
另外，VSCode的提供也是很強大的，具體自己感受。
轉載于:https://www.cnblogs.com/zhanggui/p/9173660.html
總結
以上是生活随笔為你收集整理的5分钟了解TypeScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js进阶 9-11 select选项框如
- 下一篇： 移动路线