typescript - 如何在 Typescript 中将默认值设置为具有 keyof 类型（来自显式类型）的参数

Question

我在 Typescript 将默认值传递给类似于pickfrom lodash的函数时遇到问题。

该函数接受一个已知（非通用）接口的对象和一组键以从该对象中选择和返回。

该函数的常规（无默认参数）声明可以正常工作，但是，我似乎无法将数组设置为选择要选择的属性的参数的默认值。

interface Person {
    name: string;
    age: number;
    address: string;
    phone: string;
}

const defaultProps = ['name', 'age'] as const;


function pick<T extends keyof Person>(obj: Person, props: ReadonlyArray<T> = defaultProps): Pick<Person, T> {    
    return props.reduce((res, prop) => {
        res[prop] = obj[prop];
        return res;
    }, {} as Pick<Person,T>);
}

const testPerson: Person = {
    name: 'mitsos',
    age: 33,
    address: 'GRC',
    phone: '000'
};

如果您删除默认值= defaultProps，它将成功编译，并且返回的类型从示例调用中也是正确的，例如：const testPick = pick(testPerson, ['name']);

但是，设置默认值会产生以下错误：

Type 'readonly ["name", "age"]' is not assignable to type 'readonly T[]'.
  Type '"name" | "age"' is not assignable to type 'T'.
    '"name" | "age"' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'keyof Person'.
      Type '"name"' is not assignable to type 'T'.
        '"name"' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'keyof Person'.

如何成功地将默认值传递给props参数？

打字稿游乐场链接在这里

更新

在玩了一会儿之后，我尝试使用条件类型并设法使函数签名正常工作，但是现在无法正确识别 reduce 的问题：

interface Person {
    name: string;
    age: number;
    address: string;
    phone: string;
}

const defaultProps = ['name', 'age'] as const;

type DefaultProps = typeof defaultProps;

type PropsOrDefault<T extends keyof Person> = DefaultProps | ReadonlyArray<T>;

type PickedPropOrDefault<T extends PropsOrDefault<keyof Person>> = T extends DefaultProps ? Pick<Person, DefaultProps[number]> : Pick<Person, T[number]>;


function pick<T extends keyof Person>(obj: Person, props: PropsOrDefault<T> = defaultProps): PickedPropOrDefault<PropsOrDefault<T>> {    
    return props.reduce<PickedPropOrDefault<PropsOrDefault<T>>>((res, prop) => {
        res[prop] = obj[prop];
        return res;
    }, {} as PickedPropOrDefault<PropsOrDefault<T>>);
}

const testPerson: Person = {
    name: 'mitsos',
    age: 33,
    address: 'GRC',
    phone: '000'
};

const result = pick(testPerson) //  Pick<Person, "name" | "age">
const result2 = pick(testPerson, ['phone']) // Pick<Person, "phone">
const result3 = pick(testPerson, ['abc']) // expected error

更新游乐场

标签： typescripttypescript-genericsdefault-parameterskeyof

Answer 1

您可以重载pick函数：

interface Person {
    name: string;
    age: number;
    address: string;
    phone: string;
}

const defaultProps = ['name', 'age'] as const;

type DefaultProps = typeof defaultProps;

function pick(obj: Person): Pick<Person, DefaultProps[number]>
function pick<Prop extends keyof Person, Props extends ReadonlyArray<Prop>>(obj: Person, props: Props): Pick<Person, Props[number]>
function pick<T extends keyof Person>(obj: Person, props = defaultProps) {
    return props.reduce((res, prop) => ({
        ...res,
        [prop]: obj[prop]
    }), {} as Pick<Person, T>);
}

const testPerson = {
    name: 'mitsos',
    age: 33,
    address: 'GRC',
    phone: '000'
};

const result = pick(testPerson) //  Pick<Person, "name" | "age">
const result2 = pick(testPerson, ['phone']) // Pick<Person, "phone">
const result3 = pick(testPerson, ['abc']) // expected error

操场

pick您可以在我的文章和其他答案 中找到更高级的类型： First , second , third

更新

props此代码中的参数存在问题：

function pick<T extends keyof Person>(obj: Person, props: PropsOrDefault<T> = defaultProps): PickedPropOrDefault<PropsOrDefault<T>> {
    return props.reduce((res, prop) => {
        return {
            ...res,
            [prop]: obj[prop]
        }
    }, {});
}

PropsOrDefault可能等于这种类型：type UnsafeReduceUnion = DefaultProps | ReadonlyArray<'phone' | 'address'> 您可能已经注意到，联合中的这些数组是完全不同的。他们没有任何共同之处。

如果您要致电reduce：

declare var unsafe:UnsafeReduceUnion;

unsafe.reduce()

你会得到一个错误，因为reduce是not callable