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