前端開(kāi)發(fā)TypeScript入門基礎(chǔ)教程
TYPESCRIPT
TypeScript是一種由微軟開(kāi)發(fā)的開(kāi)源、跨平臺(tái)的編程語(yǔ)言。它是JavaScript的超集,最終會(huì)被編譯為JavaScript代碼。
可以看看官網(wǎng)的5分鐘 TypeScript Tooling in 5 minutes
安裝 TypeScript
命令行運(yùn)行如下命令,全局安裝 TypeScript:
npm install -g typescript
安裝完成后,在控制臺(tái)運(yùn)行如下命令,檢查安裝是否成功:
tsc -V
第一個(gè)ts程序
新建文件 test1.js
const str:string ="hello world TS"; console.log(str)
代碼是寫好了,想要運(yùn)行還得將ts編譯為js,使用 tsc 命令,會(huì)在同層生成 js文件
tsc test1.ts
執(zhí)行 node test1.js
PS E:\mysjc\ts> node test1.js hello world TS PS E:\mysjc\ts>
恭喜你已經(jīng)入門ts,回過(guò)頭再來(lái)看看 ts和js有什么區(qū)別,細(xì)心的你已經(jīng)發(fā)現(xiàn) ts 多了個(gè)類型,那有人就會(huì)問(wèn)了什么是類型? 有哪些類型?
- 類型是一組關(guān)鍵字,聲明一個(gè)標(biāo)識(shí)符的基本數(shù)據(jù)類型或者抽象數(shù)據(jù)結(jié)構(gòu)類型
- 類型決定了內(nèi)存到底要存什么樣的數(shù)據(jù)
基礎(chǔ)類型
string
使用單引號(hào) ’ 或雙引號(hào) " 來(lái)表示字符串類型。反引號(hào) ` 來(lái)定義多行文本和內(nèi)嵌表達(dá)式
const str1: string = "hello world"; const str2: string = 'ts'; const str3: string = `年少不知富婆好,${ str1 } ${ str2 } `;
number
const num1: number = 3;// 十進(jìn)制 const num2: number = 3.3; const num3: number = 3.333; const num4: number = 0b11;// 二進(jìn)制 const num5: number = 0o12;// 八進(jìn)制 const num6: number = 0xa; // 十六進(jìn)制
boolean
邏輯值:true 和 false
const bol1: boolean=false; const bol2: boolean=true;
數(shù)組
- 元素類型后面接上[]
- Array<元素類型>
const list1: number[]=[1,2,3]; // 可以試試 list1[0]='2',會(huì)發(fā)生什么。 const list2: Array<number>=[1,2,3];
枚舉
enum Animal { Dog, Cat, Pig } let zhangsan: Animal = Animal.Dog console.log(zhangsan, Animal.Cat, Animal.Pig) ;// 0 1 2
輸出0,1,2,我想讓張三變成狗,可以直接賦值,這下張三就成真的狗了。
enum Animal { Dog="狗", Cat="貓", Pig="豬" } let zhangsan: Animal = Animal.Dog console.log(zhangsan, Animal.Cat, Animal.Pig) ;// 狗 貓 豬
any
可以是任意類型
let a: any = [1,undefined,null,'string',true,false]; a[0]='s'; console.log(a); //[ 's', undefined, null, 'string', true, false ] let b: any=1; b='wc'; b=null; console.log(b); //null
object
參數(shù)就是 object 類型
// The parameter's type annotation is an object type function printCoord(pt: { x: number; y: number }) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } printCoord({ x: 3, y: 7 });
object 類型還可以指定屬性是否可選
function printName(obj: { first: string; last?: string }) { console.log(`${obj.first}-${obj.last}`); } printName({ first: "Bob" }); //Bob-undefined printName({ first: "Alice", last: "Alisson" }); //Alice-Alisson
如果可選參數(shù)不傳遞,獲得的值 undefined,在使用之前進(jìn)行檢查即可。
function printName(obj: { first: string; last?: string }) { // obj.last.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined if (obj.last !== undefined) { console.log("if", obj.last.toUpperCase()); } console.log(obj.last?.toUpperCase()); } printName({ first: "Bob" }); // undefined /** * if AA * AA */ printName({ first: "Bob", last: "aa" });
Union 聯(lián)合類型
聯(lián)合類型是由兩個(gè)或多個(gè)其他類型組成的類型
/** * * @param id 類型只能傳遞 number 或者 string */ function work(id: number | string) { console.log("上班:" + id); } work(101);//上班:101 work("202");// 上班:202 // work(false);
如果聯(lián)合的每個(gè)成員都有效,便可以做一些有意思的事情
/** * @param id 類型只能傳遞 number 或者 string */ function work(id: number | string) { const salary: number = 300; if (typeof id === "string") { console.log(`${id}上班,可獲得薪水$${salary}`); } else { console.log(`${id}上班,可獲得薪水$${salary * 2}`); } } work(101); //101上班,可獲得薪水$600 work("202"); //202上班,可獲得薪水$300
Type Assertions 類型斷言
類型斷言好比其它語(yǔ)言里的類型轉(zhuǎn)換,但是不進(jìn)行特殊的數(shù)據(jù)檢查和解構(gòu)。 它沒(méi)有運(yùn)行時(shí)的影響,只是在編譯階段起作用
- <類型>值
- 值 as 類型
console.log(1 as string) console.log(<string>1 )
類型推斷
TS會(huì)在沒(méi)有明確的指定類型的時(shí)候推測(cè)出一個(gè)類型
- 定義變量時(shí)賦值了, 推斷為對(duì)應(yīng)的類型
- 定義變量時(shí)沒(méi)有賦值, 推斷為any類型
let a = 1; a = '11';//不能將類型“string”分配給類型“number” let b; b = 1; b = '1'; b = null;
以上就是前端開(kāi)發(fā)TypeScript入門基礎(chǔ)教程的詳細(xì)內(nèi)容,更多關(guān)于TypeScript入門基礎(chǔ)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能(動(dòng)態(tài)設(shè)置秒殺時(shí)間)
這篇文章主要介紹了JS實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能(動(dòng)態(tài)設(shè)置秒殺時(shí)間),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問(wèn)題
今天小編就為大家分享一篇解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12JavaScript原生對(duì)象之Number對(duì)象的屬性和方法詳解
這篇文章主要介紹了JavaScript原生對(duì)象之Number對(duì)象的屬性和方法詳解,本文講解了創(chuàng)建 Number 對(duì)象的語(yǔ)法、MAX_VALUE、MIN_VALUE、NaN等屬性或方法,需要的朋友可以參考下2015-03-03Javascript中valueOf與toString區(qū)別淺析
Javascript中valueOf與toString區(qū)別淺析,需要的朋友可以參考一下2013-03-03js中刪除數(shù)組中的某一元素實(shí)例(無(wú)下標(biāo)時(shí))
下面小編就為大家?guī)?lái)一篇js中刪除數(shù)組中的某一元素實(shí)例(無(wú)下標(biāo)時(shí))。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02javascript進(jìn)行數(shù)組追加方法小結(jié)
javascript中給數(shù)組加元素是一個(gè)非常簡(jiǎn)單的問(wèn)題,javascript本身就提供了大量這類函數(shù),我們可以使用js自帶函數(shù)快速給數(shù)組增加元素了,本文就javascript進(jìn)行數(shù)組追加的方法做出如下小結(jié)。2014-06-06JS實(shí)現(xiàn)數(shù)組扁平化的方法總結(jié)
數(shù)組扁平化相信不少朋友在一些面試中被問(wèn)到過(guò),這在我們?nèi)粘>幊讨幸彩且粋€(gè)常規(guī)操作,它需要我們將一個(gè)多維數(shù)組轉(zhuǎn)化成一個(gè)一維數(shù)組,所以,借著這篇文章,我們今天就一起來(lái)匯總一下幾種數(shù)組扁平化的方式,需要的朋友可以參考下2024-02-02基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
下面小編就為大家?guī)?lái)一篇基于bootstrap-datetimepicker.js不支持IE8的快速解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11