Home / Questions / 272958
Accepted
gbianchi
Asked: 2020-06-19 07:41:53 +0800 CST 2020-06-19 07:41:53 +0800 CST

How to get an element of a class by key without TS protesting the key?

  • 772

You have the following interface:

export interface XX{
    Campo1?: string;
    Campo2?: string;
    Campo3?: string;
    [key: string]: string;
}

The key is to be able to access an element of the same in the form

const p: XX = {};
p['Campo1'];

But the following TS error occurs

Property 'Field1' of type 'string | undefined' is not assignable to string index type 'string' (ts 2411)

Everything goes as if nothing, so I don't know if it's a TS error due to some bug, or I'm simply defining something wrong. How to solve that problem?

The error occurs in the interface definition.

enter image description here

If we change some of the strings to any, the error for that field goes away... but we don't want to use any.

export interface XX{
    Campo1?: any; <--- desaparece el error para este campo
    Campo2?: string;
    Campo3?: string;
    [key: string]: string;
}

I have configured ts in the following way (extract)

"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
typescript

2 Answers

  1. Best Answer

    The problem is in the last line of your definition:

    export interface XX{
    Campo1?: string;
    Campo2?: string;
    Campo3?: string;
    [key: string]: string; //esta línea
}

    If we look at the documentation we see the following:

    While string index signatures are a powerful way to describe the “dictionary” pattern, they also enforce that all properties match their return type. This is because a string index declares that obj.property is also available as obj["property"].

    That is, if you define that the interface has properties that store values ​​that are string(like this [key: string]: string;), ALL properties must comply with this. Since it Campo1has a question mark (it can be string or undefined), it does not meet the condition.

    You can fix it like this:

    export interface XX{
    Campo1?: string;
    Campo2?: string;
    Campo3?: string;
    [key: string]: string | undefined; 
}

    Another option would be to relax the compiler checks:

    "strictNullChecks": false

    or also

    "strict": false
    • 5

  2. You have the option strictNullChecksenabled. When you do this it changes the way typescript handles types as it undefinedis normally considered a subset of all types to better resemble the default behavior of javascript.

    In other words, when in Typescript you say you're a: stringreally saying a: string | undefinedso this code is perfectly valid

    let a: string;
a = undefined;
a = 'string cualquiera'

    When you enable strict mode undefinedit is only assignable to itself (same as null).

    The problem then arises indirectly because you are making your Campo1, Campo2, etc properties optional( ?) which is the same as saying

    export interface XX{
    Campo1: string | undefined;
    Campo2: string | undefined;
    Campo3: string | undefined;
    [key: string]: string;
}

    In fact if you try that code the error will be identical.

    If you try to remove the optional fields the error disappears

    export interface XX{
    Campo1: string;
    Campo2: string;
    Campo3: string;
    [key: string]: string;
}

    So it all boils down to the fact that the indexed property [key: string]: stringalso matches your Campo1, Campo2, etc properties and the types are not compatible.

    The solutions I recommend are:

    1. Modify properties so they are not optional

    2. Extend the type a string | undefinedfor the indexed property so its signature matches that of the optional types

      export interface XX{
    Campo1?: string;
    Campo2?: string;
    Campo3?: string;
    [key: string]: string | undefined;
}

    3. Remove the Campo1, Campo2, etc properties because your interface is equivalent to just using this anyway and when all properties are optional type-checking doesn't really help much except for intellisense.

      export interface XX{
    [key: string]: string;
}
    • 4