typescript - property is missing in type ... but property exists

in js, you can do the following:

let x = 'b';

let y = {
    [x]: 6
};

console.log(y);

let x = 'b';

let y = {
    [x]: 6
};

console.log(y);

and you will see it has the property b set to 6, as expected. however, typescript trips up in the following code:

let x: string = 'b';

let y: {b: number} = {
    [x]: 6,
};

console.log(y);

let x: string = 'b';

let y: {b: number} = {
    [x]: 6,
};

console.log(y);

https://www.typescriptlang.org/play/?#code/DYUwLgBAHgXBDOYBOBLAdgcwgXggcgCM8BuAKFNEgE84BvAuNAVwFsCQkBfHCW0iARADaUALpwAbABpSnMqQDGAezTwloAHTAlGABRUAlGSA the code runs properly, but typescript is not happy about it, despite the priperty being right there! it gives me this:

Property 'b' is missing in type '{ [x]: number; }' but required in type '{ b: number; }'.

it doesn't make any sense at all, as [x] and b are the same property! exactly the same thing! so, how do i make typescript see and accept that there is nothing wrong with this, besides @ts-ignore?

26 Replies

Jochem•2d ago

so uh... this is incredibly dumb, but:

let x: 'b' = 'b';

let y: {b: number} = {
    [x]: 6,
};

console.log(y);

let x: 'b' = 'b';

let y: {b: number} = {
    [x]: 6,
};

console.log(y);

otherwise the compiler won't be smart enough to figure out that x is b, apparently though it technically could

ἔρωςOP•2d ago

that makes sense, use a narrow type 🤔 i guess it trips because x could be any string i do have a more complex example where this still dies :/ let me try to reproduce it

Jochem•2d ago

I'm guessing it won't run any JS, even if in this minimal example. Like, they could have it do simple assignment stuff like this, but the added benefit would be entirely lost because in this example you could just write b: 6 and be done

ἔρωςOP•2d ago

https://www.typescriptlang.org/play/?#code/C4TwDgpgBAggQgYSgXigcgIZoD5oEY5oDGaA3AFDlEA2GAznVABoCaAWlAN7kCQdwGYAEsiUAOYRgUAOIBRACoB9GAAoAlAC5YiLlABOkgK56AduiykoAX179BI8ZJkLFcdVvhJO+o6fQFLGz4BYVEJKTklBHdtLx9gYzNiMmtKKHSoO1DmLU4AbQBrCBAoITNPAF0tE0MAWzwIPSsULnIM9qg81jYAOkjlKqgAVgAaNo70rvY+lzhBgDYxicnumajBgHYljKsKGyA i cant copy the text because im on my phone but this is exactly what im trying to do in production i made it work with the same method you presented i dont like it because it loses the type, but oh well

Jochem•2d ago

Ha!

type ABC = 'a'|'b'|'c';

class XYZ {
    static get GET_A(): ABC & 'a' { return 'a'; }
    static get GET_B(): ABC & 'b' { return 'b'; }
    static get GET_C(): ABC & 'c' { return 'c'; }

    static X: {[key in ABC]: number} = {
        [XYZ.GET_A]: 5,
        [XYZ.GET_B]: 6,
        [XYZ.GET_C]: 7,
    };
}

type ABC = 'a'|'b'|'c';

class XYZ {
    static get GET_A(): ABC & 'a' { return 'a'; }
    static get GET_B(): ABC & 'b' { return 'b'; }
    static get GET_C(): ABC & 'c' { return 'c'; }

    static X: {[key in ABC]: number} = {
        [XYZ.GET_A]: 5,
        [XYZ.GET_B]: 6,
        [XYZ.GET_C]: 7,
    };
}

union types to the rescue or intersection types rather I'm not sure if I fixed it by breaking your example in a useless way, but this does compile with 0 errors

ἔρωςOP•2d ago

let me try 😮 it works! but it is the same as not having ABC there

Jochem•2d ago

it is and isn't. The compiler treats it as if it's not there, but the person reading it will have more context

ἔρωςOP•2d ago

yup, which is nice

Choo♚𝕂𝕚𝕟𝕘•2d ago

let x: string = 'b';

let y: {[x]: number} = {
    [x]: 6,
};

console.log(y);

let x: string = 'b';

let y: {[x]: number} = {
    [x]: 6,
};

console.log(y);

The problem with your original TS code is x can be reassigned to another string so using "b" as a literal string value for the key is problematic. Jochem's solution gets around this because x is only allowed to have a value of "b" and no other string value.

ἔρωςOP•2d ago

i figured that but on the 2nd example, it makes absolutely no sebse sense

Choo♚𝕂𝕚𝕟𝕘•2d ago

Typescript primarily does static analysis and not runtime analysis. There is some limited runtime-like analysis when using if statements for type narrowing. The issue with [x] is it requires runtime analysis to determine that x was never reassigned. This code produces an error for the same reason:

type five = 5;
const n:five = 2 + 3;

type five = 5;
const n:five = 2 + 3;

The value of 2 + 3 requires runtime analysis.

ἔρωςOP•2d ago

that makes no sense that's a constant expression static analysis tools can handle that easily

Choo♚𝕂𝕚𝕟𝕘•2d ago

That depends on the compiler/interpreter. A C++ compiler would convert 2+3 to 5 as part of its optimization, and the compiled code would not even contain an addition operation, but TS doesn't do that.

ἔρωςOP•2d ago

other tools automatically detect that 2+3 is 5

Jochem•2d ago

TS isn't a real compiler though it leaves the optimizations to JS itself

ἔρωςOP•2d ago

i know im not talking about that

ἔρωςOP•2d ago

im talking about this

Jochem•2d ago

me too? TS isn't running the code, it's just seeing that Number+Number produces Number, and Number isn't 5

ἔρωςOP•2d ago

but you're talking about the execution, im walking about typescript making sense from it, right? i know, but it is a constant expression

Jochem•2d ago

yes, which isn't getting optimized by typescript

ἔρωςOP•2d ago

it could be a tiny bit smarter and see that constant + constant = constant and automatically create the type 5

Jochem•2d ago

that's effort vs reward stuff. It's going to be pretty uncommon that you'd have "2 + 3" somewhere in your code, and if you do you should just optimize it yourself like, why are you even doing that math every runtime? It makes no sense

ἔρωςOP•2d ago

that's true, but from a typechecking point, i do believe it should be smarter

Jochem•2d ago

it sounds like a really niche thing that would add a potentially huge step to the compilation process that isn't usually going to be sensical in real typescript cause 99.9% of the variables you use aren't constant expressions

Choo♚𝕂𝕚𝕟𝕘•2d ago

Being smarter makes it slower. TSC runs in Javascript, which is a slow language, so it's necessary to not make it very smart. The new Golang version of TSC is still experimental.

ἔρωςOP•2d ago

dumb, stupid and fast makes sense to me that's true

Gaming

Programming

typescript - property is missing in type ... but property exists

Did you find this page helpful?