讓我們使用TypeScript來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的Web應(yīng)用。

安裝TypeScript

有兩種主要的方式來(lái)獲取TypeScript工具：

通過(guò)npm(Node.js包管理器)

安裝Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默認(rèn)包含了TypeScript。 如果你的Visual Studio還沒(méi)有安裝TypeScript，你可以下載它。

針對(duì)使用npm的用戶：

> npm install -g typescript

構(gòu)建你的第一個(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類(lèi)型注解，如下：

function greeter(person: string) {

return "Hello, " + person;

}

let user = "Jane User";

document.body.innerHTML = greeter(user);

類(lèi)型注解

TypeScript里的類(lèi)型注解是一種輕量級(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'.

類(lèi)似地，嘗試刪除greeter調(diào)用的所有參數(shù)。 TypeScript會(huì)告訴你使用了非期望個(gè)數(shù)的參數(shù)調(diào)用了這個(gè)函數(shù)。 在這兩種情況中，TypeScript提供了靜態(tài)的代碼分析，它可以分析代碼結(jié)構(gòu)和提供的類(lèi)型注解。

要注意的是盡管有錯(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è)類(lèi)型內(nèi)部的結(jié)構(gòu)兼容那么這兩個(gè)類(lèi)型就是兼容的。

這就允許我們?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)

最后，讓我們使用類(lèi)來(lái)改寫(xiě)這個(gè)例子。 TypeScript支持JavaScript的新特性，比如支持基于類(lèi)的面向?qū)ο缶幊獭?/p>

讓我們創(chuàng)建一個(gè)Student類(lèi)，它帶有一個(gè)構(gòu)造函數(shù)和一些公共字段。 注意類(lèi)和接口可以一起共作，程序員可以自行決定抽象的級(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里的類(lèi)只是JavaScript里常用的基于原型面向?qū)ο缶幊痰暮?jiǎn)寫(xiě)。

運(yùn)行TypeScript Web應(yīng)用

在greeter.html里輸入如下內(nèi)容：

TypeScript Greeter

在瀏覽器里打開(kāi)greeter.html運(yùn)行這個(gè)應(yīng)用！

可選地：在Visual Studio里打開(kāi)greeter.ts或者把代碼復(fù)制到TypeScript playground。 將鼠標(biāo)懸停在標(biāo)識(shí)符上查看它們的類(lèi)型。 注意在某些情況下它們的類(lèi)型可以被自動(dòng)地推斷出來(lái)。

重新輸入一下最后一行代碼，看一下自動(dòng)補(bǔ)全列表和參數(shù)列表，它們會(huì)根據(jù)DOM元素類(lèi)型而變化。 將光標(biāo)放在

greeter函數(shù)上，點(diǎn)擊F12可以跟蹤到它的定義。 還有一點(diǎn)，你可以右鍵點(diǎn)擊標(biāo)識(shí)，使用重構(gòu)功能來(lái)重命名。

這些類(lèi)型信息以及工具可以很好的和JavaScript一起工作。 更多的TypeScript功能演示，請(qǐng)查看本網(wǎng)站的起步部分。

總結(jié)

以上是生活随笔為你收集整理的在html中写typescript,5分钟上手TypeScript的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。