TS类型全解

news2024/11/16 1:21:50

 使用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}

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

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

相关文章

MIT_线性代数笔记:列空间和零空间

目录 前言子空间综述列空间 Column space零空间&#xff08;或化零空间&#xff09;Nullspaceb 值的影响 Other values of b 前言 本节继续研究子空间&#xff0c;特别是矩阵的列空间&#xff08;column space&#xff09;和零空间&#xff08;nullspace&#xff09;。 子空间…

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

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

6.Gin 路由详解 - GET POST 请求以及参数获取示例

6.Gin 路由详解 - GET POST 请求以及参数获取示例 GET POST 请求以及参数获取示例 Get 请求&#xff1a;获取 Quary 参数 // 获取query参数示例&#xff1a;GET /user?uid20&namejack&page1 r.GET("/user", func(c *gin.Context) {// 获取参数// Query获取参…

Java核心知识点整理大全6-笔记

目录 4.1.4. 线程生命周期(状态) 4.1.4.1. 新建状态&#xff08;NEW&#xff09; 4.1.4.2. 就绪状态&#xff08;RUNNABLE&#xff09;&#xff1a; 4.1.4.3. 运行状态&#xff08;RUNNING&#xff09;&#xff1a; 4.1.4.4. 阻塞状态&#xff08;BLOCKED&#xff09;&#xff…

微信小程序如何使用scss,less

搜到很多都是先VSCode安装好…插件…。这都是很久之前的方法了&#xff0c;所以想写这篇文章 一、修改project.config.json配置文件 "setting": {"useCompilerPlugins": ["sass"]},二、然后就可以删除 .wxss 文件了&#xff0c;就用 .scss 文件…

C练习题_15

一、单项选择题(本大题共20小题&#xff0c;每小题2分&#xff0c;共40分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案,并将所选项前的字母填写在答题纸的相应位置上。) 在下列说法中&#xff0c;&#xff08;&#xff09;是正确的。 A.C程序从第一个函数开始…

练习7-在Verilog中使用任务task

在Verilog中使用任务task 1&#xff0c;任务目的2&#xff0c;RTL代码&#xff0c;交换3&#xff0c;测试代码4&#xff0c;波形显示 1&#xff0c;任务目的 &#xff08;1&#xff09;掌握任务在verilog模块设计中的应用&#xff1b; &#xff08;2&#xff09;学会在电平敏感…

小红书全自动加群引流脚本「 软件工具+引流技术教程」

软件介绍&#xff1a; 小红书群聊最新玩法&#xff0c;可自动检测群人数加群&#xff0c;不会加到垃圾群。定时发送广告&#xff0c;红书群聊的引流玩法回来了 功能一、自动搜索关键词加群&#xff0c;比如创业、项目、鞋子、包包、考公、考研… 功能二、自动检测群人数&…

交替最小二乘法

前置概念导入 协同过滤&#xff08;Collaborative Filtering&#xff09;&#xff1a;这是一种推荐系统的方法&#xff0c;依据用户之间或物品之间的相似性来进行推荐。协同过滤通常分为两种主要类型&#xff1a;用户基于&#xff08;user-based&#xff09;和物品基于&#xf…

丐版设备互联方案:安卓linux互联局域网投屏,文件共享,共享剪切板

华为&#xff0c;苹果&#xff0c;甚至小米最近也推出了澎湃&#xff2f;&#xff33;&#xff0c;发现实在是太方便了&#xff0c;当然这些对硬件&#xff0c;系统的要求还是比较高&#xff0c;我用的主力机是小米&#xff11;&#xff12;pro和ubuntu&#xff0c;win双系统也…

css取消移动端长按元素背景色

在开发微信小程序的时候&#xff0c;发现有的元素长按之后&#xff0c;出现了讨厌人的背景色&#xff0c;这就很奇怪&#xff0c;就想把它去掉&#xff0c;所以这里教一下方法&#xff1a; 在所在元素添加css样式&#xff1a; // 取消长按的背景色-webkit-tap-highlight-color:…

K8S精进之路-控制器Deployment-(1)

在K8S中&#xff0c;最小运行单位为POD,它是一个逻辑概念&#xff0c;其实是一组共享了某些资源的容器组。POD是能运行多个容器的&#xff0c;Pod 里的所有容器&#xff0c;共享的是同一个 Network Namespace&#xff0c;并且可以声明共享同一个 Volume。在POD中能够hold住网络…

子虔科技亮相2023工业软件生态大会 以先进理念赋能工业软件发展

作为云化工业软件领先企业&#xff0c;子虔科技携多项全新云原生产品亮相2023工业软件生态大会。 本届大会以“共建新一代工业软件体系&#xff0c;引领制造业高质量发展”为主题&#xff0c;集结行业领先企业、行业专家探究工业软件在核心技术、产业链创新和生态建设等方面创…

Git——分布式版本控制工具

一、概述 1.开发中的实际场景 备份代码还原协同开发追溯问题代码的编写人和编写时间 2.版本控制器的方式 集中式版本控制工具 集中式版本控制工具&#xff0c;版本库是集中存放在中央服务器的&#xff0c;team里每个人work时从中央服务器下载代码&#xff0c;是必须联网才能…

Javaweb之Axios的详细解析

1.3 Axios 上述原生的Ajax请求的代码编写起来还是比较繁琐的&#xff0c;所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装&#xff0c;简化书写。Axios官网是&#xff1a;https://www.axios-http.cn 1.3.1 Axios的基本使用 Axios的…

DAY60 84.柱状图中最大的矩形

84.柱状图中最大的矩形 题目要求&#xff1a;给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 思路 单调栈 本地单调栈的解法和接雨水的题目是遥相呼…

【brpc学习实践四】异步请求案例详解

注意 使用的还是源码的案例&#xff0c;添加个人注解。在前面的篇章我们讲解了客户端、服务端rpc构造的基本流程及同步、异步的案例基础之后&#xff0c;再理解此案例就容易了。 想直接看案例实现请看&#xff1a; server端实现 client端实现 服务端要点概览 controller ser…

【云原生】Spring Cloud Alibaba 之 Gateway 服务网关实战开发

目录 一、什么是网关 ⛅网关的实现原理 二、Gateway 与 Zuul 的区别&#xff1f; 三、Gateway 服务网关 快速入门 ⛄需求 ⏳项目搭建 ✅启动测试 四、Gateway 断言工厂 五、Gateway 过滤器 ⛽过滤器工厂 ♨️全局过滤器 六、源码地址 ⛵小结 一、什么是网关 Spri…

STM32 寄存器配置笔记——USART配置 打印

一、概述 本文主要介绍如何配置USART&#xff0c;并通过USART打印验证结果。以stm32f10为例&#xff0c;将PA9、PA10复用为USART功能&#xff0c;使用HSE PLL输出72MHZ时钟 APB2 clk不分频提供配置9600波特率。波特率计算公式如下&#xff1a; fck即为APB2 clk参考计算&#xf…