一文了解TypeScript數(shù)據類型
基礎類型
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
可以作為值賦值給其他類型,因為這兩個可以看作其他類型的子類型
賦值的時候一定要根據定義的數(shù)據類型做賦值,否則會有如下提示錯誤
- 聲明變量時,類型與值不符
- 為變量重新賦值時,類型與值不符
any類型
有的時候我們無法確定變量類型,我們可以將其指定類型為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); // 可以調用任意方法 userName.setName('David'); userName.setName('David').sayHello(); userName.name.setFirstName('David');
數(shù)組
我們可以指定數(shù)組內元素類型
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]
我們在賦值時一定要根據類型順序填寫
元素能多不能少
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)
Interface
- 接口可以理解為綱領、比較抽象,其中不會規(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'
函數(shù)
ts中函數(shù)可以定義返回值類型
const value=():number=>{ return 1 } const val=():string=>{ return 1 }
類型自推
在我們定義變量時沒有賦予類型,則會按照值做推論
let value=5555 value='string'
聯(lián)合類型(二選一甚至多選一)
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 進行斷言
- 斷言不是類型轉換,斷言后只是告訴編譯器變量的類型,后面使用變量時就有提示了
- 如果不添加斷言,使用某個類型的方式就會報錯
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
class:類,ES6語法,是js面向對象晉升,class 僅僅是語法糖,底層仍然是基于函數(shù)和原型實現(xiàn)的
- 類:定義了一切事物抽象特點,像是一張藍圖、一張圖紙
- 對象:類的實例
- 三大特征:封裝、繼承、多態(tài)
三個修飾符,可以控制類中成員的訪問級別:
- Public:修飾的屬性或方法是公有的,任何地方都可以訪問,默認行為
- Protected:修飾的屬性或者方法是受保護的,只有類本身和其子類可以訪問
- Private:修飾的屬性或者方法是私有的,只有類內部可以訪問呢
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)類型用于取值被限定在一定范圍內的場景
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ù)據類型的文章就介紹到這了,更多相關TypeScript數(shù)據類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
javascript中的Function.prototye.bind
這篇文章主要介紹了javascript中的Function.prototye.bind的相關資料,需要的朋友可以參考下2015-06-06原生js與jQuery實現(xiàn)簡單的tab切換特效對比
這篇文章主要通過原生js與jQuery實現(xiàn)簡單的tab切換特效對比介紹了js與jQuery之間的區(qū)別,有需要的小伙伴可以參考下。2015-07-07javascript前端和后臺進行數(shù)據交互方法示例
這篇文章主要介紹了javascript前端和后臺進行數(shù)據交互方法示例,文章通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-08-08echarts實現(xiàn)地圖定時切換散點與多圖表級聯(lián)聯(lián)動詳解
這篇文章主要給大家介紹了關于echarts實現(xiàn)地圖定時切換散點與多圖表級聯(lián)聯(lián)動的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-08-08