1.npm install -g typescript
在編輯器,將下面的代碼輸入到greeter.ts
文件里:
function greeter(person) {return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
我們使用了.ts
擴展名,但是這段代碼僅僅是JavaScript而已。 你可以直接從現有的JavaScript應用里復制/粘貼這段代碼。
在命令行上,運行TypeScript編譯器:
tsc greeter.ts
輸出結果為一個greeter.js
文件,它包含了和輸入文件中相同的JavsScript代碼。 一切準備就緒,我們可以運行這個使用TypeScript寫的JavaScript應用了!
接下來讓我們看看TypeScript工具帶來的高級功能。 給?person
函數的參數添加: string
類型注解,如下:
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
類型注解
TypeScript里的類型注解是一種輕量級的為函數或變量添加約束的方式。 在這個例子里,我們希望?greeter
函數接收一個字符串參數。 然后嘗試把?greeter
的調用改成傳入一個數組:
function greeter(person: string) { return "Hello, " + person; } let user = [0, 1, 2]; document.body.innerHTML = greeter(user);
重新編譯,你會看到產生了一個錯誤。
greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
似地,嘗試刪除greeter
調用的所有參數。 TypeScript會告訴你使用了非期望個數的參數調用了這個函數。 在這兩種情況中,TypeScript提供了靜態的代碼分析,它可以分析代碼結構和提供的類型注解。
要注意的是盡管有錯誤,greeter.js
文件還是被創建了。 就算你的代碼里有錯誤,你仍然可以使用TypeScript。但在這種情況下,TypeScript會警告你代碼可能不會按預期執行。
接口
讓我們開發這個示例應用。這里我們使用接口來描述一個擁有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);
類
最后,讓我們使用類來改寫這個例子。 TypeScript支持JavaScript的新特性,比如支持基于類的面向對象編程。
讓我們創建一個Student
類,它帶有一個構造函數和一些公共字段。 注意類和接口可以一起共作,程序員可以自行決定抽象的級別。
還要注意的是,在構造函數的參數上使用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"); document.body.innerHTML = greeter(user);
重新運行tsc greeter.ts
,你會看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類只是JavaScript里常用的基于原型面向對象編程的簡寫。
運行TypeScript Web應用
在greeter.html
里輸入如下內容:
<!DOCTYPE html>
<html><head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html>
?
等等
?
?
?
?
?