怎么每次碰到想不通的代码行都出在 TypeScript😢 这行到底哪里有问题？ - V2EX

TypeScript

ts 生态有没有开源的简单的 kv 配置管理项目 - V2EX 你们是怎么学习 typescript 的？ - V2EX 用 Go 移植的 TypeScript 7 要来了 - V2EX TypeScript5.9，仿佛走出草原来到了现代社会 - V2EX Typescript 有没有能对接 AI 的知识库或者文档？能处理稍微复杂点的类型 - V2EX typescript 如何返回一个动态对象类型 - V2EX ts 有没有直接能查看最终类型的方法 - V2EX TypeScript Native 预览版发布了 - V2EX 关于 TypeScript 装饰器和接口的问题，请教一下各位 - V2EX 你们 typescript 用自带枚举还是字符串枚举，感觉字符串枚举类型用起来有点不可靠啊 - V2EX effect-ts - V2EX typescript 达人乱入 - V2EX TypeScript 宣布原生移植计划，性能将提升 10 倍？ - V2EX #笔记#更好的 ts 重载声明方法 - V2EX 使用 satisfies 实现穷举类型保护 - V2EX 请教一个 TS 问题，不知能否实现 - V2EX 装饰器能不能装饰类的所有方法 - V2EX TypeSciprt 类型推断，如何进一步收窄类型？ - V2EX TypeScript 项目打包发布到 npm，如何给方法和接口添加 dts TypeScript 类型推导真强大。 - V2EX 为啥下面这段代码 TS 不报错 - V2EX ts 类型约束+请求参数校验+自动生成 openapi/swagger 文档，这三者目前有整合为一体的最佳实践吗 - V2EX TypeScript 能不能别这么古怪，这行为什么会报错呢？ - V2EX 低估了 typescript 的难度 - V2EX 前端写 nestjs 后端，用 TypeORM 时感到非常困惑，不知道是不是我的理解有问题 - V2EX 我列举了市面上最好的几个 TypeScript 教程，想深入学习 TypeScript 的同学以后不用走弯路了 - V2EX 这样的函数类型定义在 ts 里面叫什么？ - V2EX typescript 如何忽略泛型参数啊？ - V2EX TypeScript 现在的应用场景 - V2EX ==TypeScript 写的 npm 包可以用 javascript 使用包的函数吗 - V2EX react 如何优雅的实现批量删除+二次确认 - V2EX TypeScript 怎么 wrap 一个函数并修改一下返回值？ - V2EX 想请教个 TypeScript 抽象类继承父类的问题。 - V2EX vscode 纯 js 项目有类型推断和成员变量提示，但是如果 ts 混用的话， js 导入就全变成 any 了，请问有办法解决吗这个项目这样定义 Typescript 类型和使用，学到了，有几个问题？ - V2EX 请教一个 Typescript 的问题 - V2EX 这种的类型是不是实现不了(TypeScript) - V2EX 问题一个 typescript 类型包裹问题 - V2EX 遇到了极其诡异的不符合进入 if 条件的要求但是还是进入了 - V2EX typescript 的类型处理 - V2EX 想问问大家 TypeScript 中关于 null 处理的方式 - V2EX 有没有声明 typescript 类型的好办法以及前端样式的健壮性问题 - V2EX typescript 类型断言问题 - V2EX TypeScript 中类型编程简介 - V2EX [求助] 类型 { K:V } --> { "type": K , "conf": V } 且约束 - V2EX 大佬们， vscode 开发 ts，这个地方的提示，怎么修改成中文啊 - V2EX TypeScript 中「类型定义的命名空间」使用 - V2EX 有没有办法把 ts 的 error 报错改成 warning - V2EX [求助] 函数中使用泛型缩小参数类型 - V2EX

june4 · 2024-09-02 · via TypeScript

这是一个创建于 651 天前的主题，其中的信息可能已经有所发展或是发生改变。

服了 TypeScript 这货了，符合我对微软的刻板印象，最近几年似乎每次碰到看不明白的语法出错，都是在 TypeScript ，这货无数细节太微妙了。

interface Elements {
  div: { id: number; name?: string; color: string; x: string }
  a: { id: number; name?: string; href: string; x: string }
}

declare function getProps<T extends Record<any, any>>(obj: T, keys: (keyof T)[]): void

function Foo<T extends 'div' | 'a'>(tag: T, props: Omit<Elements[T], 'x'>) {
  // 这行报错 Type 'string' is not assignable to type 'Exclude<keyof Elements[T], "x">'
  getProps(props, ['id'])
}
Foo('a', { id: 1, href: '#' })

// 我以为是因为 Omit 只能放单个对象，试了下多个也行啊。
type kkk = Omit<Elements['div' | 'a'], 'x'>
把 `function Foo<T extends 'div' | 'a'>(tag: T, props: Omit<Elements[T], 'x'>)` 
改成 `function Foo<T extends 'div' | 'a'>(tag: T, props: Omit<Elements['div' | 'a'], 'x'>)` 就不会报错。
那这个 `T` 不就是 `'div' | 'a'` 吗？这 tm 二者到底有什么微妙区别导致代码一个报错一个没错？

ZZITE 2024 年 9 月 2 日

我觉得应该在保持第一种写法的情况下，在 getProps 传参这里使用断言处理，即 getProps(props, ["id"] as (keyof Omit<Elements[T], 'x'>)[])；

和 Omit 无关，两种情况的区别在于第一种 Omit<Elements[T], 'x'>的结果是泛型参数，这里 TS 是不会做出“ ‘id’一定存在于这个泛型中”的这种推断的，它无法确定具体的类型结构。这里的报错具体来说其实是“ “id' is not assignable to type 'Exclude<keyof Elements[T], "x">'”。但我们知道"id"是有效的 key😂，所以在传入“id”的时候对它做个类型断言。

至于第二种写法，Omit<Elements['div' | 'a']是一个具体的联合类型，ts 是可以确定整个类型结构的，也可以推断出"id"是一个符合联合类型结果的有效 key

june4 2024 年 9 月 2 日

@ZZITE 可是这个 T 已经在函数类型参数声名中限制只能是 'div' | 'a' 了啊？'id'是一定存在于这个 props 里的。

june4 2024 年 9 月 2 日

@june4 这里的问题是 Omit<Elements[T], 'x'> 这里的 Omit 操作结果出问题了。如果去掉 Omit ，直接用 Elements[T]，那一点问题都没有。但这个 Omit 我似乎也看不出为什么会出问题？

rm2788 2024 年 9 月 2 日

@june4 #2 ts 能力是由限的，你觉得是，但是它处理起来就比较麻烦，这也是 as 的作用之一，用在你比编译器知道更多的信息，一般给泛型套上另一个 Conditional Type 大部分就不会继续计算了，所以没必要纠结这些

csl123 2024 年 9 月 2 日

Omit 改成 Exclude 好像就可以了，原因没细看。

``` typescript

interface Elements {
div: {
id: number; name?: string; color: string; x: string
}
a: { id: number; name?: string; href: string; x: string }
}

type E<T extends 'div' | 'a'> = Exclude<keyof Elements[T], 'x'>

// type EDiv = "id" | "name" | "color"
type EDiv = E<'div'>
// type EA = "id" | "name" | "href"
type EA = E<'a'>

type O<T extends 'div' | 'a'> = Omit<keyof Elements[T], 'x'>

/**
* type ODiv = {
toString: () => string;
valueOf: () => string;
toLocaleString: () => string;
}
*/
type ODiv = O<'div'>
/**
* type OA = {
toString: () => string;
valueOf: () => string;
toLocaleString: () => string;
}
*/
type OA = O<'a'>
```

ZZITE 2024 年 9 月 2 日

@june4 #3 嗯嗯，这里 Elements[T]如你所说，通过 T extends 'div' | 'a' 是可以推断出具体类型结构的，但在 Omit 后返回了一个新类型，这个新类型是抽象的，就是我说的泛型参数，这里是无法推断出 id 一定存在于新类型的类型结构里的。

june4 2024 年 9 月 2 日

@ZZITE 也许是这样。
我正在读一个库的代码，这个是我自己抽出来改造的一部分实验代码，我这方法行不通。我的类型和库的不同，库的明显更繁琐，我突然有点理解为啥库要舍近求远那么设计类型了, 也许就是因为不那么干是条死路🐶
哎看大能的代码有一点不爽就是看不到别人的思路过程只看到最终结果。

zhangdroid 2024 年 9 月 2 日

可以看看这个 issue: https://github.com/microsoft/TypeScript/issues/39556

这样就可以 work 了：

```ts
interface Elements {
div: { id: number; name?: string; color: string; x: string }
a: { id: number; name?: string; href: string; x: string }
}

declare function getProps<T extends Record<any, any>>(obj: T, keys: (keyof T)[]): void

type SimpleUnionOmit<T, K extends string | number | symbol> = T extends unknown ? Omit<T, K> : never

function Foo<T extends 'div' | 'a'>(tag: T, props: SimpleUnionOmit<Elements[T], 'x'>) {
getProps(props, ['id'])
}
```

cosmos601 2024 年 9 月 2 日

写这种复杂函数的 ts 类型是真的想死，半小时写完的业务代码，搞类型半小时

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

TypeScript