对TypeScript进行研究
1.npm install -g typescript
在編輯器，將下面的代碼輸入到greeter.ts文件里：
function greeter(person) {return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);我們使用了.ts擴(kuò)展名，但是這段代碼僅僅是JavaScript而已。 你可以直接從現(xiàn)有的JavaScript應(yīng)用里復(fù)制/粘貼這段代碼。
在命令行上，運(yùn)行TypeScript編譯器：
tsc greeter.ts輸出結(jié)果為一個(gè)greeter.js文件，它包含了和輸入文件中相同的JavsScript代碼。 一切準(zhǔn)備就緒，我們可以運(yùn)行這個(gè)使用TypeScript寫(xiě)的JavaScript應(yīng)用了！
接下來(lái)讓我們看看TypeScript工具帶來(lái)的高級(jí)功能。 給?person函數(shù)的參數(shù)添加: string類型注解，如下：
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);類型注解
TypeScript里的類型注解是一種輕量級(jí)的為函數(shù)或變量添加約束的方式。 在這個(gè)例子里，我們希望?greeter函數(shù)接收一個(gè)字符串參數(shù)。 然后嘗試把?greeter的調(diào)用改成傳入一個(gè)數(shù)組：
function greeter(person: string) { return "Hello, " + person; } let user = [0, 1, 2]; document.body.innerHTML = greeter(user);
重新編譯，你會(huì)看到產(chǎn)生了一個(gè)錯(cuò)誤。
greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
似地，嘗試刪除greeter調(diào)用的所有參數(shù)。 TypeScript會(huì)告訴你使用了非期望個(gè)數(shù)的參數(shù)調(diào)用了這個(gè)函數(shù)。 在這兩種情況中，TypeScript提供了靜態(tài)的代碼分析，它可以分析代碼結(jié)構(gòu)和提供的類型注解。
要注意的是盡管有錯(cuò)誤，greeter.js文件還是被創(chuàng)建了。 就算你的代碼里有錯(cuò)誤，你仍然可以使用TypeScript。但在這種情況下，TypeScript會(huì)警告你代碼可能不會(huì)按預(yù)期執(zhí)行。
接口
讓我們開(kāi)發(fā)這個(gè)示例應(yīng)用。這里我們使用接口來(lái)描述一個(gè)擁有firstName和lastName字段的對(duì)象。 在TypeScript里，只在兩個(gè)類型內(nèi)部的結(jié)構(gòu)兼容那么這兩個(gè)類型就是兼容的。 這就允許我們?cè)趯?shí)現(xiàn)接口時(shí)候只要保證包含了接口要求的結(jié)構(gòu)就可以，而不必明確地使用?implements語(yǔ)句。
?
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);
類
最后，讓我們使用類來(lái)改寫(xiě)這個(gè)例子。 TypeScript支持JavaScript的新特性，比如支持基于類的面向?qū)ο缶幊獭?/p>
讓我們創(chuàng)建一個(gè)Student類，它帶有一個(gè)構(gòu)造函數(shù)和一些公共字段。 注意類和接口可以一起共作，程序員可以自行決定抽象的級(jí)別。
還要注意的是，在構(gòu)造函數(shù)的參數(shù)上使用public等同于創(chuàng)建了同名的成員變量。
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);
重新運(yùn)行tsc greeter.ts，你會(huì)看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類只是JavaScript里常用的基于原型面向?qū)ο缶幊痰暮?jiǎn)寫(xiě)。
運(yùn)行TypeScript Web應(yīng)用
在greeter.html里輸入如下內(nèi)容：
?
等等
?
?
?
??
轉(zhuǎn)載于:https://www.cnblogs.com/zhouyideboke/p/11346873.html
總結(jié)
以上是生活随笔為你收集整理的对TypeScript进行研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java生鲜电商平台-秒杀系统微服务架构
- 下一篇： java实现高德与百度之间的坐标转换