打字稿：执行一致的对象键类型参数

Question

我有一个Column接口，可以使基于该键的行值：如果我明确地设置每个列的类型

interface Column<Row, Field extends keyof Row> { 
    key: Field; 
    render: (value: Row[Field]) => React.ReactNode; 
} 

，然后我得到了想要的行为。例如，以下是无效的：

interface User { 
    id: number; 
    name: string; 
} 

const column: Column<User, "id"> = { 
    key: "id", 
    render(id: string) { 
     return id; 
    } 
}; 

因为id属性是一个字符串，而不是数字。有没有办法获得这种行为，而不必单独指定每个列的类型？例如，以下类型的检查：

const columns: Array<Column<User, keyof User>> = [ 
    { 
     key: "id", 
     render(id: string) { 
      return id; 
     } 
    } 
]; 

因为Field被实例化到keyof User，而不是一个特定的键。

Answer 1

啊，我喜欢这种类型的问题。你遇到的一个问题是，TypeScript不会让你遗漏类型参数和infer their types。你想说一些类似于Column<User>的地方，其中类型参数是从你传递给它的对象字面量推断出来的。好了，我们不能这样做直接......但我们可以间接得到这样的效果：

function columnsFor<Row>() { 
    function of<Field extends keyof Row>(column: Column<Row, Field>): Column<Row, Field> { 
    return column; 
    } 
    return of; 
} 

功能columnsFor是不大不小的curried功能;您可以明确设置类型参数，并且它返回另一个函数，该函数接受Column<Row,Field>对象任意有效类型Field。这里是你如何使用它：

const userColumn = columnsFor<User>();  

const goodColumn = userColumn({ 
    key: "id", 
    render(id: number) { 
    return id; 
    } 
}); // ok, inferred as Column<User, "id"> 

const badColumn = userColumn({ 
    key: "id", 
    render(id: string) { 
    return id; 
    } 
}); // error as expected 

的userColumn功能将只接受一些Column<User, Field>类型的参数，并从这样的说法推断Field。现在，您可以继续制作该阵列：

const columns = [ 
    userColumn({ 
    key: "id", 
    render(id: number) { 
     return id; 
    } 
    }), // ok, inferred as Column<User,"id"> 
    userColumn({ 
    key: "name", 
    render(name: string) { 
     return name; 
    } 
    }), // ok, inferred as Column<User,"name"> 
    userColumn({ 
    key: "id", 
    render(id: string) { 
     return id; 
    } 
    }) // error as expected 
]; 

希望对您有用。祝你好运！