typescript使用笔记

typescript已经成为前端日常开发中常用的工具之一,本文结合自己的使用做一下笔记,方便以后查阅。

Partial

Partial可以将某个类型中定义的属性变成可选的.
下面的定义了Book类型,创建实力时如果不设置id属性就会提示错误。

type Book = {id: string;name: string;
};const book1: Book = {id: "1",name: "book1"
}// 提示错误: Property 'id' is missing in type '{ name: string; }' but required in type 'Book'.ts(2741)
const book2: Book = {name: "book2"
}

可以通过Partial设置成部分属性

const book2: Partial<Book> = {name: "book2"
}

is

is用来指定数据的类型。

下面isNumber函数用来判断输入为数字,如果是就用调用setValue,但是提示value的值可能为undefined不能赋值给number类型。

const isNumber = (taregt: unknown): boolean => typeof taregt === "number" && !Number.isNaN(taregt)const setValue = (newValue: number) => {// ....};const reset = (value?: number) => {if (isNumber(value)) {// 错误提示: Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.ts(2345)setValue(value);}
};

isNumber函数已经判断value位数字了,但是编译器还是报错,那怎样才能让编译器认为value就是nmber,没错is可能达到目的。将isNumber的返回类型使用is指定为number.

const isNumber = (taregt: unknown): taregt is number => typeof taregt === "number" && !Number.isNaN(taregt)

infer

infer用来推断数据的类型,typescript可以根据条件来确定类型比如官网的例子:

interface Animal {live(): void;
}
interface Dog extends Animal {woof(): void;
}type Example1 = Dog extends Animal ? number : string;
// type Example1 = numbertype Example2 = RegExp extends Animal ? number : string;
// type Example2 = string

所以可以根据条件动态确定输入的类型

推断函数返回类型

表示如果T是一个无参数的函数,则返回T函数的返回值,返回返回T本身,

type func = () => number;
type GetReturnType<T> = T extends () => infer R ? R : T;
type FuncReturnType = GetReturnType<func>; // numbertype Foo = string;
type StringReturnType = GetReturnType<Foo>; // string

可以将上面的type func = () => number改成有参数的type func = (a: string) => number,可以看返回了func函数本身。

推断联合类型

type InferType<T> = T extends {name: infer V, age: infer V} ? V : never;
type Foo1 = InferType<{name: string; age: string}>;// type Foo1 = string
type Foo2 = InferType<{name: string; age: number}>;// type Foo = string | number

同理可以推断数组的类型

type InferType<T> = T extends (infer R)[] ? R : never;
type Foo3 = InferType<[string, number, boolean]>; // type Foo3 = string | number | boolean

Omit

忽略对象的某些属性。

下面的代码提示缺少id、time属性。

type Book = {id: string;name: string;time: number;
}const book1: Book = { // Type '{ name: string; }' is missing the following properties from type 'Book': id, timets(2739)name: "book1",
}

通过Omit可以忽略id、time属性,只要name属性。

const book1: Omit<Book, "id" | "time"> = {name: "book1",
}

Exclude

排除联合类型的某些类型

type Foo = "a" | "b" | "c";
type Bar = Exclude<Foo, "a">; // type Foo = "a" | "b" | "c";

Extract

从联合类型中提取符合条件的成员

下面从Foo中提取"a""d",最后Bar"a"

type Foo = "a" | "b" | "c";
type Bar = Extract<Foo, "a" | "d">; // type Bar = "a"

看看官网的例子

type T1 = Extract<string | number | (() => void), Function>; //type T1 = () => voidtype Shape =| { kind: "circle"; radius: number }| { kind: "square"; x: number }| { kind: "triangle"; x: number; y: number };type T2 = Extract<Shape, { kind: "circle" }>
// type T2 = {
//     kind: "circle";
//     radius: number;
// }

NonNullable

排除联合类型中undefinednull

下面的例子类型为string | number

type T = NonNullable<string | number | undefined | null>; //type T = string | number

Awaited

通过对异步函数或者Promise的then进行递归的解开来获取类型。

type A = Awaited<Promise<string>>; // type A = string
type B = Awaited<Promise<Promise<number>>>; // type B = number
type C = Awaited<boolean | Promise<number>>; // type C = number | boolean

Required

将类型的所有属性设置为必填。

下面的Props的属性都是可选的,但是使用Required后就必填了

interface Props {a?: number;b?: string;
}const obj: Props = { a: 5 };//error: Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.ts(2741)
const obj2: Required<Props> = { a: 5 };

Readonly

将类型的所有属性标记为已读,创建的对象属性不允许再次赋值。

interface Todo {title: string;
}const todo: Readonly<Todo> = {title: "Delete inactive users",
};todo.title = "Hello"; // Cannot assign to 'title' because it is a read-only property.ts(2540)

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

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

相关文章

Ubuntu部署jmeter与ant

为了整合接口自动化的持续集成工具&#xff0c;我将jmeter与ant都部署在了Jenkins容器中&#xff0c;并配置了build.xml 一、ubuntu部署jdk 1&#xff1a;先下载jdk-8u74-linux-x64.tar.gz&#xff0c;上传到服务器&#xff0c;这里上传文件用到了ubuntu 下的 lrzsz。 ubunt…

Spring-AOP与声明式事务

为什么要用AOP ①现有代码缺陷 针对带日志功能的实现类&#xff0c;我们发现有如下缺陷&#xff1a; 对核心业务功能有干扰&#xff0c;导致程序员在开发核心业务功能时分散了精力 附加功能分散在各个业务功能方法中&#xff0c;不利于统一维护 ②解决思路 解决这两个问题&…

TOUGH系列软件解读

TOUGH系列软件是由美国劳伦斯伯克利实验室开发的&#xff0c;旨在解决非饱和带中地下水、热运移的通用模拟软件。和传统地下水模拟软件Feflow和Modflow不同&#xff0c;TOUGH系列软件采用模块化设计和有限积分差网格剖分方法&#xff0c;通过配合不同状态方程&#xff08;EOS模…

关于css的一些知识

position&#xff1a; 在 CSS 中&#xff0c;position 属性用于定义元素的定位方式。它有几个取值&#xff1a; static: 默认值。元素按照正常文档流进行定位&#xff0c;不会被特殊地定位。relative: 相对定位。元素相对于它正常位置进行定位&#xff0c;但是在文档流中仍保…

同旺科技 分布式数字温度传感器

内附链接 1、数字温度传感器 主要特性有&#xff1a; ● 支持PT100 / PT1000 两种铂电阻&#xff1b; ● 支持 2线 / 3线 / 4线 制接线方式&#xff1b; ● 支持5V&#xff5e;17V DC电源供电&#xff1b; ● 支持电源反接保护&#xff1b; ● 支持通讯波特率1200bps、2…

使用Java对yaml和properties互转,保证顺序、实测无BUG版本

使用Java对yaml和properties互转 一、 前言1.1 顺序错乱的原因1.2 遗漏子节点的原因 二、优化措施三、源码 一、 前言 浏览了一圈网上的版本&#xff0c;大多存在以下问题&#xff1a; 转换后顺序错乱遗漏子节点 基于此进行了优化&#xff0c;如果只是想直接转换&#xff0c…

1.3 排序算法

1.1 冒泡排序 public class BubbleSort {public static void main(String[] args) {int[] arr {133,322,13,444,54,621,174,18,19,2};System.out.println(Arrays.toString(arr));BubSort(arr);System.out.println(Arrays.toString(arr));}//冒泡排序public static void BubSo…

21.Oracle的程序包(Package)

Oracle的程序包Package 一、Package的概述1、什么是Oracle11g的Package2、Package的作用是什么3、常见的系统内置Package 二、创建Package的相关语法1、Package的创建语法2、Package的删除3、具体案例4、Package的使用5、与Package相关的其他语法 三、常见内置程序包的使用1、…

ElasticSearch之Search settings

相关参数 indices.query.bool.max_clause_count 本参数当前已失效。 search.max_buckets 本参数用于控制在单个响应中返回的聚合的桶的数量。 默认值为65536。 本参数允许在elasticsearch.yml中配置&#xff0c;配置样例如下&#xff1a; search.max_buckets: 30或者使用Ela…

根据属性值的不同设置不同的style不同的(类似三元)

<scroll-view scroll-y"true" class"scroll-Y " style"height: 200rpx;" :style"QQTypeValue!ABC && partCodes.length>0?background-color:white;position:absolute;height:170rpx;top:170rpx:">使用三元判断去判…

element-plus el-dialog 弹窗隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作等

场景 el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作&#xff0c;比如一个弹窗打开了&#xff0c;我要能控制弹窗后面的滚动、点击等等一系列事件。 修改方法 首先我们需要隐藏弹窗遮罩 :modal"false"&#xff0c;并且给 el-dialog 弹窗…

Image Super-Resolution with Text Prompt Diffusion

Image Super-Resolution with Text Prompt Diffusion (Paper reading) Zheng Chen, Shanghai Jiao Tong University, arXiv23, Code, Paper 1. 前言 受多模态方法和文本提示图像处理进步的启发&#xff0c;我们将文本提示引入图像SR&#xff0c;以提供退化先验。具体来说&am…

2023.11.30 homework

兴趣最重要了&#xff0c;没兴趣不喜欢勉强带来的苦楚&#xff0c;并不能促使变好变优秀。 虽然我们的社会环境依旧很残酷&#xff0c;各种各样的硬性要求。

计算机网络(一)| 概述 因特网 性能 协议基本

文章目录 1. 因特网组成1.1 四元素组成1.2 二元素组成1.3 核心部分 2.计算机网路的功能3. 几种不同类别的网络4 性能指标5 网路协议5.1网络体系结构 6 PDU 互联网&#xff08;或因特网&#xff09;之所以能够向用户提供服务&#xff0c;是因为互联网具有两个重要基本特点 连通性…

Java多线程

20.1线程介绍 世间有很多工作都是可以同时完成的。例如&#xff0c;人体可以同时进行呼吸、血液循环、思考问题等活动&#xff1b;用户既可以使用计算机听歌&#xff0c;也可以使用它打印文件。同样&#xff0c;计算机完全可以将多种活动同时进行&#xff0c;这种思想放在 Java…

Grafana部署与Zabbix集成,搭建开源IT监控平台

Grafana部署与Zabbix集成 目前在一家公司主要是网络、运维、IT支持&#xff0c;每次需要检查服务器状态都是需要手动登录系统进行查看&#xff0c;因此想着部署一套监控系统&#xff0c;功能上需要实现监控、可视化、告警等。由于预算没有&#xff0c;服务器资源倒是有空闲的&a…

Python高级数据结构——堆(Heap)

Python中的堆&#xff08;Heap&#xff09;&#xff1a;高级数据结构解析 堆是一种基于树结构的数据结构&#xff0c;具有高效的插入和删除操作。在本文中&#xff0c;我们将深入讲解Python中的堆&#xff0c;包括堆的基本概念、类型、实现方式、应用场景以及使用代码示例演示…

智能工厂是什么?

今天就聊聊企业智能工厂的打造&#xff0c;企业想实现数字化转型建立智能工厂&#xff0c;就需要先建设数字化车间&#xff0c;可以说数字化车间是建设智能工厂的重要一环&#xff0c;智能工厂的基础是数字化车间。数字化车间可以实现企业生产过程中车间计划调度、工艺执行管理…

鸿蒙(HarmonyOS)应用开发——基础组件

组件 组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件&#xff0c;它们可以重复使用&#xff0c;可以与其他组件组合使用以创建更复杂的组件&#xff0c;并且它们有自己的生命周期和状态。 组件化的目的是提高开发效率和代码重用率&#…

深入解析 Docker:作用、优势及应用领域

引言 Docker 是一种轻量级、可移植、自给自足的容器化技术&#xff0c;它已经成为现代软件开发和部署的重要工具。本文将深入解析 Docker 的作用、优势以及在不同应用领域的应用。 Docker 的作用 1. 容器化应用程序 Docker 通过将应用程序及其依赖项打包到一个容器中&#…