ts总结一下

ts基础应用

/*** 泛型工具类型*/
interface IProps {id: string;title: string;children: number[];
}
type omita = Omit<IProps, 'id' | 'title'>;
const omitaA: omita = {children: [1]
};
type picka = Pick<IProps, 'id' | 'title'>;
const pickaA: picka = {id: '',title: '1'
};
type partiala = Partial<IProps>;
const partialaA: partiala = {id: '1'
};
type readonlya = Readonly<IProps>;
const readonlyaA: readonlya = {id: '1',title: '1',children: [1]
};
//Record<keys,Type>构造一个对象类型,属性键为keys,属性类型为Type
type recorda = Record<'a' | 'b' | 'c', string[]>;
const recordaA: recorda = {a: ['1'],b: ['1'],c: ['1']
};/*** 泛型函数 箭头函数和普通函数*/// 箭头函数写法
const getValue = <T>(value: T): T => {return value;
};
// 声明函数写法
function getValue1<T>(value: T): T {return value;
}getValue<number>(1);
getValue1(false); //类型推断为字面量类型100// 多个参数
function getArr<K, V>(value1: K, value2: V): [K, V] {return [value1, value2];
}/*** 泛型约束* 使用extends关键字为泛型添加约束* keyof关键字获取对象所有键的集合*/
interface Ilength {length: number;
}
const getLength = <T extends Ilength>(value: T): number => {return value.length;
};const getProp = <T, k extends keyof T>(obj: T, key: k) => {return obj[key];
};
getProp({ name: 'name', age: 1 }, 'name');/*** 索引签名类型* 定义对象和数组*/interface IAnyObj<T> {[key: string]: T;
}const myObj: IAnyObj<string> = {name: 'name'
};interface IAnyArray<T> {[index: number]: T;
}const myArray: IAnyArray<number> = [1, 2];/*** 映射类型 in (keyof)* typeof*/type Person = { name: string; age: number };
type PerKeyof = keyof Person; // keyof后接类型 name | age
const per1: PerKeyof = 'age';const person: Person = { name: 'name', age: 1 };
type PerTypeof = typeof person; // typeof后接具体对象
const per2: PerTypeof = { name: 'name', age: 1 };
// 用法1: 根据联合类型创建新类型
type PropKeys = 'x' | 'y' | 'z'; // const a: PropKeys = 'x';
// 等价于{x:string;y:string;z:string} 三个属性都包含
type types = { [key in PropKeys]: string };
const typesObj: types = {x: '1',y: '1',z: '1'
};
// 用法2: 根据对象类型创建新类型
type PropsObj = { a: number; b: string; c: boolean };
type Type1 = { [key in keyof PropsObj]: PropsObj[key] };
const Type1Obj: Type1 = {a: 1,b: '1',c: true
};// 泛型工具partial是根据映射类型实现的
type MyPartial<T> = {[key in keyof T]?: T[key];
};
type MyPartialA = {name: string;age: number;phone: number;
};
const MyPartialAObj: MyPartial<MyPartialA> = {name: '1'
};
// 注意区分和in keyof的区别
const MyPartialAObj1: { [p in keyof MyPartialA]: MyPartialA[p] } = {name: '1' // 类型“{ name: string; }”缺少类型“{ name: string; age: number; phone:
};

当在公司axios严格使用ts

和后端定义好接口返回参数,使用泛型定义好核心data结构
AxiosResponse是axios返回的一个类型,带一个泛型参数T,属性有config,headers,request,status,statusText和data属性,其中data接受泛型T

// /api/index.ts
import axios, { AxiosResponse } from 'axios';
import config from '@/utils/config';
// 定义接口返回失败参数类型
interface ErrorResponse {error_code: string;error_message: string;
}// 定义接口返回成功参数类型
interface AxiosHomeResponse<T = any> {data: T;stateCode?: {code?: string;desc?: string;};statusText?: string;success?: boolean;
}
export type BaseResponse<T> = Promise<AxiosResponse<T>>;// 封装接口返回参数类型
export type HomeResponse<T> = BaseResponse<AxiosHomeResponse<T> & ErrorResponse>;
/*** 设置全局配置*/
axios.defaults.withCredentials = true;
axios.defaults.validateStatus = (status: number) => {return status >= 200 && status < 599;
};export const createAxios = (baseURL: string) => {const instance = axios.create({ baseURL });instance.interceptors.request.use((config) => {if (config.method?.toLocaleLowerCase() === 'get') {config.params = { ...config.params, _: Date.now() };}return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);});instance.interceptors.response.use((response) => {// 对响应数据做点什么switch (response.status) {case 401:// 跳转登陆页面break;}return response;},(error) => {// 对响应错误做点什么if (error.response && error.response.data) {// 弹出统一错误提示}return Promise.reject(error);});return instance;
};// test接口
/*** url: http://localhost:3001/api* 不同环境的url可以抽离到config下的配置文件 todo...* 不同模块的请求域名可以各自配置*/
export const homeApi = createAxios('http://localhost:3001/api');

在文件夹api中分模块定义请求接口和ts类型

// /api/home/index.ts
import { homeApi, HomeResponse } from '..';
import * as Types from './type';// 拿到接口返回的res就有ts类型提示了
export const getHome = (params: Types.IHomeParams): HomeResponse<Types.IHomeRes[]> => {return homeApi.post('/home', { params });
};
// /api/home/type.ts
export interface IHomeParams {id: number;
}export interface IHomeRes extends IHomeParams {msg: string;
}

在请求结果中就会有对应的提示了
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

【分布式文件存储系统Minio】2024.12保姆级教程

文章目录 1.介绍1.分布式文件系统2.基本概念 2.环境搭建1.访问网址2.账号密码都是minioadmin3.创建一个桶4.**Docker安装miniomc突破7天限制**1.拉取镜像2.运行容器3.进行配置1.格式2.具体配置 4.查看桶5.给桶开放权限 3.搭建minio模块1.创建一个oss模块1.在sun-common下创建2.…

udp分片报文发送和接收

读文件通过udp分片发送的目的端&#xff1a;&#xff08;包含错误的分片包&#xff09; #!/usr/bin/python # -*- coding: utf-8 -*-#python send_100frag_file.py -p 55432 -f snatdownloadimport argparse import loggingfrom scapy.all import *# Define the maximum size …

好用的随机生成图片的网站

官网&#xff1a; Lorem Picsum 获取自定义大小的随机图像 https://picsum.photos/200/300 获取正方形图像 https://picsum.photos/200 获取特定类型的图像 通过添加到 /id/{image} url 的开头来获取特定图像。 https://picsum.photos/id/237/200/300 获取静态随机图像…

2024-12-31-devkit-pipeline

title: 解析 Devkit-Pipeline&#xff1a;开发流程自动化的新动力 date: ‘2024-12-31’ category: blog tags: Devkit-Pipeline开发流程自动化持续集成软件开发效率 sig: CICD archives: ‘2024-12’ author:way_back summary: Devkit-Pipeline 是一款为软件开发流程带来高效…

“进制转换”公式大集合

咱们都知道十进制是“逢10进1 ”&#xff0c;同理&#xff0c;N进制就是 “逢N进1”。进制其实就这么简单。它的麻烦之处在于各种进制之间的转换。 一、十进制整数转N进制 1&#xff0e;十进制转二进制 除2取余法&#xff1a;连续除以2&#xff0c;直到商为0&#xff0c;逆序…

解决k8s部署dashboard时一直处于Pending状态的问题

直接用离线包就行 命令 [rootk8s-master ~]# docker load -i calico-image-v3.25.0.tar [rootk8s-master ~]# kubectl apply -f calico.yaml链接在https://download.csdn.net/download/weixin_42759398/90192045 [rootk8s-master ~]# docker load -i calico-image-v3.25.0.t…

在计算机网络中,什么是集群?

在计算机网络中&#xff0c;集群&#xff08;Cluster&#xff09;指的是一组相互独立的计算机&#xff08;也称为节点&#xff09;&#xff0c;它们通过高速通信网络互联&#xff0c;共同协作以提供高性能、高可用性和可扩展性的计算资源和服务。这些计算机在逻辑上被组织成一个…

【视觉SLAM:八、后端Ⅰ】

视觉SLAM的后端主要解决状态估计问题&#xff0c;它是优化相机轨迹和地图点的过程&#xff0c;从数学上看属于非线性优化问题。后端的目标是结合传感器数据&#xff0c;通过最优估计获取系统的状态&#xff08;包括相机位姿和场景结构&#xff09;&#xff0c;在状态估计过程中…

Vue.js前端框架教程15:Vue父子组件之间的通信ref、emits

文章目录 1. 属性传递(Props)2. 事件监听( Emits)3. `ref` 引用4. `provide` 和 `inject`5. 插槽(Slots)在 Vue 3 中,父子组件之间的通信可以通过多种方式实现,包括属性传递、事件监听、插槽以及 ref 和 provide/inject。以下是这些通信方式的详解: 1. 属性传递(Pro…

SpringCloudAlibaba实战入门之路由网关Gateway过滤器(十三)

承接上篇,我们知道除了断言,还有一个重要的功能是过滤器,本节课我们就讲一下常见的网关过滤器及其一般使用。 一、Filter介绍 类似SpringMVC里面的的拦截器Interceptor,Servlet的过滤器。“pre”和“post”分别会在请求被执行前调用和被执行后调用,用来修改请求和响应信…

[C#]C# random.Next(0,1)包含0和1吗

在C#中&#xff0c;Random.Next(minValue, maxValue) 方法生成的随机数是一个在 minValue&#xff08;包含&#xff09;和 maxValue&#xff08;不包含&#xff09;之间的整数。因此&#xff0c;当你调用 Random.Next(0, 1) 时&#xff0c;它只会生成一个整数&#xff0c;这个整…

matlab-数字滤波器设计与实战

文章目录 数字滤波器设计FIR 滤波器设计IIR 滤波器设计巴特沃斯滤波器切比雪夫 I 型滤波器切比雪夫II型椭圆滤波器线性相位与非线性相位零相位响应数字滤波器实战数字滤波器产生延迟的主要原因补偿滤波引入的延迟补偿常量滤波器延迟补偿与频率有关的延迟从信号中除去不需要的频…

Clickhouse使用基础

# 查看操作系统版本 cat /etc/os-release# clickhouse版本 clickhouse -V# 登录clickhouse客户端 clickhouse-client -u xxx --password xxx -m # -m 或 --multiline&#xff1a;进入客户端后&#xff0c;运行输入多行sql语句建表 # 创建数据库 CREATE DATABASE IF NOT EXIST…

python参数传递不可变对象含可变子对象

当传递不可变对象时。不可变对象里面包含的子对象是可变的。则方法内修改了这个可变对象&#xff0c;源对象也发生了变化。 a (10, 20, [5, 6]) print("a", id(a))def test01(m):print("m", id(m))m[2][0] 888print("修改m后m的值为{}".forma…

Midjourney技术浅析(八):交互与反馈

Midjourney 的用户交互与反馈通过用户输入&#xff08;User Input&#xff09;和用户反馈&#xff08;User Feedback&#xff09;机制&#xff0c;不断优化和改进图像生成的质量和用户满意度。 一、用户交互与反馈模块概述 用户交互与反馈模块的主要功能包括&#xff1a; 1.…

如何检测PWA是否已经安装?

手头的项目有个需求需要检测PWA是否已经安装&#xff0c;安装了导航下载就不显示&#xff0c;没有安装就需要显示。在网上找了蛮久&#xff0c;也问了chatgpt&#xff0c;主要提供以下三种方法&#xff0c; 1、判断 navigator.getInstalledRelatedApps() 是否有返回值 此方法…

TB1801D 线性驱动 LED 恒流芯片

1、产品概述 TB1801D是一款专为12V灯珠设计的汽车灯专用的低压差恒流芯片&#xff0c;输出电流恒流精度≤3&#xff05;&#xff0c;外围结构简单。TB1801D 内置 130℃过温保护电路&#xff0c;可在各种散热条件下将 LED 灯珠温度控制在 140℃以内。TB1801D 内置 100V 的功率 M…

HTML5适配手机

要使 HTML5 网站适配手机设备&#xff0c;您可以遵循以下几个步骤和最佳实践&#xff1a; 1. 使用视口&#xff08;Viewport&#xff09; 在 HTML 文档的 <head> 部分添加视口元标签&#xff0c;以确保页面在移动设备上正确缩放和显示&#xff1a; <meta name"…

C# OpenCV机器视觉:凸包检测

在一个看似平常却又暗藏玄机的午后&#xff0c;阿强正悠闲地坐在实验室里&#xff0c;翘着二郎腿&#xff0c;哼着小曲儿&#xff0c;美滋滋地品尝着手中那杯热气腾腾的咖啡&#xff0c;仿佛整个世界都与他无关。突然&#xff0c;实验室的门 “砰” 的一声被撞开&#xff0c;小…

【每日学点鸿蒙知识】长时任务、HarmonyAppProvision申请、preferences、Testing工具、应用保活

1、HarmonyOS 如何解决语音聊天、通信app退后台系统采集播放回调就会停止&#xff0c;回前台未恢复&#xff1f; 关于应用切到后台系统采集播放回调停止的问题原因如下&#xff1a;为了降低设备耗电速度、保障用户使用流畅度&#xff0c;系统会对退至后台的应用进行管控&#…