5

Se tiene la siguiente interfaz:

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

La key es para poder acceder a un elemento de la misma de la forma

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

Pero se da el siguiente error de TS

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

Anda todo como si nada, asi que no se si es un error de TS por algun bug, o simplemente estoy definiendo algo mal. Como se soluciona ese problema?

El error se da en la definición de la interfaz.

introducir la descripción de la imagen aquí


Si cambiamos algunos de los string por any, el error para ese campo desaparece.. pero no queremos usar any.

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

Tengo configurado ts de la siguiente forma (extracto)

"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
8
  • No es p['Campo1'] en lugar de p[Campo1]. En tu código estas haciendo referencia a una variable y no a un string. Es eso correcto?
    – devconcept
    Commented el 18 jun. 2019 a las 15:51
  • Si si.. correcto.. no es por ahi el problema.. ahora lo arreglo.. lo que pasa es que viene de una variable.. error al hacer el mvce...
    – gbianchi
    Commented el 18 jun. 2019 a las 15:52
  • Creo que el error aparece por algún tipo de bug de TS por que replique tu código en mi proyecto y no me genera ningún error Commented el 18 jun. 2019 a las 16:19
  • 1
    El problema es el strict @FRANCISCOJAVIERBLANCOGRAJAL
    – gbianchi
    Commented el 18 jun. 2019 a las 16:25
  • 1
    @FRANCISCOJAVIERBLANCOGRAJAL si, por ahi venia el problema...
    – gbianchi
    Commented el 18 jun. 2019 a las 16:27

2 respuestas 2

4

El problema está en la última línea de tu definición:

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

Si miramos la documentación vemos lo siguiente:

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"].

Es decir, si defines que la interfaz tiene propiedades que guardan valores que son string (así [key: string]: string;), TODAS las propiedades deben cumplir esto. Puesto que Campo1 tiene un interrogante (puede ser string o undefined), no cumple la condición.

Lo puedes solucionar así:

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

Otra opción sería relajar las comprobaciones del compilador:

"strictNullChecks": false

o también

"strict": false
1
4

Tienes la opción strictNullChecks habilitada. Cuando haces esto cambia la forma en como maneja el typescript los tipos pues normalmente undefined es considerado un subconjunto de todos los tipos para asemejarse mejor al comportamiento por defecto del javascript.

En otras palabras, cuando en Typescript dices a: string en realidad estas diciendo a: string | undefined por lo que este código es perfectamente válido

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

Cuando habilitas modo estricto undefined sólo es asignable a si mismo (igual que null).

El problema surge entonces de manera indirecta porque estas haciendo que tus propiedades Campo1, Campo2, etc sean opcionales(?) lo cual es lo mismo que decir

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

De hecho si pruebas ese código el error será idéntico.

Si pruebas a quitar los campos opcionales el error desaparece

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

Entonces todo se reduce al hecho que la propiedad indexada [key: string]: string coincide también con tus propiedades Campo1, Campo2, etc y los tipos no son compatibles.

La soluciones que te recomiendo son:

  1. Modificar las propiedades para que no sean opcionales
  2. Ampliar el tipo a string | undefined para la propiedad indexada así su firma coincide con la de los tipos opcionales

    export interface XX{
        Campo1?: string;
        Campo2?: string;
        Campo3?: string;
        [key: string]: string | undefined;
    }
    
  3. Eliminar las propiedades Campo1, Campo2, etc porque de todas maneras tu interfaz es equivalente a usar simplemente esto y cuando todas las propiedades son opcionales el type-checking realmente no ayuda mucho excepto por el intellisense.

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.