TS类型全解

 使用TypeScript开发的程序更安全,常见的错误都能检查出来。TS能让程序员事半功倍。而原因在于TS的“类型安全”(借助类型避免程序做无效的事情)。

图 运行程序的过程

但是TS不会直接编译成字节码,而是编译成JavaScript代码。TS编译器生产AST后,先对代码做类型检查,然后再编译成JavaScript代码。

图 TS运行程序的过程

1 类型

类型是指一系列值及对其执行的操作。

图 TS的类型层次结构

TS具有自动推导类型的功能:

let num1 = 1; // 推导为number类型

我们可以不要显式的指明num1为number类型(let num1:number = 1),这是一种推荐的写法。

1.1 unknown与any

unknown

表示任何值,但是TS会要求你再做检查,细化类型。

any

表示任何值,TS不会做检查,应尽量避免使用。

表 unknown与 any的对比

unknown类型的值可以比较(使用==、===、||、&&和?)、可以否定(使用!)及可以使用typeof和instanceof。

let a: unknown = 30; //unknown

let b = a === 123; // boolean

let c = a + 10; //Error,Object is of type ‘unknown’

if (typeof a === ‘number’) {

  let d = a + 10; // number

}

unknown的用法如下:

1)TS不会把任何值推导为unknown类型,必须显示注解。

2)unknown类型的值是可以比较。

3)操作时不能假定unknown类型的值为某种特定类型,必须先向TS证明这个值确实是某个类型。

any 应尽量避免使用。在极少数情况下,any将发挥作用:

let a: any = 66;
let b: any = ['danger'];
let c = a + b; // string 66danger 如果上面不显式指明为any类型,则会报编译错误

1.2 boolean

boolean类型有两个值:true和false。该类型的值可以比较(==、===、||、&&和?)、可以否定(!)。用法如下:

let a = true; // boolean
const b = true; // ture
let c: boolean = false; // boolean
let d: true = true; // true
let e: true = false; // error Type false is not assignable to type true

1.2.1 推导类型的四种方式

1)让TS推导出值的类型为boolean(a)。

2)让TS推导出值为某个具体的布尔值(b)。

3)明确告诉TS,值的类型为boolean(c)。

4)明确告诉TS,值为某个具体的类型值(d和e)。

第四种情况,称为类型字面量。即仅表示一个

let a: object = {
    x: 'a'
};
a = {name:'212'};
console.log(a); // {x:'212'}
a = false; // error Type boolean is not assignable to type object
a.name; // error,Property name does not exist on type object

let b: Object = {
    name: 'b'
};
b = true;
b.name; // Property name does not exist on type Object

值的类型。注意,这种情况下也仍需为变量赋值,否则变量为空。

1.3 对象

object

接受所有引用类型,除基本类型(string、number、boolean、undefined和null)外,都可以赋值给它。

Object

是一个通用类型,可以被赋予任何类型的值。赋值以后能改变类型。

{}

Object的别名。

表 object、Object与{}

这三种只能表示该值是一个JS对象,范围比较窄,尽量避免使用。

1.3.1 对象字母量

上面的a指定为object类型后,在引用属性name时提示并没有该字段。这时,我们可以采用让TS自行推导的方式:

let a = {
    name: 'hello'
}; //类型为 {name: string}
console.log(a.name); // hello

这种声明对象类型的方式称为对象字面量句法(“这个东西的结构是这样的”)。可以让TS推导对象结构,也可以在花括号内明确描述:

let a: {name: string} = {
    name : 'a'
};
a = {
    name: "b"
};

a = {
    name: 'c',
    age: 17 // error Type { name: string; age: number; } is not assignable to type { name: string; }
}

如果先声明变量,然后在初始化,TS将确保在使用该变量时已经明确为其赋值了。

1.3.2 属性可选

let a: {
    att1: number,
    att2?: string, //该属性可以没有
    [key: number]: boolean // 可能有任意多个数字属性,其值为boolean类型。(key这个名字可以是任意的)
}
a = {att1: 1};
a = {att1: 2, att2: 'hello'};
a = {att1: 1, 1: true,2: false};

上面[key:T]: U 句法称为索引签名,通过这种方式告诉TS,指定的对象可能有更多的键。键的类型为T,值的类型为U。其中T必须为number或string类型。key可以是任意名称。

1.4 数组与元组

TS支持两种注解数组类型的句法:T[]和Array<T>。两者作用和性能无异。

let arr: string[] = ["hello","TS"];
let arr2: Array<string> = ["hello","TS"];
let arr3: any[] = [1,"hello",false]; // 一般情况,数组应该保持同质,即类型一样

any[]离开定义时所在的所用域后,TS将最终确定一个类型,不再扩张。

function buildArr() {
    let a = []; // any[]
    a = [1,false];
    return a;
}

let newArray = buildArr();
newArray.push(2);
newArray.push("hello"); // 运行时报错 Argument of type '"hello"' is not assignable to parameter of type 'number | boolean'

1.4.1 元组

元组是array的子类型。长度固定,各索引位的值具有固定的已知类型。与其他类型不同,声明元组时必须显式注解类型:

let a: [string,number,boolean];

元素也支持可选的元素(?表示可选)。也支持剩余元素,即为元组定义最小长度:

let a: [string,boolean?];
a = ["hello"];
a = ['hello', false];

let b: [boolean,...string[]];
b = [true];
b = [true,'hello'];

1.4.2 只读数组和元组

let a: readonly string[] = ["a","b","c"];
a.concat("s");
console.log(a.concat("s")); // [ 'a', 'b', 'c', 's' ]
console.log(a); // ["a","b","c"];
a.push("x"); // Property push does not exist on type readonly string[]

若想更改只读数组,使用非变型方法,例如.concat和.slice。不能使用可边型方法,例如.push和.splice。

1.5 其他类型

处理较长的数字时,为了便于标识数字,建议使用数组分隔符:

let a = 1_000_000
let c : 1_233_344 = 1_233_344; //注意,这里对c一定要赋值,如果是:let c : 1_233_344,这样值为空

null

缺少值。

undefined

尚未赋值的变量。

void

没有return语句的函数。

never

永不返回的函数。

表 TS中的空值

1.5.1 枚举

使用枚举极易导致安全问题,建议远离枚举。

1)枚举可以分几次声明:

enum Language {
    Chinese,
    English
}
enum Language {
    Russian = 2 //此时必须为这个枚举指定一个与上面枚举值不同的值
}
console.log(Language[1]); // English
console.log(Language.English); // 1
// Language:
// {
//     '0': 'Chinese',
//     '1': 'English',
//     '2': 'Russian',
//     Chinese: 0,
//     English: 1,
//     Russian: 2
// }

2)枚举值可以混用字符串和数字。(在枚举中,尽量不要使用数字,否则可能会置枚举于不安全的境地。)

enum Language {
    Chinese= 1,
    English= 'e'
}
// { '1': 'Chinese', Chinese: 1, English: 'e' }

3)为避免不安全的访问操作,可以通过const enum指定枚举的安全子集。来限制只能通过字符串来访问。

enum Language {
    Chinese= 1,
    English= 'e'
}
console.log(Language[3]); // undefined 可以访问,这样操作不安全。

const enum Language2 {
    Chinese= 1,
    English= 'e'
}
Language2[2]; //error const类型只能通过字符串类型访问,即Language2.Chinese

2 语言特性

2.1 类型别名 type

可以使用变量声明(let、const)为值声明别名,类似的,可以为类型声明别名:

type Age = number; // number的别名为Age

这样可以减少重复输入复杂的类型及更清楚地表明变量的作用。

别名具有以下特性:

1)使用别名的地方都可以替换成源类型。

2)同一个类型别名不能声明两次。

3)别名采用块级作用域。内部的类型别名将掩盖外部的类型别名。

type Age = 18;
{
    type Age = string;
}
type Age = boolean; // Duplicate identifier Age

2.2 并集和交集

type A = {name: string,age: number};
type B = {name: string,file: boolean};
type C = A | B;  // {name: string,age:number,file: boolean}
type D = A & B; // {name: string}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能座舱架构与芯片- (8) 视觉篇

一、概述 相比起用于ADAS感知系统的摄像头&#xff0c;用于智能座舱内部的摄像头&#xff0c;其功能特性和性能要求相对简单。例如&#xff0c;OMS乘客监控摄像头&#xff0c;一般达到5MP即可有良好的效果。同时&#xff0c;OMS也可应用于车内会议系统&#xff0c;还应用于车内…

如何将Docker的构建时间减少40%

与许多公司类似&#xff0c;我们为产品中使用的所有组件构建docker映像。随着时间的推移&#xff0c;其中一些映像变得越来越大&#xff0c;我们的CI构建花费的时间也越来越长。我的目标是CI构建不超过5分钟——差不多是喝杯咖啡休息的理想时间。如果构建花费的时间超过这个时间…

享元模式 rust和java的实现

文章目录 享元模式介绍实现javarust实现代码 rust仓库rust仓库 享元模式 享元模式&#xff08;Flyweight Pattern&#xff09;主要用于减少创建对象的数量&#xff0c;以减少内存占用和提高性能。这种类型的设计模式属于结构型模式&#xff0c;它提供了减少对象数量从而改善应…

分片并不意味着分布式

Sharding&#xff08;分片&#xff09;是一种将数据和负载分布到多个独立的数据库实例的技术。这种方法通过将原始数据集分割为分片来利用水平可扩展性&#xff0c;然后将这些分片分布到多个数据库实例中。 1*yg3PV8O2RO4YegyiYeiItA.png 但是&#xff0c;尽管"分布"…

css鼠标横向滚动并且不展示滚动条几种方法

需求&#xff1a;实现内容超出之后使用属性滚轮进行左右查看超出内容&#xff0c;并且隐藏滚动条 1.不使用框架实现 每次滚动就滚动40px的距离 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name&quo…

Altium Designer学习笔记7

PCB封装库的制作&#xff1a; 距离的测量&#xff1a; 各个焊盘的位置&#xff1a; 直插元件选择Multi-Layer。如果贴片元件的则选择顶层Top-Layer&#xff0c;或者Bottom-Layer。 形状是方形&#xff0c;尺寸是2mm*2mm。 孔的尺寸是1.4mm。 则该器件就制作完成。 TSSOP28封装…

Echarts+vue+java+mysql实现数据可视化

一、折线图&#xff0c;柱状图 https://echarts.apache.org/zh/index.html echarts 官网 更多配置项可以去官网查看 在开始项目之前&#xff0c;确保您已经安装了以下工具和技术&#xff1a; MySQL 数据库&#xff1a;用于存储和管理数据。Java 后端&#xff1a;用于创建后端应…

MySQL之JDBC编程

目录 1. 数据库编程的必备条件 2. Java的数据库编程&#xff1a;JDBC 3. JDBC工作原理 4. JDBC使用 4.1 IDEA配置JDBC 4.2 JDBC开发案例 4.3 JDBC使用步骤总结 5. JDBC常用接口和类 5.1 JDBC API 5.2 数据库连接Connection 5.3 Statement对象 5.4 ResultS…

基于SVM的车牌识别算法

基于SVM的车牌识别系统&#xff08;Python代码实现&#xff09; 车牌识别系统是智能交通系统的重要组成部分&#xff0c;有着广泛的应用。车牌识别系统主要有车牌定位、字符分割和字符识别三部分组成&#xff0c;本文的研究重点是车牌字符识别这部分&#xff0c;本文提出了一种…

QT 搭建opencv 环境

1. 准备工具CMake 一、CMake介绍 CMake是一个被广泛使用的、开源免费并且完全跨平台的构建工具&#xff0c;可以用简单的语句来描述所有平台的安装(编译过程)。它能够输出各种各样的makefile或者project文件&#xff0c;能测试编译器所支持的C特性&#xff0c;类似UNIX下的aut…

html手势密码解锁插件(附源码)

文章目录 1.设计来源1.1 界面效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134534785 html手势密码解锁插件(附源码)&#xff0c;仿手机手势密码&#xff0c;拖动九…

最新绿豆APP源码苹果CMS影视插件版本/原生JAVA源码+反编译开源+免授权

源码简介&#xff1a; 最新绿豆APP源码苹果CMS影视插件版本&#xff0c;它是原生JAVA源码反编译开源免授权&#xff0c;绿豆影视对接苹果CMS&#xff0c;它可以支持多功能自定义DIY页面布局。 1、新版绿豆视频APP视频6.1插件版反编译指南及教程 2、后端插件开源&#xff0c;可…

图形编辑器开发:自定义光标管理

大家好&#xff0c;我是前端西瓜哥。 今天来讲讲如何在图形编辑器中使用自定义光标&#xff0c;并对光标其进行管理。 编辑器 github 地址&#xff1a; https://github.com/F-star/suika 线上体验&#xff1a; https://blog.fstars.wang/app/suika/ 自定义光标的意义是什么&am…

【Docker】从零开始:4.为什么Docker会比VM虚拟机快

【Docker】从零开始&#xff1a;4.为什么Docker会比VM虚拟机快 docker有着比虚拟机更少的抽象层docker利用的是宿主机的内核,而不需要加载操作系统OS内核 docker有着比虚拟机更少的抽象层 由于docker不需要Hypervisor(虚拟机)实现硬件资源虚拟化,运行在docker容器上的程序直接…

关于一些网络的概述

语义分割网络是一种基于深度学习的计算机视觉技术,它能够将图像中的每个像素分配给特定的类别,从而实现对图像中不同对象的精确识别和定位。近年来,随着深度学习技术的不断发展,语义分割网络在各个领域都取得了显著的进展。 早期的语义分割网络主要采用全卷积神经网络(FC…

时序预测 | MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 x 基本介绍 1.Matlab实现LSTM-Adaboost时间序列预测…

数据库基础入门 — SQL

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 本…

《多GPU大模型训练与微调手册》

全参数微调 Lora微调 PTuning微调 多GPU微调预备知识 1. 参数数据类型 torch.dtype 1.1 半精度 half-precision torch.float16&#xff1a;fp16 就是 float16&#xff0c;1个 sign&#xff08;符号位&#xff09;&#xff0c;5个 exponent bits(指数位)&#xff0c;10个 ma…

数学几百年重大错误:将两异函数误为同一函数

黄小宁 因各实数都可是数轴上点的坐标所以数集A可形象化为数轴上的点集A&#xff0c;从而使x∈R变换为实数yxδ的几何意义可是&#xff1a;一维空间“管道”g内R轴上的质点x∈R(x是点的坐标)运动到新的位置yxδ还在管道g内&#xff08;设各点只作位置改变而没别的改变即变位前…