JavaScript Typescript基礎(chǔ)使用教程
簡(jiǎn)介
typescript是微軟公司開發(fā)的開源編程語(yǔ)言,Type+Javascript(type是類型,在js的基礎(chǔ)上添加了類型支持)
簡(jiǎn)稱:ts,是Javascript的超集
安裝
node.js或者我們的瀏覽器,他只認(rèn)識(shí)js代碼,不認(rèn)識(shí)ts代碼,所以我們需要把我們的ts轉(zhuǎn)換為我們的js代碼,然后進(jìn)行運(yùn)行操作
安裝命令
npm i -g typescript
yarn global add typescript
ts包就是用來(lái)編譯TS代碼的包,提供了tsc的命令,實(shí)現(xiàn)ts->js
檢驗(yàn)是否安裝成功:
tsc -v
注意:Mac 電腦安裝全局包時(shí),需要添加 sudo 獲取權(quán)限:sudo npm i -g typescript yarn 全局安裝:sudo yarn global add typescript
使用原因
類型推演與類型匹配
開發(fā)編譯時(shí)報(bào)錯(cuò)
極大程度的避免了低級(jí)錯(cuò)誤
支持JavaScript最新特性(包含ES6/7/8)
Hello TypeScript
hello.ts文件
function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user));
執(zhí)行命令
tsc hello.ts
這時(shí)候會(huì)自動(dòng)給我們生成一個(gè)helio.js文件
function sayHello(person) { return 'Hello, ' + person; } var user = 'Tom'; console.log(sayHello(user));
從上面我們可以看出,我們使用:指定的變量的類型,在自動(dòng)生成的js文件中卻消失了
這是因?yàn)門yperScript只會(huì)在編譯時(shí)對(duì)類型進(jìn)行靜態(tài)檢查,如果發(fā)現(xiàn)有錯(cuò)誤,編譯的時(shí)候就會(huì)進(jìn)行報(bào)錯(cuò),而在運(yùn)行時(shí),與普通的Javascript文件一樣,不會(huì)對(duì)類型進(jìn)行檢查
TypeScript類型概述
我們可以細(xì)分為兩類
JS原有的類型
原始類型,簡(jiǎn)單類型(number/string/boolean/null/undefined)
特點(diǎn):簡(jiǎn)單,這些類型,是完全按照J(rèn)S中的類型的名稱來(lái)書寫
復(fù)雜數(shù)據(jù)類型(數(shù)組,對(duì)象,函數(shù)等)
TS新增的類型
聯(lián)合類型:聯(lián)合類型使用|分割每個(gè)類型,取值可以為多種類型的一種
自定義類型(類型別名)
接口:是一個(gè)非常靈活的概念,接口一般首字母大寫,有的編程語(yǔ)言中會(huì)建議接口加上I前綴
元組:元組類型是另一種類型的數(shù)組,它確切地知道包含多少個(gè)元素,以及特定索引對(duì)應(yīng)的類型,number有個(gè)缺點(diǎn),就是不嚴(yán)謹(jǐn),該類型中的數(shù)組可以出現(xiàn)任意多個(gè)數(shù)字
字面量類型:字符串字面量類型用來(lái)約束取值只能是某幾個(gè)字符串中的一個(gè)
枚舉:枚舉(Enum)類型用于取值被限定在一定范圍內(nèi)的場(chǎng)景,比如一周只能有七天,顏色限定為紅綠藍(lán)等
任意類型:any表示允許賦值為任意類型
void:函數(shù)的返回值類型是void
類型別名
type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else { return n(); } }
使用type創(chuàng)建類型別名
泛型
泛型(Generics)是指在定義函數(shù)、接口或類的時(shí)候,不預(yù)先指定具體的類型,而在使用的時(shí)候再指定類型的一種特性
// 基本泛型 let list1: Array<number> = [1, 2, 3] // 動(dòng)態(tài)泛型 let makeTuple = <T, Y>(x: T, y: Y) => [x, y]; const v1 = makeTuple(1, 'one') const v2 = makeTuple(true, 1)
到此這篇關(guān)于JavaScript Typescript基礎(chǔ)使用教程的文章就介紹到這了,更多相關(guān)JS Typescript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
快速學(xué)習(xí)JavaScript的6個(gè)思維技巧
在這篇文章中,我將介紹六個(gè)思維技巧來(lái)幫助你更快地學(xué)習(xí)JavaScript,并成為一個(gè)更快樂、更富有成效的程序員。2015-10-10JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼
這篇文章主要介紹了JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼 的相關(guān)資料,需要的朋友可以參考下2015-12-12JavaScript圖片放大技術(shù)(放大鏡)實(shí)現(xiàn)代碼分享
這篇文章介紹了JavaScript圖片放大技術(shù)(放大鏡)實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-11-11基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01多瀏覽器兼容的動(dòng)態(tài)加載 JavaScript 與 CSS
Omar AL Zabir這位MVP總是喜歡搞些稀奇古怪同時(shí)又很實(shí)用的小東西,并且還十分值得參考。最近他就做了一個(gè)叫做ensure的小工具用于動(dòng)態(tài)加載JavaScript、CSS與HTML,而且IE、Firefox、Opera、Safari都支持了,那么我們就來(lái)看看ensure是如何做到動(dòng)態(tài)加載JavaScript與CSS的。2008-09-09BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法
這篇文章主要介紹了BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法,需要的朋友可以參考下2016-12-12普通js文件里面如何訪問(wèn)vue實(shí)例this指針
這篇文章主要介紹了普通js文件里面如何訪問(wèn)vue實(shí)例this指針,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08