欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript創(chuàng)建一個(gè)簡(jiǎn)單Web應(yīng)用

 更新時(shí)間：2022年05月17日 10:52:07   作者：durban  
這篇文章主要為大家介紹了TypeScript創(chuàng)建一個(gè)簡(jiǎn)單Web應(yīng)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

安裝TypeScript

獲取TypeScript工具的方式：

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

npm install -g typescript

構(gòu)建你的第一個(gè)TypeScript文件

創(chuàng)建項(xiàng)目文件夾

mkdir typescript_demo && cd typescript_demo

創(chuàng)建文件greeter.ts

touch greeter.ts

將下面的代碼寫(xiě)入greeter.ts中

function greeter(person) {
? ? return "Hello, " + person;
}
let user = "Durban Zhang";
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 = "Durban Zhang";
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 = "Durban Zhang";
document.body.innerHTML = greeter(user);

重新編譯，你會(huì)看到如下產(chǎn)生 的一個(gè)錯(cuò)誤。

greeter.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
7 document.body.innerHTML = greeter(user);

類(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í)行。

接口

這里我們使用接口來(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: "Durban", lastName: "Zhang" };
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: 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);

重新運(yùn)行tsc greeter.ts，你會(huì)看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類(lèi)只是JavaScript里常用的基于原型面向?qū)ο缶幊痰暮?jiǎn)寫(xiě)。

運(yùn)行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>

實(shí)踐項(xiàng)目地址

https://github.com/durban89/typescript_demo

tag: 1.0.0

以上就是TypeScript創(chuàng)建一個(gè)簡(jiǎn)單Web應(yīng)用的詳細(xì)內(nèi)容，更多關(guān)于TypeScript創(chuàng)建Web應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論