typescript入门简明教程
5分鐘上手TypeScript
讓我們使用TypeScript來創(chuàng)建一個簡單的Web應(yīng)用。
安裝TypeScript
有兩種主要的方式來獲取TypeScript工具：
- 通過npm（Node.js包管理器）
- 安裝Visual Studio的TypeScript插件
Visual Studio 2017和Visual Studio 2015 Update 3默認(rèn)包含了TypeScript。 如果你的Visual Studio還沒有安裝TypeScript，你可以下載它。
針對使用npm的用戶：
> npm install -g typescript構(gòu)建你的第一個TypeScript文件
在編輯器，將下面的代碼輸入到greeter.ts文件里：
function greeter(person) {return "Hello, " + person; }let user = "Jane User";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 = "Jane User";document.body.innerHTML = greeter(user);類型注解
TypeScript里的類型注解是一種輕量級的為函數(shù)或變量添加約束的方式。 在這個例子里，我們希望 greeter函數(shù)接收一個字符串參數(shù)。 然后嘗試把 greeter的調(diào)用改成傳入一個數(shù)組：
function greeter(person: string) {return "Hello, " + person; }let user = [0, 1, 2];document.body.innerHTML = greeter(user);重新編譯，你會看到產(chǎn)生了一個錯誤。
greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.類似地，嘗試刪除greeter調(diào)用的所有參數(shù)。 TypeScript會告訴你使用了非期望個數(shù)的參數(shù)調(diào)用了這個函數(shù)。 在這兩種情況中，TypeScript提供了靜態(tài)的代碼分析，它可以分析代碼結(jié)構(gòu)和提供的類型注解。
要注意的是盡管有錯誤，greeter.js文件還是被創(chuàng)建了。 就算你的代碼里有錯誤，你仍然可以使用TypeScript。但在這種情況下，TypeScript會警告你代碼可能不會按預(yù)期執(zhí)行。
接口
讓我們開發(fā)這個示例應(yīng)用。這里我們使用接口來描述一個擁有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: "Jane", lastName: "User" };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, 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);重新運行tsc greeter.ts，你會看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類只是JavaScript里常用的基于原型面向?qū)ο缶幊痰暮唽憽?/p>
運行TypeScript Web應(yīng)用
在greeter.html里輸入如下內(nèi)容：
<!DOCTYPE html> <html><head><title>TypeScript Greeter</title></head><body><script src="greeter.js"></script></body> </html>在瀏覽器里打開greeter.html運行這個應(yīng)用！
可選地：在Visual Studio里打開greeter.ts或者把代碼復(fù)制到TypeScript playground。 將鼠標(biāo)懸停在標(biāo)識符上查看它們的類型。 注意在某些情況下它們的類型可以被自動地推斷出來。 重新輸入一下最后一行代碼，看一下自動補全列表和參數(shù)列表，它們會根據(jù)DOM元素類型而變化。 將光標(biāo)放在 greeter函數(shù)上，點擊F12可以跟蹤到它的定義。 還有一點，你可以右鍵點擊標(biāo)識，使用重構(gòu)功能來重命名。
這些類型信息以及工具可以很好的和JavaScript一起工作。 更多的TypeScript功能演示，請查看本網(wǎng)站的起步部分。
原文鏈接：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
總結(jié)
以上是生活随笔為你收集整理的typescript入门简明教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： k8s给default servicea
- 下一篇： 解决argo workflow报错：Mo