文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一文了解TypeScript数据类型

2024-04-02 19:55

关注

基础类型

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

undefinednull 可以作为值赋值给其他类型,因为这两个可以看作其他类型的子类型

赋值的时候一定要根据定义的数据类型做赋值,否则会有如下提示错误

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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');

数组

我们可以指定数组内元素类型


let ages: number[] = [5, 20, 13, 14]
let names: string[] = ['凉宸','路飞', '明世隐', '李杨勇']

在这里插入图片描述

在这里插入图片描述

类数组:

类数组是不会拥有数组拥有的方法,tsc能够自动识别两者


let arguments=[555,555,55]

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

在这里插入图片描述

元组

基本类似于数组,但是类型可以是多种


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

作用:


interface Point{
  userName:string|number
  password:number
}  // 此时执行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
}  // 此时两种都符合,在执行tsc


// 只是出现如下代码,没有任何约束js
var value = {
    userName: 'admin@qq.com',
    password: 123456
};
var val = {
    userName: 55555,
    password: 123456
};

可选属性 ?

创建 IPerson 接口类型变量时,接口中声明的属性,变量赋值时也必须有,否则就会报错

但我们可以设置某个属性为可选属性,在创建变量时,就可以选择赋值


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中函数可以定义返回值类型


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

在这里插入图片描述

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 仅仅是语法糖,底层仍然是基于函数和原型实现的

三个修饰符,可以控制类中成员的访问级别:


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 '周三继续奋斗'
  }
  else if (date === Week.THURSDAY) {
  return '周四发新文'
  }
  else if (date === Week.FRIDAY) {
  return '周五准备休息'
  }
  else {
  return '周六睡觉'
  }
  }
  console.log(getProgramme(Week.THURSDAY));

在这里插入图片描述

到此这篇关于一文了解TypeScript数据类型的文章就介绍到这了,更多相关TypeScript数据类型内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯