Si vous séparez les classes dactylographiées par fichiers, une erreur se produit. Comment se peut-il?

Question

Dans quoi peut-il y avoir une erreur? Lorsque toutes les classes sont dans le même fichier, l'erreur n'apparaît pas. Mais dès que je place les classes dans des fichiers différents, les erreurs suivantes apparaissent:

/index2.ts(8,13): erreur TS2345: Argument de type « {name: chaîne; valeur: nombre; } 'n'est pas assignable au paramètre de type' ConfigOption | ConfigOption [] '. Tapez '{name: chaîne; valeur: nombre; } 'n'est pas assignable pour taper' ConfigOption [] '. La propriété 'length' est manquante dans le type '{name: string; valeur: nombre; } '.

/index2.ts(14,12): erreur TS2345: Argument de type '{name: string; valeur: chaîne; } [] 'n'est pas assignable au paramètre de type ' ConfigOption [] '. Tapez '{name: chaîne; valeur: chaîne; } 'n'est pas assignable pour taper' ConfigOption '. La propriété 'comment' est manquante dans le type '{name: string; valeur: chaîne; } '. 17:36:36 - Compilation terminée. Surveiller pour le fichier changements.

interface IOption { 
    name: string; 
    value?: any; 
    comment?: string; 
} 

class ConfigOption { 
    name: string; 
    value: any; 
    comment: string; 
    constructor(data: IOption) {} 
} 

type TOptionArray = (IOption | ConfigOption)[]; 

class Config { 
    constructor(options?: TOptionArray) {} 
    push(data: ConfigOption | IOption | TOptionArray) {} 
} 

// Test example: 

const config = new Config; 

config.push({ 
    name: 'name', 
    value: 0 
}); 


new Config([{ 
    name: 'role', 
    value: 'camelcase(this.element.name)' 
}]); 

https://www.dropbox.com/s/u0ergcw4pt88oeu/typescriptproblem.zip?dl=0

Mise en page du code par les fichiers:

// config/Config.ts 

import IOption from './option/ConfigOption'; 
import ConfigOption from './option/ConfigOption'; 

export type TOptionArray = (IOption | ConfigOption)[]; 

export default class Config { 
    constructor(options?: TOptionArray) {} 
    push(data: ConfigOption | IOption | TOptionArray) {} 
} 

// config/option/ConfigOption.ts 

import Config from '../Config'; 

export interface IOption { 
    name: string; 
    value?: any; 
    comment?: string; 
} 

export default class ConfigOption { 
    name: string; 
    value: any; 
    comment: string; 
    constructor(data: IOption) {} 
} 


// index2.ts 

import Config from './config/Config'; 

const config = new Config; 

config.push({ 
    name: 'name', 
    value: 0 
}); 


new Config([{ 
    name: 'role', 
    value: 'camelcase(this.element.name)' 
}]); 

Answer 1

Vous n'importez pas correctement.

Vous devez changer config/option/ConfigOption.ts pour supprimer l'exportation par défaut:

export class ConfigOption { // Removed the `default` keyword. 

Et config/Config.ts, l'importation comme ceci:

import { IOption, ConfigOption } from './option/ConfigOption'; 

Dans mon code, je l'ai complètement banni les exportations par défaut pour éviter des erreurs comme celle-ci. Vous pouvez conserver l'exportation par défaut mais je ne la recommande pas.

---

La façon dont vous l'aviez, était comme ça:

import IOption from './option/ConfigOption'; 
import ConfigOption from './option/ConfigOption'; 

Ceci importe l'exportation par défaut de ./option/ConfigOption.ts et attribue localement à la fois à IOption et ConfigOption. Donc, votre IOption ne correspondait pas au IOption dans ./option/ConfigOption.ts mais à la place il correspondait à l'exportation par défaut de ce module qui est ConfigOption. À quoi cela ressemble-t-il lorsqu'il est divisé en deux fichiers?

Answer 2

Vous pouvez laisser les mots-clés à l'exportation et d'importation, ce ne sont pas nécessaires, même si vous travaillez avec séparé Fichiers .ts A moins que vous ne souhaitiez travailler avec des modules ou des espaces de noms, mais que vous ne le souhaitez pas?