在html中写typescript,5分钟上手TypeScript
讓我們使用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)題。
- 上一篇: html自动轮播中间放大,html5+c
- 下一篇: 至暗时刻鸿蒙初开,鸿蒙2.0面世,华为在