TypeScript創(chuàng)建一個簡單Web應(yīng)用
安裝TypeScript
獲取TypeScript工具的方式:
通過npm(Node.js包管理器)
npm install -g typescript
構(gòu)建你的第一個TypeScript文件
創(chuàng)建項目文件夾
mkdir typescript_demo && cd typescript_demo
創(chuàng)建文件greeter.ts
touch greeter.ts
將下面的代碼寫入greeter.ts中
function greeter(person) { ? ? return "Hello, " + person; } let user = "Durban Zhang"; document.body.innerHTML = greeter(user);
編譯代碼
這里使用.ts擴展名,但是這段代碼僅僅是JavaScript而已。 你可以直接從現(xiàn)有的JavaScript應(yīng)用里復(fù)制/粘貼這段代碼。
在命令行上,運行TypeScript編譯器:
tsc greeter.ts
輸出結(jié)果為一個greeter.js文件,它包含了和輸入文件中相同的JavsScript代碼。
一切準(zhǔn)備就緒,我們可以運行這個使用TypeScript寫的JavaScript應(yīng)用了!
接下來讓我們看看TypeScript工具帶來的高級功能。
給 person函數(shù)的參數(shù)添加: string類型注解,如下:
function greeter(person:string) { ? ? return "Hello, " + person; } let user = "Durban Zhang"; document.body.innerHTML = greeter(user);
類型注解
TypeScript里的類型注解是一種輕量級的為函數(shù)或變量添加約束的方式。
在這個例子里,我們希望 greeter函數(shù)接收一個字符串參數(shù)。
然后嘗試把 greeter的調(diào)用改成傳入一個數(shù)組:
function greeter(person:string) { ? ? return "Hello, " + person; } let user = "Durban Zhang"; document.body.innerHTML = greeter(user);
重新編譯,你會看到如下產(chǎn)生 的一個錯誤。
greeter.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'. 7 document.body.innerHTML = greeter(user);
類似地,嘗試刪除greeter調(diào)用的所有參數(shù)。
TypeScript會告訴你使用了非期望個數(shù)的參數(shù)調(diào)用了這個函數(shù)。
在這兩種情況中,TypeScript提供了靜態(tài)的代碼分析,它可以分析代碼結(jié)構(gòu)和提供的類型注解。
要注意的是盡管有錯誤,greeter.js文件還是被創(chuàng)建了。 就算你的代碼里有錯誤,你仍然可以使用TypeScript。但在這種情況下,TypeScript會警告你代碼可能不會按預(yù)期執(zhí)行。
接口
這里我們使用接口來描述一個擁有firstName和lastName字段的對象。 在TypeScript里,只在兩個類型內(nèi)部的結(jié)構(gòu)兼容那么這兩個類型就是兼容的。
這就允許我們在實現(xiàn)接口時候只要保證包含了接口要求的結(jié)構(gòu)就可以,而不必明確地使用 implements語句。
interface Person { ? ? firstName: string; ? ? lastName: string; } function greeter(person: Person) { ? ? return "Hello, " + person.firstName + " " + person.lastName; } let user = { firstName: "Durban", lastName: "Zhang" }; document.body.innerHTML = greeter(user);
類
最后,讓我們使用類來改寫這個例子。 TypeScript支持JavaScript的新特性,比如支持基于類的面向?qū)ο缶幊獭?/p>
讓我們創(chuàng)建一個Student類,它帶有一個構(gòu)造函數(shù)和一些公共字段。 注意類和接口可以一起共作,程序員可以自行決定抽象的級別。還要注意的是,在構(gòu)造函數(shù)的參數(shù)上使用public等同于創(chuàng)建了同名的成員變量。
class Student { ? ? fullName:string; ? ? constructor ( ? ? ? ? public firstName: string, ? ? ? ? public middleName: string, ? ? ? ? public lastName: string) { ? ? ? ? this.fullName = firstName + " " + middleName + " " + lastName; ? ? ? ?? ? ? } } interface Person { ? ? firstName: string; ? ? lastName: string; } function greeter(person: Person) { ? ? return "Hello, " + person.firstName + " " + person.lastName; } let user = new Student("Durban", "M.", "Zhang"); document.body.innerHTML = greeter(user);
重新運行tsc greeter.ts,你會看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類只是JavaScript里常用的基于原型面向?qū)ο缶幊痰暮唽憽?/p>
運行TypeScript Web應(yīng)用
創(chuàng)建greeter.html并在里面輸入如下內(nèi)容:
<!DOCTYPE html> <html> ? ? <head><title>TypeScript Greeter</title></head> ? ? <body> ? ? ? ? <script src="greeter.js"></script> ? ? </body> </html>
實踐項目地址
https://github.com/durban89/typescript_demo
tag: 1.0.0
以上就是TypeScript創(chuàng)建一個簡單Web應(yīng)用的詳細內(nèi)容,更多關(guān)于TypeScript創(chuàng)建Web應(yīng)用的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript 復(fù)雜的嵌套環(huán)境中輸出單引號和雙引號
如果簡單的嵌套一般都是外面用雙引號,則里面用單引號,反之亦同,如果特別負(fù)責(zé)的嵌套大家看下如下的方法。2009-05-05Javascript的異步函數(shù)和Promise對象你了解嗎
這篇文章主要為大家詳細介紹了Javascript異步函數(shù)和Promise對象,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫操作示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫操作,涉及微信小程序wx.request后臺數(shù)據(jù)交互及php數(shù)據(jù)存儲相關(guān)操作技巧,需要的朋友可以參考下2019-05-05JavaScript使表單中的內(nèi)容顯示在屏幕上的方法
這篇文章主要介紹了JavaScript使表單中的內(nèi)容顯示在屏幕上的方法,涉及javascript針對表單元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06JavaScript中誤用/g導(dǎo)致的正則test()無法正確重復(fù)執(zhí)行的解決方案
這篇文章主要介紹了JavaScript中誤用/g導(dǎo)致的正則test()無法正確重復(fù)執(zhí)行的解決方案的相關(guān)資料,需要的朋友可以參考下2016-07-07