轉自：https://blog.csdn.net/weixin_40326107/article/details/81626873
簡單介紹
TypeScript，和C#一樣是微軟搞出來的，是一個微軟開發的自由的、開源的編程語言，而且都是大牛Anders Hejlsberg領導開發的。它是JavaScript的一個超集，本質上是向js語言添加了可選的靜態類型和基於類的面向對象編程，並不是vue或者某個前端框架特有的工具。
我們知道，js是弱類型語言，沒有命名空間，在開發大型的前端項目的時候，一度成為制約其模塊化編程的一個重要因素。
1.1 簡單的案例說明
1.安裝TypeScript
一般安裝TS的方式有兩種，分別是：npm的包管理方式和安裝TS的Visual Studio插件兩種方式
這里使用的是npm的方式：
npm install -g typescript
2.創建一個html文件運行生成的js文件
這里我們可以看到，我們使用greeter.js來實現顯示
<!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html>
3.創建一個ts（TypeScript）文件
在文件中寫入如下代碼
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user)
4.編譯代碼：
這里使用的是.ts擴展名,但是其中的代碼是純粹的js代碼,這個代碼可以被替換為你正在使用的任何其他js代碼
在命令行中,運行TypeScript編輯器:
tsc greeter.ts
編譯完成后會在當前目錄下生成一個相應的js文件：
5.執行
編譯結果將是一個greeter.ts包涵你所輸入的相同的js文件，我們在javaScript應用程序中使用TS啟動並執行。
6.以typescript語法寫.ts文件
6.1
現在，我們使用TypeScript提供的新工具，:String 在person函數參數中添加一個類型的注解，如下所示：
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
查看html頁面我們會看到，與之前的測試結果並沒有變化。
輸入與類型注解不符的實參
TypeScript中的類型注釋是記錄函數或者變量的預期契約的輕量級方法，在這種情況下，我們使用單子字符串參數調用greeter函數，我們可以嘗試更改call greeter來傳遞一個數組：
function greeter(person: string) { return "Hello, " + person; } let user = [0, 1, 2]; document.body.innerHTML = greeter(user);
在終端中重新編譯時，可以看到如下的告警：
很明顯。這里的參數的類型有了String的驗證，只允許傳入string類型的數據
同樣，嘗試刪除greeter調用的所有參數，TypeScript會通知您已使用意外數量的參數調用此函數，在這兩種情況下，ts都可以根據代碼結構和你提供的類型注釋提供靜態的分析。
請注意，雖然存在錯誤，但是greeter.js文件還是會被創建，即使代碼中存在錯誤，也可以使用TypeScript。但是這種情況下會報警代碼可能無法按期運行。
如上面的的錯誤已經發生，但是我們運行html文件，發現還是會被正常使用：
6.2接口
我們可以使用接口來描述有firstName和lastName字段對象，在TypeScript中如果兩種類型的內部結構兼容，則他們是兼容的，這允許我們僅通過具有接口所需的形狀來實現接口，而沒有顯式的implements子句；
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);
運行結果與之前上面的沒有變化。
6.3.類
最后，讓我們使用最后一次用類擴展實例，TypeScript支持javaScript中的新功能，例如支持基於類的對象編程。
這里，我們創建一個Student帶有構造函數和一些公共字段的類，請注意，類和接口可以很好的協同工作，讓程序員決定正確的抽象級別
指的注意的是，使用public構造函數on參數是一種簡寫，允許我們自動創建具有該名稱的簡寫
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);
重新運行tsc greeter.ts，TypeScript中的類只是JavaScript中經常使用的基於原型的OO的簡寫。
運行TypeScript Web應用程序
運行后得到的結果如下：
