您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“TypeScript數(shù)據(jù)類型的作用”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
基礎類型
any類型
數(shù)組
元組
Interface
函數(shù)
類型自推
聯(lián)合類型(二選一甚至多選一)
class
枚舉
ts中支持更多的類型
let age: number = 10 // Number let firstName: string = '涼宸' // String let lastName: string = '涼宸' // String let isMary: boolean = true // boolean let unde: undefined = undefined // undefined let nu: null = null // null
undefined
和 null
可以作為值賦值給其他類型,因為這兩個可以看作其他類型的子類型
賦值的時候一定要根據(jù)定義的數(shù)據(jù)類型做賦值,否則會有如下提示錯誤
聲明變量時,類型與值不符
為變量重新賦值時,類型與值不符
有的時候我們無法確定變量類型,我們可以將其指定類型為any
當我們賦值給其any類型后,可以為其賦任意值,且不會報錯
let isAny:any='任意類型any' isAny=520 isAny=true isAny=null
但是為了避免類型不明確,我們還是盡量少使用any
any 類型的特點
允許賦值為任意類型
可以訪問任意屬性和方法
let userName: any = '涼宸'; // 可以訪問任意屬性 console.log(userName.name); console.log(userName.name.firstName); // 可以調(diào)用任意方法 userName.setName('David'); userName.setName('David').sayHello(); userName.name.setFirstName('David');
我們可以指定數(shù)組內(nèi)元素類型
let ages: number[] = [5, 20, 13, 14] let names: string[] = ['涼宸','路飛', '明世隱', '李楊勇']
類數(shù)組:
類數(shù)組是不會擁有數(shù)組擁有的方法,tsc能夠自動識別兩者
let arguments=[555,555,55] function lei(){ let arr:number=arguments }
基本類似于數(shù)組,但是類型可以是多種
let arr:[number,string,boolean]=[520,'涼宸',true]
我們在賦值時一定要根據(jù)類型順序填寫
元素能多不能少
let arr:[number,string,boolean]=[520,'涼宸',true] arr.push('b') // 可以 arr.push(4) // 可以 arr.push(true) // 可以 console.log(arr)
let arr:[number,string]=[520,'涼宸'] arr.push('b') // 可以 arr.push(4) // 可以 arr.push(true) // 不可以 console.log(arr)
接口可以理解為綱領、比較抽象,其中不會規(guī)定的具體的行為,也就是說接口中,我們只定義有屬 性,哪些方法以及屬性的類型,方法的抽象,不會為屬性賦值,也不會定義方法的實現(xiàn)
類的話一般屬性要賦值,方法也要有實現(xiàn)
Interface 的聲明像 class,成員更像字面量對象,而不是 class
作用:
對對象的形狀(shape)進行描述
Duck Typing(鴨子類型)
interface Point{ userName:string|number password:number } // 此時執(zhí)行tsc不會解析出相應的js代碼,因為此類型是ts特有的,只是表示約束
interface Point{ userName:string|number password:number } let value:Point={ userName:'admin@qq.com', password:123456 } let val:Point={ userName:55555, password:123456 } // 此時兩種都符合,在執(zhí)行tsc // 只是出現(xiàn)如下代碼,沒有任何約束js var value = { userName: 'admin@qq.com', password: 123456 }; var val = { userName: 55555, password: 123456 };
可選屬性 ?
創(chuàng)建 IPerson 接口類型變量時,接口中聲明的屬性,變量賦值時也必須有,否則就會報錯
但我們可以設置某個屬性為可選屬性,在創(chuàng)建變量時,就可以選擇賦值
interface Point{ userName:string|number password:number, email?:string } let value:Point={ userName:'admin@qq.com', password:123456 } let val:Point={ userName:55555, password:123456 }
只讀屬性readonly
:
interface Point{ userName:string|number password:number, email?:string, readonly address:string } let value:Point={ userName:'admin@qq.com', password:123456, address:'保定' } let val:Point={ userName:55555, password:123456, address:'北京' } value.password=65975222 value.address='kkk'
ts中函數(shù)可以定義返回值類型
const value=():number=>{ return 1 } const val=():string=>{ return 1 }
在我們定義變量時沒有賦予類型,則會按照值做推論
let value=5555 value='string'
let value:string|number value='涼宸' value=520 value=true
類型斷言:
function get(data:string|number):number{ const str=data as string if(str.length){ return str.length }else { const num = data as number return num.toString().length } } console.log(get('涼宸')); console.log(get(520));
使用 as 進行斷言
斷言不是類型轉(zhuǎn)換,斷言后只是告訴編譯器變量的類型,后面使用變量時就有提示了
如果不添加斷言,使用某個類型的方式就會報錯
type guard:
type guard
不是一種類型,而是一種能夠確認具體類型的一種機制
function get(data:string|number):number{ if(typeof data==='string'){ return data.length }else { return data.toString().length } } console.log(get('涼宸')); console.log(get(520));
class:類,ES6語法,是js面向?qū)ο髸x升,class 僅僅是語法糖,底層仍然是基于函數(shù)和原型實現(xiàn)的
類:定義了一切事物抽象特點,像是一張藍圖、一張圖紙
對象:類的實例
三大特征:封裝、繼承、多態(tài)
三個修飾符,可以控制類中成員的訪問級別:
Public:修飾的屬性或方法是公有的,任何地方都可以訪問,默認行為
Protected:修飾的屬性或者方法是受保護的,只有類本身和其子類可以訪問
Private:修飾的屬性或者方法是私有的,只有類內(nèi)部可以訪問呢
class Person { public name:string protected age:number private address:string constructor(name:string,age:number,address:string){ this.name=name this.age=age this.address=address } speak(){ console.log(`Person:${this.name}---${this.age}---${this.address}`) } } const Children = new Person('涼宸',20,'保定') Children.speak() // 可以正常輸出
class Person { public name:string protected age:number private address:string constructor(name:string,age:number,address:string){ this.name=name this.age=age this.address=address } speak(){ console.log(`Person:${this.name}---${this.age}---${this.address}`) } } class child extends Person{ say(){ console.log(`child:${this.name}---${this.age}`) } } // const Children = new Person('涼宸',20,'保定') // Children.speak() const childs = new child('涼宸',20,'保定') childs.say()
運行時也是報錯的
class Person { public name:string protected age:number private address:string constructor(name:string,age:number,address:string){ this.name=name this.age=age this.address=address } speak(){ console.log(`Person:${this.name}---${this.age}---${this.address}`) } } class child extends Person{ say(){ console.log(`child:${this.name}---${this.age}`) } } // const Children = new Person('涼宸',20,'保定') // Children.speak() const childs = new child('涼宸',20,'保定') childs.say()
class Person { public name:string protected age:number private address:string constructor(name:string,age:number,address:string){ this.name=name this.age=age this.address=address } speak(){ console.log(`Person:${this.name}---${this.age}---${this.address}`) } } class child extends Person{ say(){ console.log(`child:${this.name}---${this.age}`) } } const Children = new Person('涼宸',20,'保定') Children.speak() console.log(Children.address); console.log(Children.age); // const childs = new child('涼宸',20,'保定') // childs.say()
枚舉(Enum)類型用于取值被限定在一定范圍內(nèi)的場景
enum Week { SUNDAY = '周日', MONDAY = '周一', TUESDAY = '周二', WEDNESDAY = '周三', THURSDAY = '周四', FRIDAY = '周五', SATURDAY = '周六' } function getProgramme(date: Week): string { if (date === Week.SUNDAY) { return '周日休閑娛樂' } else if (date === Week.MONDAY) { return '周一做博文' } else if (date === Week.TUESDAY) { return '周二沖刺' } else if (date === Week.WEDNESDAY) { return '周三繼續(xù)奮斗' } else if (date === Week.THURSDAY) { return '周四發(fā)新文' } else if (date === Week.FRIDAY) { return '周五準備休息' } else { return '周六睡覺' } } console.log(getProgramme(Week.THURSDAY));
“TypeScript數(shù)據(jù)類型的作用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。