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

TypeScript創(chuàng)建一個簡單Web應(yīng)用

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

安裝TypeScript

獲取TypeScript工具的方式：

通過npm（Node.js包管理器）

npm install -g typescript

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

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

mkdir typescript_demo && cd typescript_demo

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

touch greeter.ts

將下面的代碼寫入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é)果為一個greeter.js文件，它包含了和輸入文件中相同的JavsScript代碼。

一切準(zhǔn)備就緒，我們可以運(yùn)行這個使用TypeScript寫的JavaScript應(yīng)用了！

接下來讓我們看看TypeScript工具帶來的高級功能。

給 person函數(shù)的參數(shù)添加: string類型注解，如下：

function greeter(person:string) {
? ? return "Hello, " + person;
}
let user = "Durban Zhang";
document.body.innerHTML = greeter(user);

類型注解

TypeScript里的類型注解是一種輕量級的為函數(shù)或變量添加約束的方式。

在這個例子里，我們希望 greeter函數(shù)接收一個字符串參數(shù)。

然后嘗試把 greeter的調(diào)用改成傳入一個數(shù)組：

function greeter(person:string) {
? ? return "Hello, " + person;
}
let user = "Durban Zhang";
document.body.innerHTML = greeter(user);

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

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

類似地，嘗試刪除greeter調(diào)用的所有參數(shù)。

TypeScript會告訴你使用了非期望個數(shù)的參數(shù)調(diào)用了這個函數(shù)。

在這兩種情況中，TypeScript提供了靜態(tài)的代碼分析，它可以分析代碼結(jié)構(gòu)和提供的類型注解。

要注意的是盡管有錯誤，greeter.js文件還是被創(chuàng)建了。 就算你的代碼里有錯誤，你仍然可以使用TypeScript。但在這種情況下，TypeScript會警告你代碼可能不會按預(yù)期執(zhí)行。

接口

這里我們使用接口來描述一個擁有firstName和lastName字段的對象。 在TypeScript里，只在兩個類型內(nèi)部的結(jié)構(gòu)兼容那么這兩個類型就是兼容的。

這就允許我們在實現(xiàn)接口時候只要保證包含了接口要求的結(jié)構(gòu)就可以，而不必明確地使用 implements語句。

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);

類

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

讓我們創(chuàng)建一個Student類，它帶有一個構(gòu)造函數(shù)和一些公共字段。 注意類和接口可以一起共作，程序員可以自行決定抽象的級別。還要注意的是，在構(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，你會看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類只是JavaScript里常用的基于原型面向?qū)ο缶幊痰暮唽憽?/p>

運(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>

實踐項目地址

https://github.com/durban89/typescript_demo

tag: 1.0.0

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

相關(guān)文章

最新評論