V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vision1900
V2EX  ›  TypeScript

typescript 动态类型定义问题

  •  
  •   vision1900 · 2021-09-13 14:32:24 +08:00 · 1577 次点击
    这是一个创建于 1167 天前的主题,其中的信息可能已经有所发展或是发生改变。
    export interface Column<T> {
      dataIndex: keyof T;
      title: ReactNode;
      render: (value: any, record: T, index: number) => ReactNode;
    }
    
    const Person = { name: "John", age: 10 };
    
    const cols: Column<Person> = [
    	{
        	dataIndex: "name", // this has autocompletion
            title: "Client Name",
            render: (v) => v.toLowerCase() // v is of type any, no autocompletion
        }
    
    ]
    

    我想基于 T & dataIndex 动态定义 render 的第一个参数 value, 大概像这样

    value: typeof Person["dataIndex"]
    

    可是 ts 不太熟悉,上网也没查到如何在 interface 里面去 reference 实例的方法,求助

    14 条回复    2021-09-13 18:05:05 +08:00
    fgwmlhdkkkw
        1
    fgwmlhdkkkw  
       2021-09-13 14:50:57 +08:00

    可以啊…… Person 应该是个类型
    vision1900
        2
    vision1900  
    OP
       2021-09-13 14:53:34 +08:00
    @fgwmlhdkkkw 你这完全回避了我的问题 :(
    fgwmlhdkkkw
        4
    fgwmlhdkkkw  
       2021-09-13 15:17:58 +08:00
    @vision1900 #2 🤭🤭,我刚学……
    vision1900
        5
    vision1900  
    OP
       2021-09-13 15:18:30 +08:00
    @EridanusSora 非常 OK,谢谢大佬
    vision1900
        6
    vision1900  
    OP
       2021-09-13 15:26:43 +08:00
    @EridanusSora 这种写法好像对自动补全不大友好,我这边编辑器还是告诉我 type 是 any
    Leviathann
        7
    Leviathann  
       2021-09-13 15:40:02 +08:00
    @vision1900 tsc 或者 tsserver 升个级吧,官网的编辑器我试了下是可以拿到 v 的类型的
    EridanusSora
        8
    EridanusSora  
       2021-09-13 15:41:33 +08:00
    @vision1900 render 函数参数的类型么,我这边看是 ok 的,TS Playground 里应该也是可以的,你编辑器用的 TypeScript 版本是?
    pixiaotiao
        9
    pixiaotiao  
       2021-09-13 16:25:29 +08:00 via Android
    动态类型直接用 js 不香么 ts 不就是要使用静态类型的好处么
    vision1900
        10
    vision1900  
    OP
       2021-09-13 16:53:56 +08:00
    @Leviathann 官网那个直接把值拿到了
    vision1900
        11
    vision1900  
    OP
       2021-09-13 16:55:59 +08:00
    @EridanusSora 我用的 4.4.2,脚手架是 Umi,不知道是不是它的原因
    vision1900
        12
    vision1900  
    OP
       2021-09-13 16:56:13 +08:00
    @pixiaotiao 此动态非彼动态
    EridanusSora
        13
    EridanusSora  
       2021-09-13 17:04:44 +08:00
    @vision1900 用的 VSCode 吗,右下角看一下正在用的 TypeScript 版本是项目里的还是其他地方装的
    namelosw
        14
    namelosw  
       2021-09-13 18:05:05 +08:00
    我感觉你的代码写乱了,你上面写了个 interface Column,下面又把 Column 直接 = [],你的 Column 和数组之间没有任何关系。

    我理解你是不是想表达这样,这样写是可以补全 v.name 的:

    type ReactNode = {}

    export interface Column<T> {
    dataIndex: keyof T;
    title: ReactNode;
    render: (record: T) => ReactNode;
    }

    const Person = { name: "John", age: 10 };

    const cols: Column<typeof Person> = {
    dataIndex: "name",
    title: "Client Name",
    render: (v) => v.name
    }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2736 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:00 · PVG 18:00 · LAX 02:00 · JFK 05:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.