位置: IT常识 - 正文

TypeScript 报错汇总(typescript event)

编辑:rootadmin
TypeScript 报错汇总 TypeScript 报错汇总

推荐整理分享TypeScript 报错汇总(typescript event),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:typescriptreact,typescript some,typescript event,typescript implements,typescript instanceof,typescript instanceof,typescript instanceof,typescript instanceof,内容如对您有帮助,希望把文章链接给更多的朋友!

在这篇文章中将记录我遇到的ts错误,应该会持续更新。

有时候从错误点入手学习似乎是一个不错的选择,所以也欢迎你私信我一些ts的问题。

一、内置工具1.1 Pick & Partial

先看看Pick和Partial工具的源码:

type Partial<T> = { [P in keyof T]?: T[P];};type Pick<T, K extends keyof T> = { [P in K]: T[P];};

从代码和注释来看,

通过Pick工具根据联合类型数据,筛选泛型T中的属性,通过Partial工具将接口属性都变为可选属性

比如:

interface User { id: number; age: number; name: string;};// 相当于: type PartialUser = { id?: number; age?: number; name?: string; }type PartialUser = Partial<User>// 相当于: type PickUser = { id: number; age: number; }type PickUser = Pick<User, "id" | "age">

现在实现一个需求:筛选出目标接口中的函数属性,删除其他属性。

// 目标接口interface Part { id: number name: string subparts: Part[] firstFn: (brand: string) => void, anotherFn: (channel: string) => string}

首先遍历接口,将非函数类型的属性设置为never,如果是函数类型,取其属性名,然后通过Pick拿到函数类型成员集合:

type FunctionFilterNames<T> = {[K in keyof T]: T[K] extends Function ? K : never}[keyof T]type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>

完整代码:

type FunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T]type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>interface Part { id: number name: string subparts: Part[] firstFn: (brand: string) => void, anotherFn: (channel: string) => string}// 过滤出所有的函数key// type FnNames = "firstFn" | "anotherFn"type FnNames = FunctionPropertyNames<Part>// 根据对象的key获取函数接口集合// type FnProperties = {// firstFn: (brand: string) => void;// anotherFn: (channel: string) => string;// }type FnProperties = FunctionProperties<Part>let func: FnProperties = { firstFn: function (brand: string): void { throw new Error("Function not implemented.") }, anotherFn: function (channel: string): string { throw new Error("Function not implemented.") }}

如果需要深 Partial 我们可以通过泛型递归来实现

type DeepPartial<T> = T extends Function ? T : T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : Ttype PartialObject = DeepPartial<object>1.2 Record

先看看Record工具的源码:

/** * Construct a type with a set of properties K of type T */type Record<K extends keyof any, T> = { [P in K]: T;};

从源码和注释来看,这个工具的目标是:以K中的每个属性作为key值,以T作为value构建一个map结构

比如:

type pets = 'dog' | 'cat';interface IPetInfo { name: string, age: number,}type IPets = Record<pets, IPetInfo>;const animalsInfo: IPets = { dog: { name: 'Ryuko', age: 1 }, cat: { name: 'Ryuko', age: 2 }}

这个案例来源于这篇文章

现在实现一个需求,封装一个http请求:

首先思考请求方法一般需要哪些参数,比如请求类型、data数据、config配置

通过enum枚举几个常见的请求类型,然后每个具体的方法返回值都是一个Promise:

enum IHttpMethods { GET = 'get', POST = 'post', DELETE = 'delete', PUT = 'put',}interface IHttpFn<T = any> { (url: string, config?: AxiosRequestConfig): Promise<T>}// 以enum参数为key,每个key对应一种请求方法// type IHttp = {// get: IHttpFn<any>;// post: IHttpFn<any>;// delete: IHttpFn<any>;// put: IHttpFn<any>;// }type IHttp = Record<IHttpMethods, IHttpFn>;TypeScript 报错汇总(typescript event)

接下来设置一个methods数组,稍后通过reduce方法遍历这个数组,目的是将所有的方法体放在一个对象httpMethods中,形式如下:

httpMethods = { get: [Function ()], post: [Function ()], delete: [Function ()], put: [Function ()]}

最后将httpMethods暴露出去,那么外面就可以通过httpMethods.get(...)等方法直接调用:

const methods = ["get", "post", "delete", "put"];// map为total对象,method为当前遍历到的方法const httpMethods: IHttp = methods.reduce((map: any, method: string) => {map[method] = (url: string, options: AxiosRequestConfig = {...}) => { const { data, ...config } = options; \ return (axios as any)[method](url, data, config) .then((res: AxiosResponse) => { if (res.data.errCode) { //todo something } else { //todo something } }); } },{} )export default httpMethods

完整代码:

enum IHttpMethods { GET = 'get', POST = 'post', DELETE = 'delete', PUT = 'put',}interface IHttpFn<T = any> { (url: string, config?: AxiosRequestConfig): Promise<T>}type IHttp = Record<IHttpMethods, IHttpFn>;const methods = ["get", "post", "delete", "put"];const httpMethods: IHttp = methods.reduce((map: any, method: string) => {map[method] = (url: string, options: AxiosRequestConfig = {...}) => { const { data, ...config } = options; \ return (axios as any)[method](url, data, config) .then((res: AxiosResponse) => { if (res.data.errCode) { //todo something } else { //todo something } }); } },{} )export default httpMethods1.3 Exclude & omit

先看看Exclude和omit工具的源码:

type Exclude<T, U> = T extends U ? never : T;type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

从代码和注释来看:

Exclude可以选出T不存在于U中的类型Omit可以抛弃某对象中不想要的属性

比如:

// 相当于: type A = 'a'type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>interface User { id: number; age: number; name: string;};// 相当于: type PickUser = { age: number; name: string; }type OmitUser = Omit<User, "id">

举个例子,现在我们想引入第三方库中的组件,可以这样做:

// 获取参数类型import { Button } from 'library' // 但是未导出props typetype ButtonProps = React.ComponentProps<typeof Button> // 获取propstype AlertButtonProps = Omit<ButtonProps, 'onClick'> // 去除onClickconst AlertButton: React.FC<AlertButtonProps> = props => ( <Button onClick={() => alert('hello')} {...props} />)二、类型 “string” 没有调用签名 ts(2349)

函数返回元组的时候,在使用的时候,元素可能是元组中的任意一个类型,比如:

所以,在对返回的元组进行取值操作时,返回值内的类型顺序,可能和函数内的顺序不一致,需要多加一个条件判断:

function test<T>(name: T){let myName = nameconst setName = (newName: T): void => { if(typeof newName === 'string'){ console.log(newName.length); } } // console.log(typeof setName); // function return [myName, setName]}const [myName, setName] = test<string>("Ryuko")// 此表达式不可调用。"string | ((newName: string) => void)" 类型的部分要素不可调用。// 类型 "string" 没有调用签名。ts(2349)// setName("test")// 编译器无法判断setName是string还是一个函数,所以需要通过typeof手动判断if(typeof setName === 'function'){ setName("test") }console.log(myName); //Ryukoexport{}

在这个报错案例中,第四行的typeof newName === 'string'判断也是很重要的知识点,面对联合类型传参的情况,我们常常需要通过类型判断来决定最后要执行哪个方法:

type Name = stringtype NameResolve = (name: string) => stringtype NameOrResolver = Name | NameResolvefunction getName(param: NameOrResolver): Name{ if(typeof param === 'string'){ return param }else{ return param("Ryuko") }}console.log(getName("Ryuko")); // Ryukoconsole.log(getName( (p: string) => { return p + "si" })); // Ryukosi三、类型 “string” 到类型 “number” 的转换可能是错误的ts(2352)// 类型 "string" 到类型 "number" 的转换可能是错误的,因为两种类型不能充分重叠。// 如果这是有意的,请先将表达式转换为 "unknown"// 在那些将取得任意值,但不知道具体类型的地方使用 unknown,而非 any。// let a = 'Ryuko' as number// 更正:先将数据转化为unknown,再将数据转化为子类型的numberlet a = ('Ryuko' as unknown) as numberexport {}

这样的转换方式还可以用来定义html元素,比如我们想要通过dom操作,来改变某个超链接的url路径地址:

可是在HTMLElement元素节点中并不存在src这一属性:

因此,我们可以将这个节点属性断言转化为子属性HTMLImageElement,在子属性身上可以获取到src属性

let elem = document.getElementById('id') as HTMLImageElement四、类型“string”的参数不能赋给类型“Method”的参数。ts(2345)type Method = 'get' | 'post' | 'delete'const requestConfig = { url: 'localhost: 3000', // config 中的 method 是string类型的菜蔬,而 request 方法中的Method参数 // method: 'get' // 解决办法 通过断言进行转换 method: 'get' as Method}function request(url: string, method: Method){ console.log(method);}// 类型“string”的参数不能赋给类型“Method”的参数。ts(2345)request(requestConfig.url, requestConfig.method)export {}4.1 相关案例

这里再介绍一种情况:

注意:这个用法并没有报错

type EventNames = 'click' | 'scroll' | 'mousemove';function handleEvent(ele: Element, event: EventNames) { console.log(event);}handleEvent(document.getElementById("app")!, "click")handleEvent(document.getElementById("app")!, "mousemove")

在这个案例中,你可能会认为我传递过去的"click",以及"mousemove"是字符串,既然是字符串,就应该报错:类型“string”的参数不能赋给类型“EventNames”的参数。ts(2345)。

事实上,这里的字符串参数会被推导为EventNames类型,而在前面的错误案例中,method:get将会被推导为string类型!这也是为什么在错误案例中,我们需要手动

本文链接地址:https://www.jiuchutong.com/zhishi/298589.html 转载请保留说明!

上一篇:【TFS-CLUB社区 第4期赠书活动】〖Flask Web全栈开发实战〗等你来拿,参与评论,即可有机获得(tf fans club)

下一篇:yolov7配置与训练记录(二)(yolov4配置)

  • 累计交税如何计算?
  • 缴纳个税会计分录是什么
  • 其他应付款计入资本公积
  • 销售返利的会计科目
  • 保险服务保费会计分录
  • 电子设备残值率的最新规定
  • 银行卡待报解预算收入是什么钱
  • 转款账户错误退款的账务处理
  • 已认证未付款分录
  • 电费发票开据后如何入帐
  • 增值税普票未上传怎么办
  • 国税电子钥匙常见问题解答
  • 会计估计变更由谁审批
  • 境内公司购买境外公司服务 缴税
  • 事业单位研发支出资本化
  • 航天金税服务费280怎么缴费
  • 借支报销流程
  • 财付通转款会计分录
  • 代开专票不满10万的要交附加吗?
  • 公司变更税务处理?
  • 银行回单如何做凭证
  • windows 11怎么样
  • 奖励先进个人计划怎么写
  • 礼品应该计入会计分录
  • linux 计算字符数
  • postgres.exe是什么进程 postgres进程查询
  • php
  • 工程审计的目的包括哪些
  • 如何成功安装暗区突围
  • css基础实验报告
  • 深度学习模型部署综述(ONNX/NCNN/OpenVINO/TensorRT)
  • HTML 事件参考手册
  • js防抖节流的区别和使用场景
  • display version命令
  • head -1命令
  • 资产负债表上应付账款是负数
  • 应付未付的工资属于负债吗
  • 专票地址错了要作废吗
  • 税务自查报告要盖什么章
  • 消耗性生物资产的账务处理
  • 借款利息收入发票
  • 宝塔面板在哪
  • mysql中事件的作用
  • 公司组织出国旅游可以不带钱吗
  • 同一控制下收购溢价
  • 减免申报明细表怎么填
  • mysql运行报错
  • 以前年度多缴纳房产税,可以递延次年度使用么
  • 帮员工购买意外险怎么记到分录
  • 生产成本核算的步骤
  • 补交增值税和滞纳金怎么入账
  • 转出的未交增值税转到应交增值税
  • 个人微信转账可以给对方开发票吗
  • 为什么预付账款可以通过应付账款核算
  • 企业职工医院收入怎么样
  • 港口建设费征收管理办法
  • 原始凭证书写要求
  • SQLServer Top语句参数化方法
  • vmware虚拟机不能识别iso
  • winxp安卓
  • win7系统c盘占用空间大
  • win7电脑无法上网 连接正常
  • linux如何管理文件
  • 使用jquery实现的项目
  • 最简单的游戏开发工具
  • 多个版本python
  • perl cgi
  • android蓝牙连接过程
  • c#程序例子
  • CustomPropertyDrawer-Change the height of Property field
  • unity 动态壁纸
  • 浅谈javascript网页编码特效论文
  • jquery给输入框赋值
  • jquery的实现原理
  • 广东省为什么电不够用
  • 掌上海关怎么查询
  • 社保批扣和灵活就业批扣有什么区别
  • 重庆黄桷垭在什么地方
  • 怎么屏蔽微信群消息,但是不退出此群
  • 股东向公司借款合法吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设