TypeScript快速學(xué)習(xí)入門基礎(chǔ)語法
TypeScript是微軟開發(fā)的開源編程語言,在JavaScript的基礎(chǔ)上拓展了一些語法,是 JavaScript 的一個(gè)超集。TypeScript的基礎(chǔ)語法,包括變量聲明、復(fù)合類型(數(shù)組和對(duì)象)、條件控制(if-else和switch)、循環(huán)(for和while)、函數(shù)(基礎(chǔ)和箭頭函數(shù),以及可選參數(shù))、面向?qū)ο筇匦裕杜e、接口、繼承)以及模塊開發(fā)中的導(dǎo)出和導(dǎo)入。
基礎(chǔ)語法
變量的聲明
TypeScript 在 JavaScript基礎(chǔ)上加入了靜態(tài)類型檢查功能,因此每一個(gè)變量都有固定的數(shù)據(jù)類型。
例如:let msg: string = 'hello world
let: 聲明變量的關(guān)鍵字,類似的 const代表常量
string:變量類型(拓展JavaScript的部分),其他常見類型如下:
number:整數(shù)、數(shù)值、浮點(diǎn)數(shù)、二進(jìn)制等
boolean:布爾類型
any:不確定,可是任意類型(相當(dāng)于跳過類型檢查)
union類型:例如let u: string|number|boolean = 'hello'可以是多個(gè)指定類型中的一種
object:對(duì)象
let p = {name:'jack', age: 21} console.log(p.name) console.log(p['name'])
復(fù)合類型
數(shù)組
let names: Array<string> = ['a','b'] let age: number[] = [1,2] console.log(names[1])
條件控制if-else
let num:number = 21 if(num%2===0){ // 推薦使用三個(gè)等于號(hào)判斷 console.log("ou") } else{ console.log("ji") }
TypeScript 中,空字符串、0、 null 、undefined等被解析為false ,它值則為 true
for&while循環(huán)
常規(guī)
for(let i=0;i<10;i++){ console.log(i) } let num=0 while(num<10){ console.log(num) }
遍歷數(shù)組
let names: Array<string> = ['a','b'] for(let i in names){ console.log(i+':' names[i]) // 這種方取出來的是下標(biāo) } for(let n of names){ console.log(n) // 這種方取出來的是一個(gè)個(gè)的元素 }
函數(shù)
基礎(chǔ)樣式
function sum(x: number, y: number): number { return x+y } let result = sum(1,2) console.log('1+2=' + result)
箭頭函數(shù)
let sayHi = (name: string) =>{ console.log('hi' + name) } sayHi('Jack')
可選參數(shù)
// 參數(shù)后加問號(hào)?,表示可選 function sayHi (name?: string) { name = name ? name: '無名氏' //判斷,沒有傳入?yún)?shù)就賦值 console.log('hi' + name) } sayHi('Jack') sayHi() // 上述可賦默認(rèn)值 類似python語法 function sayHi (name: string = 'Jack') //若不傳參 默認(rèn)為Jack
面向?qū)ο?/h2>
TypeScript 具備面向?qū)ο缶幊痰幕菊Z法,例如 interface 、 class 、 enum 等。也具備封裝、繼承、多態(tài)等面向?qū)ο蠡咎卣鳌?/p>
枚舉、接口
// 定義枚舉 不需要寫let和參數(shù)類型等 enum Msg{ HI = 'hi', HELLO = 'hello' } // 定義接口 interface A{ say(msg: Msg):void } // 實(shí)現(xiàn)接口 class B implements A{ say(msg:Msg):void{ console.log(msg + "ni hao") } } // 初始化對(duì)象 并調(diào)用方法 let a:A = new B() a.say(Msg.HI)
繼承
// 定義矩形類 class Rectangle{ // 定義成員變量 無需let private width: number private length: number //構(gòu)造函數(shù) 無需function constructor(width:number,length:number){ this.length=length this.width=width } public area():number{ return this.width*this.length } } // 定義正方形類,繼承于矩形類 class square extends Rectangle{ constructor(side: number){ super(side,side) //調(diào)用父類構(gòu)造函數(shù) } } let s = new square(10) console.log('正方形面積:'+ s.area())
模塊開發(fā)
應(yīng)用復(fù)雜時(shí)我們可以把通用功能抽取到單獨(dú)的 ts 文件,每個(gè)文件都是一個(gè)模塊 (module)模塊可以相互加載,提高代碼復(fù)用性。
導(dǎo)出
// 定義類,并通過export導(dǎo)出 export class Rectangle{ xxx } // 定義工具方法 export function area(rec:Rectangle) number{ xxx }
導(dǎo)入
// 通過import語法導(dǎo)入 from后寫地址 import {Rectangle, area} from '../rectangle' // 使用導(dǎo)入的類創(chuàng)建對(duì)象 let r = new Rectangle(10,20) // 調(diào)用導(dǎo)入的方法 console.log(area(r))
到此這篇關(guān)于TypeScript快速學(xué)習(xí)入門基礎(chǔ)語法的文章就介紹到這了,更多相關(guān)TypeScript入門基礎(chǔ)語法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Spartacus中navigation?item?reducer實(shí)現(xiàn)解析
這篇文章主要為大家介紹了Spartacus中navigation?item?reducer實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07TypeScript防抖節(jié)流函數(shù)示例詳解
這篇文章主要為大家介紹了TypeScript防抖節(jié)流函數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實(shí)現(xiàn)示例解析
這篇文章主要介紹了Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實(shí)現(xiàn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08typescript快速上手的基礎(chǔ)知識(shí)篇
靜態(tài)類型的typescript與傳統(tǒng)動(dòng)態(tài)弱類型語言javascript不同,在執(zhí)行前會(huì)先編譯成javascript,因?yàn)樗鼜?qiáng)大的type類型系統(tǒng)加持,能讓我們?cè)诰帉懘a時(shí)增加更多嚴(yán)謹(jǐn)?shù)南拗?。注意,它并不是一門全新的語言,所以并沒有增加額外的學(xué)習(xí)成本2022-12-12TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Typescript是必須要學(xué)習(xí)嗎?如何學(xué)習(xí)TS全棧開發(fā)
Typescript目前在前端,網(wǎng)站,小程序中的位置基本無可替代,同時(shí)也可以構(gòu)建完美的CLI應(yīng)用。在移動(dòng),桌面,后端方面,性能不是要求很高的情況下完全可以勝任,并且在區(qū)塊鏈,嵌入式,人工智能方面也開始茁壯成長(zhǎng)。2022-12-12詳解什么是TypeScript里的Constructor?signature
這篇文章主要介紹了什么是TypeScript里的Constructor?signature詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07