typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
TypeScript是什么?
涉及代碼倉(cāng)庫(kù)
- TypeScript是由微軟開(kāi)發(fā)的一款開(kāi)源的編程工具
- TypeScript是JavaScript的超集,遵循最新的ES5/ES6規(guī)范,TypeScript擴(kuò)展了JavaScript的語(yǔ)法
- TypeScript更像后端Java,C#這樣的面向?qū)ο蟮恼Z(yǔ)言,也就是說(shuō)可以讓開(kāi)發(fā)大型企業(yè)使用
- 越來(lái)越多的項(xiàng)目是基于TS的,比如VSCode、Angular6、Vue3、React16
- TS提供的類型系統(tǒng)可以幫助我們?cè)趯懘a的時(shí)候獲得更多的語(yǔ)法提示
- 在創(chuàng)建前的編譯階段經(jīng)過(guò)類型系統(tǒng)的檢查,就可以避免很多的線上的錯(cuò)誤
TypeScript的安裝和編譯
安裝
cnpm i typescript -g
編譯
tsc helloworld.ts
上手實(shí)踐
首先我們新建一個(gè)文件夾,將該文件夾通過(guò)命令行工具打開(kāi),并且輸入 code .
來(lái)執(zhí)行命令
然后我們就可以用Vscode這個(gè)軟件來(lái)編輯ts
后綴的文件了.輸入tsc --init
創(chuàng)建tsconfig文件。如下所示
{ "compilerOptions": { /* Visit https://aka.ms/tsconfig to read more about this file */ /* Language and Environment */ "target": "es2016", /* Modules */ "module": "commonjs", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ /* Type Checking */ "strict": true, /* Enable all strict type-checking options. */ "skipLibCheck": true /* Skip type checking all .d.ts files. */ } }
名稱 | 描述 |
---|---|
target | 將es編譯成特定的es版本 |
module | 指定模塊默認(rèn)的生成規(guī)范,默認(rèn)的就是commonjs |
// Basic DataStruct introduction let married:boolean = true; let age:number = 10; let first_name:string = 'guoming'; let arr1:number[] = [1,2,3]; let arr2:Array<number> = [4,5,6] // tuple, number and type are know to us let guoming:[string,number] = ['guoming',10]; // enum type enum Gender { GIRL, BOY } // basic enum console.log(Gender.BOY) console.log(Gender.GIRL) // const enum const enum Colors{ RED,YELLOW,BLUE } let myColor = [Colors.RED,Colors.YELLOW,Colors.BLUE] // any type,if there is an variable declared to be any,these variable is the same like the variable in JavaScript let root:any = document.getElementById('root') root.style.color = 'red' let element: (HTMLElement|null) = document.getElementById('root'); element.style.color = 'green'; // null undefined let x:number; x=1; x=undefined; x=null; let y:(number|null|undefined) y=1; y=null; y=undefined;
typescript中HTMLElement 和 Element的區(qū)別
你可能會(huì)注意到在ts中,通過(guò)document.getElementById()返回HTMLElement類型,而document.querySelect()返回Element類型。
那么兩者區(qū)別是什么呢?
Element 是一個(gè)通用性非常強(qiáng)的基類,所有 Document 對(duì)象下的對(duì)象都繼承自它。這個(gè)接口描述了所有相同種類的元素所普遍具有的方法和屬性。一些接口繼承自 Element 并且增加了一些額外功能的接口描述了具體的行為。
例如, HTMLElement 接口是所有 HTML 元素的基本接口,而 SVGElement 接口是所有 SVG 元素的基礎(chǔ)。大多數(shù)功能是在這個(gè)類的更深層級(jí)(hierarchy)的接口中被進(jìn)一步制定的。
探討
查資料的過(guò)程中我發(fā)現(xiàn),關(guān)于getElementById和querySelecter在MDN和ts的規(guī)范并不相同。
- ts中
let res =document.getElementById('test'); //HTMLElement let el = document.querySelector('# test'); // Element
- mdn中
querySelector,getElementById兩者均返回Element。
以上就是typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別的詳細(xì)內(nèi)容,更多關(guān)于TS類型HTMLElement Element的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
輕松理解Javascript變量的相關(guān)問(wèn)題
這篇文章主要給大家介紹了關(guān)于Javascript變量的相關(guān)問(wèn)題,文中給出了詳細(xì)的介紹和示例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友們下面來(lái)一起看看吧。2017-01-01小程序組件傳值和引入sass的方法(使用vant Weapp組件庫(kù))
這篇文章主要介紹了小程序組件傳值和引入sass使用vant Weapp組件庫(kù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11如何制作浮動(dòng)廣告 JavaScript制作浮動(dòng)廣告代碼
如果有一定的JavaScript基礎(chǔ),制作浮動(dòng)廣告還是比較容易的,利用閑暇時(shí)間簡(jiǎn)單制作了一個(gè),感興趣的朋友可以參考下哦2012-12-12JavaScript內(nèi)置對(duì)象之Array的使用小結(jié)
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象之Array的使用小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05Elasticsearch工具cerebro的安裝與使用教程
這篇文章主要介紹了Elasticsearch工具cerebro的安裝與使用教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03自定義javascript驗(yàn)證框架示例【附源碼下載】
這篇文章主要介紹了自定義javascript驗(yàn)證框架,結(jié)合實(shí)例形式分析了javascript正則驗(yàn)證相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-05-05Javascript 判斷 object 的特定類轉(zhuǎn)載
Javascript 判斷 object 的特定類轉(zhuǎn)載...2007-02-02