TypeScript的基础类型和高级类型梳理总结

一、基础类型

1、boolean 布尔类型

表示逻辑值,可以是 true 或 false

let isBoolean:boolean = false

2、number 数字类型

表示整数和浮点数(例如 423.14159),不论是十进制、二进制、八进制还是十六进制,都是number类型

let decimal: number = 6;  
let hex: number = 0xf00d;

3、string 字符串类型

表示文本类型的数据,使用单引号或双引号包围

let color: string = "blue";  
color = 'red';

4、array 数组类型

表示一个元素列表,元素类型相同。有两种方式可以定义数组,两种写法是等价的,都可

let list: number[] = [1, 2, 3];  
let list: Array<number> = [1, 2, 3];

5、tuple 元组类型

表示一个已知元素数量和类型的数组,各元素的类型可以不必相同

let x: [string, number] = ['您好!', 666]

6、enum 枚举类型

enum类型是对JavaScript标准数据类型的一个补充,使用枚举类型可以为一组数值赋予友好的名字。在开发中,后端返回的一些类型全是数值,在前端代码中直接使用数据,语义化不明显,也影响阅读,所以使用枚举转换一下更推荐

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;  //c就等于 2

7、any 任何类型

当不确定一个变量应该是什么类型的时候,可以使用 any 类型。any 类型是 TypeScript 的一个强大特性,它允许我们在编译时可选择地包含或移除类型检查。但建议尽量不要使用,如果大量使用any,那使用ts的意义就失去了

let notSure: any = 666;//notSure没有指定具体类型,这里的赋值不会报错,即使notSure初始值是一个number类型
notSure = "maybe a string instead"; 

8、void  没有返回值的函数的返回类型

当一个函数没有返回值时,采用void,如果有返回值,应该写返回值的具体类型

function warnUser(): void {  console.log("This is my warning message"); //这个函数没有返回值 
}

9、Null

在 TypeScript 中,null 值有自己的类型 null; null是所有类型的子类型

let n: null = null;

10、Undefined

在 TypeScript 中,undefined 有它专门的类型 undefined,undefined是所有类型的子类型

let u: undefined = undefined; 

11、never

表示的是那些永不存在的值的类型, 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。never类型是任何类型的子类型,也可以赋值给任何类型,但除never类型本身,其他的类型都不可以赋值给never类型,包括any

function error(message: string): never {  throw new Error(message);  
}

12、Object 对象类型

表示非原始类型的对象类型,如下,参数O 和 lngLat都只接受对象类型数据传入

declare function create(o: object | null): void;
或
funtion getAddress(lngLat:{lng: string, lat: string} | null): string

二、高级类型

1、Intersection Types 交叉类型 

使用 & 分隔不同的类型,表示交叉类型是将多个类型合并为一个类型。这让我们可以把多个类型的成员合并到一个类型里,可以理解为取这些类型的并集

type A = {x: number}
type B = {y: number}
type Combined  = A & B//表示Combined类型必须同时具有x和y属性。

2、union types 联合类型

使用 | 分隔不同的类型,联合类型表示一个值可以是几种类型之一,所以 number | string | boolean 表示一个值可以是 number, string,或 boolean
如果一个值是联合类型,我们只能访问此联合类型的所有类型里共有的成员,可以理解为取 交集

interface Bird {fly();layEggs();
}interface Fish {swim();layEggs();
}function getSmallPet(): Fish | Bird {// ...
}let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();    // errors, swim不是共有成员

3、Type Aliases 类型别名

类型别名会给一个类型起个新名字。 类型别名有时和接口很相似,但是可以作用于原始类型,联合类型,元组和字面量。

type Name = string; //用Name 代替原始类型string
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {//这里的函数返回值是string,因为第一行代码对string进行了别名,所以就可以用Name代替stringif (typeof n === 'string') {return n;}else {return n();}
}

类型别名不能出现在声明右侧的任何地方

type Yikes = Array<Yikes>; // error

4、String Literal Types 字符串字面量类型

表示允许指定字符串必须的固定值,和联合类型一起使用,可以实现类似枚举类型的字符串

type SuperAdmin = "admin"
type Easing = "ease-in" | "ease-out" | "ease-in-out"; //与联合类型结合使用

5、Numeric Literal Types 数值字面量类型

与字符串字面量类型类似,数值字面量类型用来约束取值只能是特定的数值。

function rollDice(value: 1 | 2 | 3 | 4 | 5 | 6) {  console.log(`Player rolled a ${value}`);  
}

6、Type Guards 类型保护

类型保护就是一些表达式,它们会在运行时检查以确保在某个作用域里的类型。 要定义一个类型保护,我们只需要简单地为一个函数的返回值为类型谓词

pet is Fish就是类型谓词。 谓词为 parameterName is Type这种形式

function isFish(pet: Fish | Bird): pet is Fish {return (<Fish>pet).swim !== undefined;
}

还可以用typeof 进行类型保护, TS本身会把typeof识别成类型保护,所以可以直接在代码中使用

function padLeft(value: string, padding: string | number) {if (typeof padding === "number") {return Array(padding + 1).join(" ") + value;}if (typeof padding === "string") {return padding + value;}throw new Error(`Expected string or number, got '${padding}'.`);
}

7、Mapped Types 映射类型

它基于旧类型但是以某种方式对每个属性进行修改,这就是映射类型。例如,你可以获取一个类型的所有属性并使其成为只读
 

//旧接口
interface PersonPartial {name: string;age: number;
}//映射旧接口,获得新接口
type Readonly<T> = {readonly [P in keyof T]: T[P];
}
type ReadonlyPerson = Readonly<Person>;//新接口等同如下
interface PersonReadonly {readonly name: string;readonly age: number;
}


8、Conditional Types 条件类型

条件类型是一种表达形式,它类似于 JavaScript 中的三元运算符,用于选择两种类型之一。 条件类型在描述输入与输出类型之间关系的时候非常有用,并且能用来提取复杂类型中的信息。

type IsStringType<T> = T extends string ? true : false;  type A = IsStringType<'hello'>; // type A: true  
type B = IsStringType<number>;  // type B: false

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

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

相关文章

Rust镜像配置

cargo镜像配置 找到.cargo目录并创建config文件,输入以下内容即可,windows一般在C:\Users\用户目录\.cargo,linux执行vim ~/.cargo/config即可。然后将下面内容赋值粘贴进去 [source.crates-io] registry = "https://github.com/rust-lang/crates.io-index" rep…

Visual Studio 2022 配置“Debug|x64”的 Designtime 生成失败。IntelliSense 可能不可用。

今天写代码&#xff0c;无缘无故就给我整个这个错误出来&#xff0c;我一头雾水。 经过我几个小时的奋战&#xff0c;终于解决问题 原因就是这个Q_INTERFACES(&#xff09;宏&#xff0c;我本想使用Q_DECLARE_INTERFACE Q_INTERFACES这两个Qt宏实现不继承QObject也能使用qobjec…

C语言自学笔记17----结构体struct与位域与关键字typedef

C 语言结构体(struct) 为什么在C中使用结构&#xff1f; 假设您要存储有关一个人的信息&#xff1a;他/她的姓名&#xff0c;身份证号和薪水。您可以创建不同的变量name&#xff0c;citNo和salary存储此信息。 如果您需要存储多个人的信息怎么办&#xff1f;现在&#xff0c;你…

VSCode提交代码

VSCode提交代码方式&#xff1a; 先在电脑本地文件夹中打开git的bash窗口使用git clone https://github.com/xxxx/克隆仓库地址到本地&#xff0c;并生成一个项目的文件夹打开VSCode&#xff0c;点击文件按钮&#xff0c;打开加载项目的文件夹对于VSCode设置Git路径&#xff…

Three 材质纹理 (总结三)

THREE.MeshLambertMaterial&#xff08;网格 Lambert 材质&#xff09; 该材质使用基于非物理的Lambertian模型来计算反射率。可以用来创建暗淡的并不光亮的表面&#xff0c;该材质非常易用&#xff0c;而且会与场景中的光源产生反应。 MeshLambertMaterial属性 # .color : …

蓝桥杯刷题|02入门真题

[蓝桥杯 2022 省 B] 刷题统计 题目描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天做 a 道题目&#xff0c;周六和周日每天做 b 道题目。请你帮小明计算&#xff0c;按照计划他将在第几天实现做题数大于等于 n 题? 输入格式 输入一行包含三个整数…

Linux之线程互斥

目录 一、问题引入 二、线程互斥 1、相关概念 2、加锁保护 1、静态分配 2、动态分配 3、锁的原理 4、死锁 三、可重入与线程安全 1、概念 2、常见的线程不安全的情况 3、常见的线程安全的情况 4、常见不可重入的情况 5、常见可重入的情况 6、可重入与线程安全联系…

google scholar谷歌学术搜索技巧合集【补充ing】

今天发现和百度学术更新速度差太多&#xff0c;引用数量也不对&#xff0c;故搜集谷歌学术搜索技巧&#xff0c;以尽快查找所需。 筛选合集&#xff1a; 谷歌学术高级搜索技巧大放送 - 知乎 Google Scholar 谷歌学术文献检索技巧总结 - 知乎 Google Scholar谷歌学术文献检索技…

Linux 部署 Samba 服务

一、Ubuntu 部署 Samba 1、安装 Samba # 更新本地软件包列表 sudo apt update# 安装Samba sudo apt install samba# 查看版本 smbd --version2、创建共享文件夹&#xff0c;并配置 Samba 创建需要共享的文件夹&#xff0c;并赋予权限&#xff1a; sudo mkdir /home/test sud…

vue3 依赖注入provide/inject

建议在非父子&#xff08;或不相关&#xff09;组件传值时进行使用 场景&#xff1a;App.vue 引用了A组件&#xff0c;A组件中有引用了B组件&#xff0c;甚至B有引用了C组件等时&#xff0c;这些组件共同使用了一个值&#xff0c;建议使用provide/inject的方式进行传值。 注意…

Kubernetes operator系列:webhook 知识学习【更新中】

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes operator学习 系列文章&#xff0c;本节会对 kubernetes webhook 知识进行学习 本文的所有代码&#xff0c;都存储于github代码库&#xff1a;https://github.com/graham924/share-code-operator-st…

C语言例3-12:自增和自减运算的例子

i 先引用后加1--i 先减1后引用 代码如下&#xff1a; #include<stdio.h> int main(void) {int i2, j2;char c1d, c2D; //d(100) D(68)printf("i %d\n",i); //3, i3printf("j-- %d\n",j--); …

C++for语句

1.求平均年龄 班上有学生若干名,给出每名学生的年龄(整数),求班上所有学生的平均年龄,保留到小数点后两位 输入 第1行有一个整数n(1 <= n <=100),表示学生的人数;其后n行每行有1个整数,表示每个学生的年龄,取值为15~25 输出 一行,包含一个浮点数,为所求的平…

java实现压缩文件夹(层级压缩)下载,java打包压缩文件夹下载

工具类如下 打包下载方法&#xff1a;exportZip&#xff08;支持整个文件夹或单文件一起&#xff09; 注意:前端发送请求不能用ajax&#xff0c;form表单提交可以&#xff0c;location.href也可以&#xff0c;window.open也可以&#xff0c;总之就ajax请求就是不行 import com.…

生成式人工智能如何赋能SOC分析师?

以下是已经在全球SOC崭露头角的六大生成式人工智能应用。 在当今网络安全威胁日益严峻的形势下&#xff0c;安全运营中心(SOC)肩负着重大责任。然而&#xff0c;SOC分析师往往人手不足&#xff0c;工作繁重。生成式人工智能(GenAI)的出现为缓解这一困境带来了希望&#xff0c;使…

python:NP28---密码游戏

文章目录 前言一、题意描述输入描述&#xff1a;输出描述&#xff1a; 二、代码1.代码的实现2.读入数据 总结 前言 在python基础知识的学习中&#xff0c;我们很多时候会遇见让我们把数字拆分成各个位数的题&#xff0c;下面这道就是经典的数字拆分的l例题 一、题意 描述 牛…

工具篇--从零开始学Git

一、git概述 1.1版本控制方式 集中式版本控制工具 集中式版本控制工具&#xff0c;版本库是集中存放在中央服务器的&#xff0c; team 里每个人 work 时从中央服务器下载代码&#xff0c;是必须联网才能工作&#xff0c; 局域网或互联网&#xff0c;个人修改之…

IAB视频广告标准《数字视频和有线电视广告格式指南》之 简介、目录及视频配套广告 - 我为什么要翻译介绍美国人工智能科技公司IAB系列(2)

写在前面 谈及到中国企业走入国际市场&#xff0c;拓展海外营销渠道的时候&#xff0c;如果单纯依靠一个小公司去国外做广告&#xff0c;拉渠道&#xff0c;找代理公司&#xff0c;从售前到售后&#xff0c;都是非常不现实的。我们可以回想一下40年前&#xff0c;30年前&#x…

【学习记录】调试千寻服务+DTU+导远RTK过程的记录

最近调试车载定位的时候&#xff0c;遇到了一些问题&#xff0c;千寻服务已经正确配置到RTK里面了&#xff0c;但是导远的定位设备一直显示RTK浮动解&#xff0c;通过千寻服务后台查看状态&#xff0c;长时间显示不合法的GGA值。 首先&#xff0c;通过四处查资料&#xff0c;千…

嵌入式面经-ARM体系架构-计算机基础

嵌入式系统分层 操作系统的作用&#xff1a;向下管理硬件&#xff0c;向上提供接口&#xff08;API&#xff09; 应用开发&#xff1a;使用操作系统提供的接口&#xff08;API&#xff09;&#xff0c;做上层的应用程序开发&#xff0c;基本不用去关内核操作硬件是怎么实现的 …