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

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

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

安裝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擴展名,但是這段代碼僅僅是JavaScript而已。 你可以直接從現(xiàn)有的JavaScript應(yīng)用里復(fù)制/粘貼這段代碼。

在命令行上,運行TypeScript編譯器:

tsc greeter.ts

輸出結(jié)果為一個greeter.js文件,它包含了和輸入文件中相同的JavsScript代碼。

一切準(zhǔ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);

重新運行tsc greeter.ts,你會看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類只是JavaScript里常用的基于原型面向?qū)ο缶幊痰暮唽憽?/p>

運行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)用的詳細內(nèi)容,更多關(guān)于TypeScript創(chuàng)建Web應(yīng)用的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論