typescript类型详解

因为介绍了ts的全部类型,所以比较长,各位可以通过目录选择性观看

    • typescript类型概述
      • typescript 类型注解概念-->监测类型变化
    • ts类型注解语法
    • ts常用类型
        • 原始类型
        • 对象类型
            • 对象类型_数组类型
        • ts新增,联合类型
        • ts函数类型
            • ts 函数类型 void
            • ts 函数类型可选参数
        • ts 对象类型
            • ts 可选对象属性
        • ts 接口
        • ts 元组类型
        • ts 字面量类型
        • ts 枚举类型
        • ts any类型
    • ts类型别名

typescript类型概述

typescript是JavaScript的超集,ts提供了js所有的功能.并且额外增加了:类型系统

  • 所有的js代码都是ts代码
  • js有类型(比如,number/string等),但是js不会检查变量的类型是否发生变化,而ts会检查.ts类型系统的主要优势为:可以显示标记出代码中的意外行为,从而降低发生错误的可能性

typescript 类型注解概念–>监测类型变化

为什么要有类型注解?
如下js代码
在这里插入图片描述
这段代码在编译器中是不会报错的,尽管很明显,age被赋值了字符串,但字符串并没有toFixed方法,但因为js不会检查变量的类型是否发生变化,所以这里编译器不会报错,但是当我们在未来运行了这段代码,则会报错typeError,变量类型错误在js代码中是很常见的
,所以在编码中我们应该尽量去避免修改变量的类型
在这里插入图片描述

但是js中并没有类型检查,光靠人脑去有意识避免这个问题是不现实的,这时候,就需要使用ts了,
ts会检查变量类型的改变 ,如下,当给定age是文本number类型变量时,当你试图给这个number类型变量赋值string时,ts会给出警告

tips: 这里ts报了两个错,上面那个错可以去看我的另一篇文章typescript错误代码 error TS2451: 无法重新声明块范围变量“age”。ts(2451)

在这里插入图片描述
这样,当我们在编码的同时,就能发现一些隐藏的bug,这就是上面所说的js不会检查变量的类型是否发生变化,而ts会检查.ts类型系统的主要优势为:可以显示标记出代码中的意外行为,从而降低发生错误的可能性

ts类型注解语法

示例代码

	let  age :number = 18
  • 说明:代码中的:number就是类型注解
  • 作用:为变量添加类型约束,比如,上述代码中,约定变量age的类型为number(数值类型)
  • 解释: 约定了什么类型,就只能给变量赋值该类型的值,否则就会报错

如下,我们约定变量age类型为numer,然后赋值为字符串’18’时,直接报错
在这里插入图片描述

ts常用类型

可以将ts中的常用基础类型细分为两类,1,js已有类型,2ts新增类型

  1. js已有类型
    - 原始类型 : number/string/boolean/null/undefined/symbol
    - 对象类型: boject(包括数组,对象,函数等对象)
  2. ts新增类型
    • 联合类型,自定义类型(类型别名),接口,元组,字面量类型,枚举,void,any等
原始类型

1 原始类型 number/string/boolean/null/undefined/symbol
特点,简单,这些类型完全按照js中类型的名称来书写
在这里插入图片描述
基础类型的使用很简单,在js中怎么用,在ts中就怎么用,是一模一样的

对象类型

对象类型, object(包括,数组,对象,函数等对象)
特点:对象类型,在ts中更加细化,每个具体的对象都有自己的类型语法

对象类型_数组类型

数组类型有两种写法
在这里插入图片描述
tips:第一种写法更加简单直观,更推荐第一种写法

当给number[]类型注解的number变量赋值非number的值时,ts会报错
在这里插入图片描述

ts新增,联合类型

上面的数组类型写法解决不了一个问题,因为有的数组中,既有字符串,又有数值类型,这个时候就需要用到ts的新增类型联合类型了
代码示例如下
在这里插入图片描述
tips | 竖线在ts中叫做联合类型,由两个或多个其它类型组成的类型,表示可以是这些类型中的任意一种,
注意:这是ts中联合类型的语法,只有一根竖线,不要和|| 或符号 搞混了

联合类型也有两种语法

let united1: (string | number)[] = [1, 'a', 2, 'b', 3, 'c']
let united2: Array<string | number> = [1, 'a', 2, 'b', 3, 'c']

依然推荐第一种,因为第一种写起来简单,不过我其实更喜欢第二种,因为酷~!!!

ts函数类型

函数的类型实际上指的是:函数参数和返回值的类型
为函数指定类型的两种方式:

  1. 单独指定参数,返回值的类型
  2. 同时指定参数,返回值的类型

语法:如下

	//单独指定参数,返回值的类型//直接在函数参数后面:添加函数类型,并在小括号后面添加返回值类型function add1(a: number, b: number): number {return a + b}//同时指定参数,返回值类型const add2: (a: number, b: number) => number = (a, b) => a + b//当函数作为表达式时,可以通过类似箭头函数形式的语法来为函数添加类型//注意,这种形式的写法,只适用于函数表达式//还有一件事,后面的函数表达式里参数名称不必和指定参数类型时的参数名称一致//也就是说下面这句表达式是成立的//const add: (a: number, b: number) => number = (aa, bb) => aa + bb//就是不易于理解

如下代码示例
当试图给代码传入非number参数时报错
在这里插入图片描述
如下,当试图返回字符串类型的值时报错

在这里插入图片描述

ts 函数类型 void

如果函数没有返回值,那么函数返回值类型为void
如下

 function sayHi(name: string): void {console.log(`Hi, ${name}`)
}
ts 函数类型可选参数

使用函数实现某个功能时,参数可以传也可以不传,这种情况下,在给函数参数指定类型时,就用到了可选参数了,
比如,数组的slice方法,可以clice()也可以slice(1),还可以slice(1,3)

function mySlice(start?: number, end?: number): void {console.log(`${start} ${end}`)
}
//可选参数:在可传可不传的参数名称后面添加?(问号)
//可选参数只能出现在参数列表的最后,也就是说,可选参数后面不能再出现必选参数

示例
在这里插入图片描述

ts 对象类型

js中的对象是由属性和方法构成的,而ts中对象的类型就是在描述对象的结构(有上面类型的属性和方法)
俺对象类型的写法

let person: { name: string, age: number, sayHi(name: string): void } = {name: 'Tom',age: 20,sayHi(name: string) {console.log(`Hi, ${name}`)}
}

tips
1. 直接使用{}来描述对象结构,属性采用属性名:类型的形式,方法采用方法名():返回值类型的形式
2. 如果方法有参数,就在方法名后面的小括号中指定参数类型(比如sayHi(name: string): void })
3. 在一行代码中指定对象的多个属性类型时,使用;(分号)来分隔,也可以使用逗号分隔,也可以使用换行符来分隔
4. 如果一行代码只指定一个属性类型.(通过换行来分割多个属性类型)可以去掉;分号
5. 方法的类型也可以使用箭头函数形式(比如{sayHi:()=>void})
示例如下

在这里插入图片描述

ts 可选对象属性

对象的属性和方法,也是可以可选的,此时就要用到可选属性了
可选属性的语法与函数的可选参数一致,都是使用?(问号)来修饰

let person: {name: string; age?: number //分号分隔sayHi(name: string): void //换行符分隔
} = {name: 'Tom', //当age类型前添加了问号时,缺少age属性赋值,并不会报错sayHi(name: string) {console.log(`Hi, ${name}`)}
}
ts 接口

当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到复用的目的
示例如下

当一个对象类型被多次使用时,可以看到,很明显代码有大量的冗余

let personTom: { name: string, age?: number, sayHi(name: string): void } = {name: 'Tom',sayHi(name: string) {console.log(`Hi, ${name}`)}
}
let personJack: { name: string, age?: number, sayHi(name: string): void } = {name: 'Tom',sayHi(name: string) {console.log(`Hi, ${name}`)}
}

这个时候可以将这个对象定义为接口,以进行复用,可以看到,这样代码就少了很多冗余

interface Person {name: stringage?: numbersayHi(name: string): void
}
let personTime: Person = {name: 'time',sayHi(name: string) {console.log(`hello ${name}`)}
}let personJohn: Person = {name: 'John',sayHi(name: string) {console.log(`hello ${name}`)}
}
  1. 使用interface关键字来声明接口
  2. 接口名称(比如,此处的Person)可以是任意合法变量名称
  3. 声明接口后,直接使用接口名称作为变量的类型
  4. 因为每一行只有一个属性类型,因此,属性类型后没有分号或逗号

因为篇幅原因,这里就简单介绍一下typescript 接口类型,更详细的可以看这里typescrip接口 interface详解,以及ts实现多态

ts 元组类型

元组概念:
在 TypeScript 中,元组可以通过在方括号内用逗号分隔的元素列表来定义。每个元素可以具有不同的类型,而元素的顺序是固定的。例如,我们可以定义一个元组类型来表示一个点的 x 和 y 坐标

场景如下
在地图中,使用经纬度坐标来标记位置信息,
可以使用数组来标记坐标,那么,该数组中就只有两个元素,并且这两个元素都是数值类型

let position: Array<number> = [12.3456, 23.4567]

但是使用数值数组的缺点是,不严谨,因为该类型的数组中可以出任意多哥数字,如下

let position: Array<number> = [12.3456, 23.4567, 34.5678, 45.6789, 56.7890]

这时候,我们应该用更好的方式:元组(tuple)
元组类型是另一种类型的数组,它确切的知道包含多少哥元素,以及特定索引对应的类型

let positionTuple: Array<number| number> = [12.3456, 23.4567];

tips: 元组类型可以确切的标记出有多少个元素,以及每个元素的类型

如下,当尝试给元组positionTuple赋值第三个数值时,报错
在这里插入图片描述
tips:别用Array<number| number>这种方式声明元组,有些问题,它不会检查元组长度,而且ts元组竟然可以使用push方法,离谱离谱
有时间研究一下,这篇文章不对此做过多介绍

ts 字面量类型

ts字面量介绍
TypeScript(TS)中的字面量类型是一种特殊的数据类型,用于表示固定的值或一组有限的值。这种类型在某些情况下非常有用,例如在定义枚举类型或特定于应用程序的常量时。

示例如下

let str1 = 'hello world'
const str2 = 'hello world'

在这里插入图片描述
上面的代码通过ts类型推论机制,我们可以看到,两个变量类型是不同的

  1. str1的变量类型是:string
  2. str2的变量类型是:‘hello world’

这是因为str1是一个变量,(let)可以是任意的string类型数据,额,可以是任意类型字符串,所以变量类型是string
而str2是一个常量(const) 它的值不能发生变化,所以只能是’hello world’,所以它的类型为’hello world’

也就是说,此处的’hello world’就是一个字面量类型,
某个特定的字符串可以作为ts中的类型, 如下

let str1 = 'hello world'
const str2 = 'hello world'
//将hello world作为类型
let str3: 'hello world' = 'hello world'

当然,除了字符串外,任意的js字面量都能当作类型使用

let str1 = 'hello world'
const str2 = 'hello world'let str3: 'hello world' = 'hello world'let age: 18 = 18
let isChild: [1, 2] = [1, 2]

篇幅原因只做介绍,更多内容请移步typescript字面量类型也是我写的

ts 枚举类型

理解了上面的字面量类型和联合类型,那么理解枚举类型就很简单了,因为枚举类型功能就类似于字面量类型+联合类型组合的功能,也表示一组明确的可选值

枚举:定义一组命名常量,它描述一个值,该值可以是这些命名常量中的一个

定义枚举
枚举类型在TypeScript中用 enum 关键字定义。下面是一个简单的枚举例子:
在这个例子中我定义了一个名为 Direction 的枚举类型,它有四个可能的值:Up,Down,Left 和 Right。我们可以使用这些值来表示一个角色在屏幕上的方向。

enum Direction {  Up,  Down,  Left,  Right  
}function move(direction: Direction) {  //... your code here  
}
  1. 使用enum关键字定义枚举
  2. 约定枚举名称,枚举中的值,枚举中的多个值之间通过,逗号隔开
  3. 枚举名称,以及枚举中的值应该由大写字母开头
  4. 枚举可以直接用作类型注解

篇幅原因只做简单介绍,更详细的讲解内容请移步ts 枚举类型原理及其应用详解

ts any类型

any 是一种特殊的数据类型,它表示任意类型。使用 any 类型声明的变量可以接受任何类型的值,包括字符串、数字、对象、函数等等。

使用 any 类型的变量会失去 TypeScript 的类型安全性,因此应该尽量避免使用。但在某些情况下,例如在处理外部数据或与非 TypeScript 代码交互时,any 类型可能会非常有用。

示例如下

下面段ts代码中,person对象使用any类型修饰,导致将person对象重新赋值为1时,ts放弃了做类型检查,这将可能导致未来代码出现异常错误
所以我们应当尽量避免使用any类型,除非临时使用any来避免书写很长很复杂的类型
其它隐式具有any类型的情况

  1. 声明变量不提供类型也不提供初始值,
  2. 函数参数不加类型

tips: 因为不推荐使用any所以上面两种情况都应该提供值,来避免隐式出现any类型
在这里插入图片描述

ts类型别名

类型别名(自定义类型):为任意类型起别名
使用场景:当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用

在这里插入图片描述

tips :
1. 使用type关键字来创建类型别名
2. 类型别名(比如此处的StrNumArrary)可以是任意合法的变量名称
3. 创建类型别名后,直接使用该类型别名作为变量的类型注解即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

The method toList() is undefined for the type Stream

The method toList() is undefined for the type Stream &#xff08;JDK16&#xff09; default List<T> toList() { return (List<T>) Collections.unmodifiableList(new ArrayList<>(Arrays.asList(this.toArray()))); }

OpenAI Sora 初体验

OpenAI Sora 初体验 就在刚刚&#xff0c;OpenAI 再次投下一枚重磅炸弹——Sora&#xff0c;一个文本到视频生成模型。 我第一时间体验了 Sora。看过 Sora 的能力后&#xff0c;我真的印象深刻。对细节的关注、无缝的角色刻画以及生成视频的绝对质量真正将可能性提升到了一个新…

人工智能学习与实训笔记(五):神经网络之推荐系统处理

目录 ​​​​​​​七、智能推荐系统处理 7.1 常用的推荐系统算法 7.2 如何实现推荐​​​​​​​ 7.3 基于飞桨实现的电影推荐模型 7.3.1 电影数据类型 7.3.2 数据处理 7.3.4 数据读取器 7.3.4 网络构建 7.3.4.1用户特征提取 7.3.4.2 电影特征提取 7.3.4.3 相似度…

一周学会Django5 Python Web开发-Django5应用配置

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计14条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…

SpringBoot+Tess4J实现本地与远程图片的文字识别

Spring Boot应用程序里集成Tess4J来实现OCR&#xff08;光学字符识别&#xff09;&#xff0c;以识别出本地和远程图片中的文字 一、添加依赖 <dependency><groupId>net.sourceforge.tess4j</groupId><artifactId>tess4j</artifactId><vers…

上位机图像处理和嵌入式模块部署(图像项目处理过程)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于一般的图像项目来说&#xff0c;图像处理只是工作当中的一部分。在整个项目处理的过程中有很多的内容需要处理&#xff0c;比如说了解需求、评…

通过写代码学习AWS DynamoDB (3)- 一致性hash

简介 在本文中&#xff0c;我们将简单介绍一致性hash&#xff08;consistent hash&#xff09;的概念&#xff0c;以及一致性hash可以解决的问题。然后我们将在模拟的DDB实现中实现一个简单版本的基于一致性harsh实现的partition。 问题 在《通过写代码学习AWS DynamoDB &am…

嵌入式——Flash(W25Q64)

目录 一、初识W25Q64 1. 基本认识 2. 引脚介绍 ​编辑 二、W25Q64特性 1. SPI模式 2. 双输出SPI方式 三、状态寄存器 1. BUSY位 2. WEL位 3. BP2、BP1、 BP0位 4. TB位 5. 保留位 6. SRP位 四、常用操作指令 1. 写使能指令&#xff08;06h&#xff09; 2. 写禁…

react【三】受控组件/高阶组件/portals/fragment/严格模式/动画

文章目录 1、受控组件1.1 认识受控组件1.2 checkout1.3 selected1.4 非受控组件 2、高阶组件2.1 认识高阶组件2.2 应用1-props增强的基本使用2.3 对象增强的应用场景-context共享2.4 应用2-鉴权2.5 应用3 – 生命周期劫持2.6、高阶组件的意义 3、Portals4、fragment5、StrictMo…

交大论文下载器

原作者地址&#xff1a; https://github.com/olixu/SJTU_Thesis_Crawler 问题&#xff1a; http://thesis.lib.sjtu.edu.cn/的学位论文下载系统&#xff0c;该版权保护系统用起来很不方便&#xff0c;加载起来非常慢&#xff0c;所以该下载器实现将网页上的每一页的图片合并…

GPU独显下ubuntu屏幕亮度不能调节解决方法

GPU独显下屏幕亮度不能调节&#xff08;假设你已经安装了合适的nvidia显卡驱动&#xff09;&#xff0c;我试过修改 /etc/default/grub 的 GRUB_CMDLINE_LINUX_DEFAULT"quiet splash acpi_backlightvendor" &#xff0c;没用。修改和xorg.conf相关的文件&#xff0c;…

不花一分钱,在 Mac 上跑 Windows(M1/M2 版)

这是在 MacOS M1 上体验最新 Windows11 的效果&#xff1a; VMware Fusion&#xff0c;可以运行 Windows、Linux 系统&#xff0c;个人使用 licence 免费 安装流程见 &#x1f449; https://zhuanlan.zhihu.com/p/452412091 从申请 Fusion licence 到下载镜像&#xff0c;再到…

安装 Windows Server 2019

1.镜像安装 镜像安装:Windows Server 2019 2.安装过程(直接以图的形式呈现) 先选择""我没有产品密钥"",选择桌面体验 选择自定义 设置密码后继续 安装成功

07-k8s中secret资源02-玩转secret

一、回顾secret资源的简单实用 第一步&#xff1a;将想要的数据信息【key&#xff1a;value】中的value值&#xff0c;使用base64编码后&#xff0c;写入secret资源清单中&#xff1b; 第二步&#xff1a;创建secret资源&#xff1b; 第三步&#xff1a;pod资源引用secret资源&…

第2讲springsecurity+vue通用权限系统

阿里云 maven阿里云镜像 <?xml version"1.0" encoding"UTF-8"?><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for addition…

C++,stl,常用排序算法,常用拷贝和替换算法

目录 1.常用排序算法 sort random_shuffle merge reverse 2.常用拷贝和替换算法 copy replace replace_if swap 1.常用排序算法 sort 默认从小到大排序 #include<bits/stdc.h> using namespace std;int main() {vector<int> v;v.push_back(1);v.push_ba…

【友塔笔试面试复盘】八边形取反问题

问题&#xff1a;一个八边形每条边都是0&#xff0c;现在有取反操作&#xff0c;选择一条边取反会同时把当前边和2个邻边取反&#xff08;如果是0变为1&#xff0c;如果是1变为0&#xff09; 现在问你怎么取反能使得八条边都变为1. 当时陷入了暴力递归漩涡&#xff0c;给出一个…

问题:内存时序参数 CASLatency 是() #学习方法#微信#微信

问题&#xff1a;内存时序参数 CASLatency 是&#xff08;&#xff09; A&#xff0e;行地址控制器延迟时间 B&#xff0e;列地址至行地址延迟时间 C&#xff0e;列地址控制器预充电时间 D&#xff0e;列动态时间 参考答案如图所示

[职场] 求职如何设置预期 #笔记#经验分享

求职如何设置预期 在求职的道路上&#xff0c;无论处于哪个年龄阶段&#xff0c;合理的就业期望值才能使我们的愿望与社会的需求相吻合&#xff0c;才能让自己在今后的工作中发挥出最大的实力与能力。 一、结合测评软件&#xff0c;明确求职目标 根据霍兰德职业兴趣测试结果&a…

题目:3.神奇的数组(蓝桥OJ 3000)

问题描述&#xff1a; 解题思路&#xff1a; 官方&#xff1a; 我的总结&#xff1a; 利用双指针遍历每个区间并判断是否符合条件&#xff1a;若一个区间符合条件则该区间在其左端点不变的情况下的每一个子区间都符合条件&#xff0c;相反若一个区间内左端点固定情况下有一个以…