TS2339:联合类型上不存在属性-属性字符串|不明确的 [英] TS2339: Property does not exist on union type - property string | undefined

问题描述

我的联合体类型出现问题，如下所示:

I have problem with my union type, which looks like this:

type RepeatForm = {
    step:
        | {
              repeat: false;
          }
        | {
              repeat: true;
              from: undefined;
          }
        | {
              repeat: true;
              from: string;
              by?: string;
          };
};

还有以下函数，我想在其中获取by的值:

And I have following function where I want to get value of by if it's there:

export const getByField = (form: RepeatForm) => {
    if (form.step.repeat === false || form.step.from === undefined) {
        return null;
    }
    const x = form.step.from;
    return form.step.by;
};

我收到此错误:Property 'by' does not exist on type '{ repeat: true; from: undefined; } | { repeat: true; from: string; by?: string | undefined; }'. Property 'by' does not exist on type '{ repeat: true; from: undefined; }'.

I get this error: Property 'by' does not exist on type '{ repeat: true; from: undefined; } | { repeat: true; from: string; by?: string | undefined; }'. Property 'by' does not exist on type '{ repeat: true; from: undefined; }'.

这让我感到非常困惑，因为TypeScript知道form.step.from与undefined不同，他甚至将变量x的类型插值到string.

Which is super confusing for me, because TypeScript know that form.step.from is different from undefined and he even interpolates type of variable x to string.

此问题的原因是什么?那我该如何访问by属性?

What's the reason of this issue? How can I access by property then?

推荐答案

原始 PR string文字类型这一事实非常明确(对于已出现的情况，可以选择添加对boolean和number文字类型的支持).因此，似乎不支持您根据字段类型(string与undefined)进行区分的用例.例如，这不起作用:

The original PR for discriminated unions is very specific about the fact that the discriminating field must be a string literal type (with the option to add support for boolean and number literal types which seems to have happened). So your use case where you are discriminating based on the type of the field (string vs undefined) does not appear to be supported. This does not work for example:

let u!: { v: number, n: number } | { v: string, s: string}
if(typeof u.v === 'number') {
    u.n // not accesible, type not narrowed 
}

我们可以使用条件类型和自定义类型防护来使事情正常运行:

We could use conditional types and a custom type guard to make things work:

function isUndefined<T, K extends keyof T>(value : T, field: K) : value is Extract<T, { [P in K] : undefined }> {
    return !!value[field]
}

export const getByField = (form: RepeatForm) => {
    if (form.step.repeat === false || isUndefined(form.step, 'from')) {
        return null;
    }
    const x = form.step.from;
    return form.step.by;
};

我们还可以创建此函数的通用版本，该版本允许按任何类型进行缩小:

We can also create a general version of this function that allows narrowing by any type:

type ExtractKeysOfType<T, TValue> = { [P in keyof T]: T[P] extends TValue ? P : never}[keyof T]

function fieldOfType<T, K extends ExtractKeysOfType<T, string>>(value : T, field: K, type: 'string'): value is Extract<T, { [P in K] : string }>
function fieldOfType<T, K extends ExtractKeysOfType<T, number>>(value : T, field: K, type: 'number'): value is Extract<T, { [P in K] : number }>
function fieldOfType<T, K extends ExtractKeysOfType<T, boolean>>(value : T, field: K, type: 'boolean'): value is Extract<T, { [P in K] : boolean }>
function fieldOfType<T, K extends ExtractKeysOfType<T, Function>>(value : T, field: K, type: 'function'): value is Extract<T, { [P in K] : Function }>
function fieldOfType<T, K extends ExtractKeysOfType<T, symbol>>(value : T, field: K, type: 'symbol'): value is Extract<T, { [P in K] : symbol }>
function fieldOfType<T, K extends ExtractKeysOfType<T, object>>(value : T, field: K, type: 'object'): value is Extract<T, { [P in K] : object }>
function fieldOfType<T, K extends ExtractKeysOfType<T, undefined>>(value : T, field: K, type: 'undefined'): value is Extract<T, { [P in K] : undefined }>
function fieldOfType<T, K extends keyof T, TValue extends T[K]>(value : T, field: K, type: new (...args:any[])=> TValue): value is Extract<T, { [P in K] : TValue }>
function fieldOfType<T, K extends keyof T>(value : T, field: K, type: string| Function) :boolean {
    if(typeof type === 'string') {
        return typeof value[field] === type;
    } else {
        return value[field] instanceof type
    }
}

const getByField = (form: RepeatForm) => {
    if (form.step.repeat === false || fieldOfType(form.step, 'from', 'undefined')) {
        return null;
    }
    const x = form.step.from;
    return form.step.by;
};


let u: { v: number, n: number } | { v: string, s: string}={ v: 0, n : 10};
if(fieldOfType(u, 'v', 'number')) {
    console.log(u.n);
}

class A {private a: undefined;}
class B {private b: undefined;}
let uc: { v: A, n: number } | { v: B, s: string} = Math.random() > 0.5 ? { v: new B(), s: '10' } : { v: new A(), n: 10 };
if(fieldOfType(uc, 'v', A)) {
    console.log(uc.n)
}

这篇关于TS2339:联合类型上不存在属性-属性字符串|不明确的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！