一文了解TypeScript數據類(lèi)型

目錄

基礎類(lèi)型

ts中支持更多的類(lèi)型

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 可以作為值賦值給其他類(lèi)型，因為這兩個(gè)可以看作其他類(lèi)型的子類(lèi)型

賦值的時(shí)候一定要根據定義的數據類(lèi)型做賦值，否則會(huì )有如下提示錯誤

• 聲明變量時(shí)，類(lèi)型與值不符
• 為變量重新賦值時(shí)，類(lèi)型與值不符

any類(lèi)型

有的時(shí)候我們無(wú)法確定變量類(lèi)型，我們可以將其指定類(lèi)型為any

當我們賦值給其any類(lèi)型后，可以為其賦任意值，且不會(huì )報錯

let isAny:any='任意類(lèi)型any'
isAny=520
isAny=true
isAny=null

但是為了避免類(lèi)型不明確，我們還是盡量少使用any

any 類(lèi)型的特點(diǎn)

• 允許賦值為任意類(lèi)型
• 可以訪(fǎng)問(wèn)任意屬性和方法

let userName: any = '涼宸';
// 可以訪(fǎng)問(wèn)任意屬性
console.log(userName.name);
console.log(userName.name.firstName);
// 可以調用任意方法
userName.setName('David');
userName.setName('David').sayHello();
userName.name.setFirstName('David');

數組

我們可以指定數組內元素類(lèi)型

let ages: number[] = [5, 20, 13, 14]
let names: string[] = ['涼宸','路飛', '明世隱', '李楊勇']

類(lèi)數組：

類(lèi)數組是不會(huì )擁有數組擁有的方法，tsc能夠自動(dòng)識別兩者

let arguments=[555,555,55]

function lei(){
  let arr:number=arguments
}

元組

基本類(lèi)似于數組，但是類(lèi)型可以是多種

let arr:[number,string,boolean]=[520,'涼宸',true]

我們在賦值時(shí)一定要根據類(lèi)型順序填寫(xiě)

元素能多不能少

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

• 接口可以理解為綱領(lǐng)、比較抽象，其中不會(huì )規定的具體的行為，也就是說(shuō)接口中，我們只定義有屬 性，哪些方法以及屬性的類(lèi)型，方法的抽象，不會(huì )為屬性賦值，也不會(huì )定義方法的實(shí)現
• 類(lèi)的話(huà)一般屬性要賦值，方法也要有實(shí)現
• Interface 的聲明像 class，成員更像字面量對象，而不是 class

作用：

• 對對象的形狀(shape)進(jìn)行描述
• Duck Typing（鴨子類(lèi)型）

interface Point{
  userName:string|number
  password:number
}  // 此時(shí)執行tsc不會(huì )解析出相應的js代碼，因為此類(lèi)型是ts特有的，只是表示約束

interface Point{
  userName:string|number
  password:number
}

let value:Point={
  userName:'admin@qq.com',
  password:123456
}

let val:Point={
  userName:55555,
  password:123456
}  // 此時(shí)兩種都符合，在執行tsc


// 只是出現如下代碼，沒(méi)有任何約束js
var value = {
    userName: 'admin@qq.com',
    password: 123456
};
var val = {
    userName: 55555,
    password: 123456
};

可選屬性 ?

創(chuàng )建 IPerson 接口類(lèi)型變量時(shí)，接口中聲明的屬性，變量賦值時(shí)也必須有，否則就會(huì )報錯

但我們可以設置某個(gè)屬性為可選屬性，在創(chuàng )建變量時(shí)，就可以選擇賦值

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中函數可以定義返回值類(lèi)型

const value=():number=>{
  return 1
}

const val=():string=>{
  return 1
}

類(lèi)型自推

在我們定義變量時(shí)沒(méi)有賦予類(lèi)型，則會(huì )按照值做推論

let value=5555

value='string'

聯(lián)合類(lèi)型（二選一甚至多選一）

let value:string|number
value='涼宸'
value=520
value=true

類(lèi)型斷言:

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 進(jìn)行斷言
• 斷言不是類(lèi)型轉換，斷言后只是告訴編譯器變量的類(lèi)型，后面使用變量時(shí)就有提示了
• 如果不添加斷言，使用某個(gè)類(lèi)型的方式就會(huì )報錯

type guard：

type guard不是一種類(lèi)型，而是一種能夠確認具體類(lèi)型的一種機制

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：類(lèi)，ES6語(yǔ)法，是js面向對象晉升，class 僅僅是語(yǔ)法糖，底層仍然是基于函數和原型實(shí)現的

• 類(lèi)：定義了一切事物抽象特點(diǎn)，像是一張藍圖、一張圖紙
• 對象：類(lèi)的實(shí)例
• 三大特征：封裝、繼承、多態(tài)

三個(gè)修飾符，可以控制類(lèi)中成員的訪(fǎng)問(wèn)級別：

• Public：修飾的屬性或方法是公有的，任何地方都可以訪(fǎng)問(wèn)，默認行為
• Protected：修飾的屬性或者方法是受保護的，只有類(lèi)本身和其子類(lèi)可以訪(fǎng)問(wèn)
• Private：修飾的屬性或者方法是私有的，只有類(lèi)內部可以訪(fǎng)問(wèn)呢

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()

運行時(shí)也是報錯的

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）類(lèi)型用于取值被限定在一定范圍內的場(chǎng)景

enum Week {
  SUNDAY = '周日',
  MONDAY = '周一',
  TUESDAY = '周二',
  WEDNESDAY = '周三',
  THURSDAY = '周四',
  FRIDAY = '周五',
  SATURDAY = '周六'
}
function getProgramme(date: Week): string {
  if (date === Week.SUNDAY) {
  return '周日休閑娛樂(lè )'
  } else if (date === Week.MONDAY) {
  return '周一做博文'
  } else if (date === Week.TUESDAY) {
  return '周二沖刺'
  }
  else if (date === Week.WEDNESDAY) {
  return '周三繼續奮斗'
  }
  else if (date === Week.THURSDAY) {
  return '周四發(fā)新文'
  }
  else if (date === Week.FRIDAY) {
  return '周五準備休息'
  }
  else {
  return '周六睡覺(jué)'
  }
  }
  console.log(getProgramme(Week.THURSDAY));

到此這篇關(guān)于一文了解TypeScript數據類(lèi)型的文章就介紹到這了,更多相關(guān)TypeScript數據類(lèi)型內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！