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; //unknownlet b = a === 123; // booleanlet 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 objectlet 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.mzph.cn/news/157001.shtml

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

相关文章

【C+进阶之路】第六篇:C++11

文章目录 一、【C】C11&#xff08;1&#xff09;二、【C】C11&#xff08;2&#xff09; 一、【C】C11&#xff08;1&#xff09; 【C】C11&#xff08;1&#xff09; 二、【C】C11&#xff08;2&#xff09; 【C】C11&#xff08;2&#xff09; &#x1f339;&#x1f33…

3.计算机网络

1.重点概念 MSL&#xff08;Maximum segment lifetime&#xff09;&#xff1a;TCP 报⽂最⼤⽣存时间。它是任何 TCP 报⽂在⽹络上存在的 最⻓时间&#xff0c;超过这个时间报⽂将被丢弃。实际应⽤中常⽤的设置是 30 秒&#xff0c;1 分钟和 2 分钟。 TTL&#xff08;Time to …

LeetCode算法心得——打家劫舍(记忆化搜索)

大家好&#xff0c;我是晴天学长&#xff0c;准备开始深入动态规划啦&#xff0c;先从记忆化搜索开始&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃…

RK3568平台开发系列讲解(Linux系统篇)kernel config 配置解析

🚀返回专栏总目录 文章目录 一、图形化界面的操作二、Kconfig 语法简介三、.config 配置文件介绍四、deconfig 配置文件沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 Linux 内核可以通过输入“make menuconfig”来打开图形化配置界面,menuconfig 是一套图形化的配…

Javaweb之Axios的详细解析

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

map的基础定义及运用

Map 1 使用 1 声明 /*声明map*/map<int, string> myMap {{1, "Apple"}, {2, "Banana"}, {3, "Orange"}};2 插入元素 myMap.insert(make_pair(4, "Graphes"));3 通过访问键查找和访问元素 cout << myMap[2] <<…

[SCTF 2021]rceme

文章目录 前置知识可变参数绕过create_function注入无字母数字RCE动态链接库so绕过disable_functions利用php原生类进行文件读取 解题过程 前置知识 可变参数绕过 PHP 在用户自定义函数中支持可变数量的参数列表。在 PHP 5.6 及以上的版本中&#xff0c;由 … 语法实现&#x…

2023 年爆肝将近 20 万字讲解最新 JavaEE 全栈工程师基础教程(更新中)

1. Java 语言基本概述 Java 是一种广泛使用的编程语言&#xff0c;由 James Gosling 在 Sun Microsystems&#xff08;现在是 Oracle Corporation 的一部分&#xff09;于 1995 年发表。Java 是一种静态类型的、类基础的、并发性的、面向对象的编程语言。Java 广泛应用于企业级…

【Computer Vision Foundation】全球计算机视觉基金会论文网

计算机视觉基金会&#xff08;Computer Vision Foundation&#xff0c;简称CVF&#xff09;是一个致力于推动计算机视觉领域研究和发展的组织。以下是关于计算机视觉基金会的一些基本信息&#xff1a; 成立目的&#xff1a; CVF成立的目的是促进计算机视觉领域的学术研究、技术…

LVS+Keepalived 高可用群集

一、一.Keepalived工具介绍 专为LVS和HA设计的一款健康检查工具 • 支持故障自动切换&#xff08;Failover&#xff09; • 支持节点健康状态检查&#xff08;Health Checking&#xff09; • 官方网站&#xff1a;http://www.keepalived.org/ 二、Keepalived工作原理 • …

子虔科技出席2023WAIC“智能制造融合创新论坛”

7月7日&#xff0c;2023世界人工智能大会&#xff08;WAIC&#xff09;闵行会场在大零号湾举办。子虔科技联合创始人周洋作为专家嘉宾受邀参与智能制造融合创新论坛大会。会上探讨了工业和制造业数字化转型的机遇、挑战和对策。其中&#xff0c;周洋提到&#xff0c;工业制造业…

03-基于Feign的远程调用,详解Feign的自定义配置和优化,创建Feign模块

Feign远程调用 Feign替代RestTemplate 利用RestTemplate发起远程调用的代码的缺点 代码可读性差编程体验不统一 , 面对参数复杂的URL难以维护 String url "http://user-service/user/" order.getUserId(); User user restTemplate.getForObject(url, User.cla…

相对定位、绝对定位、固定定位、绝对定位堆叠顺序

相对定位&#xff1a;相对自己本身进行偏移 CSS语法&#xff1a; position: relative;/*相对自己进行定位*/ top: 10px;/*距离上边*/ left: 10px;/*距离左边*/ 演示图&#xff1a; 绝对定位&#xff1a;默认以浏览器进行定位。如果想依照父盒子定位&#xff0c;需要在父盒子…

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

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

ppt录屏制作微课,轻松打造精品课程

微课作为一种新型的教学方式逐渐受到广大师生的欢迎。微课具有方便快捷、内容丰富、互动性强等特点&#xff0c;可以有效地帮助教师传达知识&#xff0c;提高学生的学习效果。其中&#xff0c;ppt录屏制作微课就是一种常见的方式。本文将介绍ppt录屏的使用方法&#xff0c;帮助…

七天.NET 8操作SQLite入门到实战 - 第二天 在 Windows 上配置 SQLite环境

前言 SQLite的一个重要的特性是零配置的、无需服务器&#xff0c;这意味着不需要复杂的安装或管理。它跟微软的Access差不多&#xff0c;只是一个.db格式的文件。但是与Access不同的是&#xff0c;它不需要安装任何软件&#xff0c;非常轻巧。 七天.NET 8操作SQLite入门到实战…

第十二章 pytorch中使用tensorboard进行可视化(工具)

PyTorch 从 1.2.0 版本开始&#xff0c;正式自带内置的 Tensorboard 支持了&#xff0c;我们可以不再依赖第三方工具来进行可视化。 tensorboard官方教程地址&#xff1a;https://github.com/tensorflow/tensorboard/blob/master/README.md 1、tensorboard 下载 step 1 此次…

解锁电力安全密码:迅软DSE助您保护机密无忧

电力行业信息化水平不断提高&#xff0c;明显提升了电力企业的生产运营能力&#xff0c;然而随着越来越多重要信息存储在终端计算机中&#xff0c;电力面临的信息安全挑战也越来越多。 作为关键基础设施的基础&#xff0c;电力企业各部门产生的资料文档涵盖着大量机密信息&…

1.Qt5.15及其以上的下载

Qt5.15及其以上的下载 简介&#xff1a; ​ Qt是一个跨平台的C库&#xff0c;允许开发人员创建在不同操作系统&#xff08;如Windows、macOS、Linux/Unix&#xff09;和设备上具有本地外观和感觉的应用程序。Qt提供了一套工具和库&#xff0c;用于构建图形用户界面&#xff0…

【Linux】 find命令使用

find find命令是一种通过条件匹配在指定目录下查找对应文件或者目录的工具。匹配的条件可以是文件名称、类型、大小、权限属性、时间戳等。find命令还可以配合相关命令对匹配到的文件作出后续处理。 语法 find [路径...] [表达式] [path...]为需要查找文件所指定的路径。如果…