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