Skip to main content

Command Palette

Search for a command to run...

一次TS联合类型推断bug处理

Published
1 min read
T

A simple developer.

在使用await-to-js这个库的时候,发现了一个类型问题,如下图

async login(loginForm: LoginData) {
            const [err, res] = await login(loginForm);

            if (err) {
                clearToken();
            }
            setToken(res.data.jsesessionid);
},

1192d3db8c4b849ea287770e950d3d8.jpg

再附上await-to-js的类型定义

declare function to<T, U = Error>(promise: Promise<T>, errorExt?: object): Promise<[U, undefined] | [null, T]>;

很奇怪,这里我期望的是,TS能自动推断出下面setToken代码这里,类型为 [null, T]这个子项,这样res类型为 T 必然存在。

但是TS报错了,TS表示,你这里的 res 任然是联合类型 T | undefined,我百思不得其解...

于是在群里开水了

1667204379790(1).png

没人理我,经过了1分钟的快速思考,我突然换了一种编码方式

async login(loginForm: LoginData) {
            const [err, res] = await login(loginForm);

            if (!err) {
                setToken(res.data.jsesessionid);
            }
            clearToken();
},

image.png

欸,不报错了,能够推断出res的类型了,好耶!

这么看来,这TS类型推断只能反着来?于是我大言不惭的在群里开始结帖,欸,这一定是TS的问题,它推断不出来。

1667204749792.png

不过,万幸的是,很快哈,牛批的群友立马指出了错误,为TS洗刷了冤屈。

1667204560627.png

原来是,我自己忘了在 err 的存在条件语句中 return 了,这样自然后面的语句依然是存在两种类型情况的。

真的结帖

TS类型推断肥肠智能,当我们用 if(err)err进行类型保护后,在elseif return 后的语句,TS能够自动推断出,这里的err类型为null,那么res自然就是T了。

PS:有群友发出了跟我一样的疑问

1667204849303.png

最后:一次粗心的经历,让我对TS的认识加深了,await-to-js 听我说谢谢你......

More from this blog

Git 无法正常访问问题解决 —— DNS无法解析git地址

在国内网络经常会无法访问github,一般呈现错误为: github.com 打不开 git 操作 clone/push/pull/fetch 超时等 这普遍由于国内DNS解析github相关域名的问题,国内DNS解析污染会导致,无法解析github相关域名,使得我们无法获悉正确ip而无法访问。 偏方一剂:修改Host,固定绑定 domain - ip 查询相关域名的解析 IPAddress github.com github.global.ssl.fastly.net asse...

Sep 22, 20221 min read

Vue SSR实战小练

思想 开发环境: 在webpack dev与pro的前端打包构建基础上, 添加webpack server compiler的服务,其为单独创建的node服务,用于渲染html代码并返回给客户端。(其他JS...则仍旧交由webpack dev server来构建) 所以在获取html后要再自行将dev客户端渲染的js加入到html中 在生产环境则不需如此: 由dev与server打包好的文件,将其组合 客户端则访问node服务来获取文件 基本用法 安装:npm install v...

Sep 5, 20229 min read

Jsonp 跨域解决方案解析

由来背景 As we all know,浏览器同源策略会将非同源请求(跨域)抛弃,而许多时候我们可能并未将前端资源与服务端服务放在一个服务器,此时就需要一个跨域的手段了。 基于此,针对同源策略,衍生了一种跨域的方法Jsonp。 Jsonp简单讲,即利用了script标签不受浏览器同源策略影响的特性,从而利用script想服务端跨域请求的方式。 原理解析 图下图所示 封装一个Jsonp函数,Promise化 // jsonp.ts type JsonpOptions<T extends Reco...

Sep 2, 20222 min read
Jsonp 跨域解决方案解析

唯在一心

15 posts

A simple developer.