广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文了解TypeScript数据类型
  • 705

0
分享到

一文了解TypeScript数据类型

2024-04-02 19:04:59 705人浏览 泡泡鱼
摘要

目录基础类型any类型数组元组Interface函数类型自推联合类型（二选一甚至多选一）class枚举基础类型 ts中支持更多的类型 let age: number = 10 /

基础类型

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 可以作为值赋值给其他类型，因为这两个可以看作其他类型的子类型

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

  • 声明变量时，类型与值不符
  • 为变量重新赋值时，类型与值不符

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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 的声明像 class，成员更像字面量对象，而不是 class

作用：

  • 对对象的形状(shape)进行描述
  • Duck Typing（鸭子类型）

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

在这里插入图片描述

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

  • 类：定义了一切事物抽象特点，像是一张蓝图、一张图纸
  • 对象：类的实例
  • 三大特征：封装、继承、多态

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

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

在这里插入图片描述

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一文了解TypeScript数据类型

本文链接: https://www.lsjlt.com/news/129953.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 一文了解TypeScript数据类型
    目录基础类型any类型数组元组Interface函数类型自推联合类型（二选一甚至多选一）class枚举基础类型 ts中支持更多的类型 let age: number = 10 /...
    99+
    2022-11-12
  • 一篇文章带你了解JavaSE的数据类型
    目录前言Java类型汇总整型变量-int\长整型变量-long\短整形变量-short浮点型变量-double\float字符类型变量-char字节类型变-byte布尔类型变量-bo...
    99+
    2022-11-12
  • 一文了解什么是TypeScript?
    目录1.JavaScript的问题2.TypeScript的优势3.TypeScript的缺点4.TypeScript的运行环境5.作用域问题前言： TypeScript是Java...
    99+
    2022-11-12
  • TypeScript基本数据类型实例详解
    目录TypeScript 介绍类型分配类型推导数组元组objectnull 和 undefined特殊类型anyunknownnevervoidTypeScript 介绍 Type...
    99+
    2023-01-30
    TypeScript 基本数据类型 TypeScript 数据类型
  • TypeScript高级数据类型实例详解
    目录TypeScript 介绍函数枚举联合类型类型别名和接口类型别名接口交叉类型类TypeScript 介绍 TypeScript 是 JavaScript 的超集，提供了 Jav...
    99+
    2023-01-30
    TypeScript 高级数据类型 TypeScript 数据类型
  • 一文带你了解Java中基本数据类型的包装类
    这篇文章将为大家详细讲解有关一文带你了解Java中基本数据类型的包装类，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。Java是面向对象的编程语言，包装类的出现更好的体现这一思想。 其次，包装...
    99+
    2023-05-31
    java 基本数据类型 包装类
  • TypeScript数据类型的作用
    本篇内容介绍了“TypeScript数据类型的作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！目录基础类型any类型数组元组Interfa...
    99+
    2023-06-20
  • 【JAVA】一文带你了解java的数据类型与变量
    作者主页：paper jie的博客 本文作者：大家好，我是paper jie，感谢你阅读本文，欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏，本专栏是针对于大学生，编程小白精心打造的。笔者用重金(时间和精力)打造，将jav...
    99+
    2023-09-04
    java 开发语言
  • 深入了解TypeScript中的映射类型
    目录1. 基本概念（1）索引访问类型（2）索引签名（3）联合类型（4）keyof 类型运算符（5）元组类型（6）条件类型2. 映射类型（1）初体验（2）概念（3）实例3. 实用程序中...
    99+
    2022-11-13
    TypeScript映射类型 TypeScript映射
  • ASP 数据类型有哪些？了解一下！
    ASP（Active Server Pages）是一种服务器端脚本语言，用于创建动态网页。在 ASP 中，数据类型是一个非常重要的概念，因为它们决定了变量和表达式的行为。本文将讨论 ASP 中的数据类型以及如何使用它们。 VBScrip...
    99+
    2023-07-10
    数据类型 http npm
  • 深入了解TypeScript中常用类型的使用
    目录原始类型：string,number,boolean数组（Arrays）Any类型在变量上使用类型注释函数（Functions）返回类型注释（Return Type Annota...
    99+
    2022-11-13
  • TypeScript如何自定义数据类型
    这篇文章主要介绍“TypeScript如何自定义数据类型”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“TypeScript如何自定义数据类型”文章能帮助大家解决问题。TypeScript 类型系统和...
    99+
    2023-07-04
  • 详解TypeScript使用及类型声明文件
    目录简介Script 与 Vue3defineProps 与 TypescriptdefineEmits 与 Typescriptref 与 Typescriptcomputed 与...
    99+
    2022-11-13
  • 一文详解Golang中的切片数据类型
    目录含义定义三个要素切片与数组的区别示例代码切片内存分布切片定义分类数组生成切片示例代码切片索引直接声明切片定义语法代码示例使用make定义切片常用操作长度计算容量计算判断是否为空切...
    99+
    2022-11-11
  • TypeScript中的函数和类你了解吗
    目录函数作为参数定义函数函数参数的类型可选类型参数默认值剩余参数this的默认推导函数重载类初始化继承多态成员修饰符总结函数 以下声明了一个函数类型，通过type来定义类型别名，vo...
    99+
    2022-11-13
  • Typescript中的数据类型实例总结
    目录是什么有哪些booleannumberstringarraytupleenumanynull和undefinedvoidneverobject总结是什么 typescript和j...
    99+
    2022-11-13
  • Typescript中数据类型的示例分析
    这篇文章将为大家详细讲解有关Typescript中数据类型的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。是什么typescript和javascript几乎一样，拥有相同的数据类型，另外在jav...
    99+
    2023-06-29
  • TypeScript类型系统自定义数据类型教程示例
    目录TypeScript 类型系统和自定义数据类型什么是类型系统函数类型类型别名可选参数默认参数函数重载接口类型可选属性只读属性接口扩展多重接口声明接口的索引签名用接口描述函数类类型...
    99+
    2022-11-16
    TypeScript自定义数据类型 TypeScript类型系统
  • ASP并发数据类型：您需要了解的一切！
    在ASP中，处理并发请求是很常见的需求。并发请求是指多个用户同时访问同一个页面或资源的情况。如果不加以控制，可能会导致数据的混乱和错误。为了解决这个问题，ASP提供了一系列的并发数据类型，本文将为您介绍并演示这些类型。 一、Applica...
    99+
    2023-11-04
    并发 数据类型 教程
  • Typescript中函数类型及示例详解
    目录常见写法 可选参数 默认参数 剩余参数数组类型的剩余参数 元组类型的剩余参数解构参数重载函数 构造函数类型字面量不给参数定义类型...
    99+
    2023-01-05
    Typescript中函数类型 Typescript函数类型 Typescript数据类型
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作