So deklarieren und importieren Sie Typoskript-Schnittstellen in einer separaten Datei

78

Ich möchte in meinem typoskriptbasierten Projekt mehrere Schnittstellen in einer eigenen Datei definieren, aus denen ich Klassen für die Produktion sowie Mocks zum Testen implementieren werde. Ich kann jedoch nicht herausfinden, wie die richtige Syntax lautet. Ich habe viele Tutorials zum Deklarieren und Implementieren von Schnittstellen gefunden, aber alle haben eine triviale Implementierung sowohl der Schnittstelle als auch der abgeleiteten Klassen in derselben Datei, was nicht sehr real ist. Was ist der richtige Weg, um die Schnittstellen zu exportieren und zu importieren?

typescript typescript1.8 Schnauben
quelle

Antworten:

111

Sie müssen die Schnittstelle aus der definierten Datei exportieren und überall dort importieren, wo Sie sie verwenden möchten.

in IfcSampleInterface.ts:

export interface IfcSampleInterface {
   key: string;
   value: string;
}

Im SampleInterface.ts

import { IfcSampleInterface } from './IfcSampleInterface';
let sampleVar: IfcSampleInterface;
Ajay
quelle
3
Dies ist die Syntax, die ich anfangs ausprobiert habe, aber ich bekomme Fehler damit.
schnauben
1
@snort können Sie bitte erläutern, welche Art von Fehler Sie erhalten?
Ajay
Es sieht so aus, als ob das Problem darin besteht, dass der Typname in Aurelia nicht als Schlüssel verwendet werden kann (oder ich weiß einfach nicht, wie ich ihn richtig deklarieren soll). Der Fehler lautet "Name [BTAuthService] kann nicht gefunden werden". Dieser Code gibt den Fehler aus: container.registerSingleton (BTAuthService, MockAuthService); Wenn ich die Schnittstelle zuerst einer Variablen zuweise und diese an registerSingleton übergebe, wird keine Fehlermeldung angezeigt.
schnauben
Ich nehme an, ich verstehe etwas über TS / JS-Konstruktoren und Typnamen falsch.
schnauben
Schnittstellentypen werden aus dem transpilierten Code entfernt, wodurch der Fehler auftritt. Markieren Sie dies als die richtige Antwort auf meine unvollständige Frage. Das eigentliche Problem war, dass ich in diesem speziellen Fall versuchte, den Namen der Schnittstelle als Typnamen zu verwenden.
schnauben
60

Verwenden Sie definition ( d.ts) - Dateien und Namespaces. Auf diese Weise müssen keine Module importiert / exportiert werden. Das DefinitelyTyped-Projekt enthält Anleitungen und eine Vielzahl von Beispielen .

Artem Koshelev
quelle
5
Dies ist die richtige Antwort IMO. Wenn Ihre Datei nur eine Schnittstelle definiert, ist dies der bevorzugte Weg und viel sauberer.
Orad
8
Wenn Sie module.tsund module.d.tsim selben Ordner, wird der Compiler die skip - module.d.tsDatei, so dass Ihre Erklärungen werden nicht berücksichtigt. Benennen Sie die d.tsDatei um oder verschieben Sie sie in einen anderen Ordner. Dieser Ansatz ist hilfreich, wenn Sie ein geeignetes Modul haben , aber wenn Sie Typen zwischen Modulen teilen möchten , sollten Sie ihn besser verwenden import .. from ...
Jpenna
4
Wie ist das überhaupt eine akzeptable Antwort. Sie mögen denken, dass es in die richtige Richtung geht (und wahrscheinlich auch), aber ein allgemeiner Link zu einer Liste von Artikeln, die wir durchsuchen müssen, um die Antwort zu finden, auf die Artem anspielt, entspricht dem Sprichwort "Ich bin"
Ich
Ich d.tshabe meinem Reaktionsprojekt hinzugefügt , muss aber noch die Schnittstellen importieren.
Hamid Mayeli
10

Exportieren Sie nur wenige Schnittstellen

Ohne mehrere Exporte zu verteilen , können Sie sie in einem einzigen export {}Block gruppieren (in diesem Fall sollte kein Dateitypdefault deklariert werden):

// interfaces.ts
interface IWords {
  [key: string]: string; 
}

interface INumbers {
  [key: string]: number; 
}

interface IBooleans {
  [key: string]: boolean; 
}

interface IValues {
  [key: string]: string | number; 
}

interface IStructures {
  [key: string]: INumbers | IBooleans | IValues;
}

export {
  // not exporting IWords | INumbers
  IBooleans,
  IValues,
  IStructures,
}

Beispiel importieren

import { IBooleans, IValues, IStructures } from 'interfaces';

const flags: IBooleans = { read: true, write: false, delete: false };

const userFile: IValues = { user: 1, username: 'One', file: 'types.txt' };

const userContext: IStructure = {
  file: userFile,
  permissions: flags,
  counts: { views: 3, writes: 1 } // => INumbers (lint: try to remove IValues from IStructures)
};
CPHPython
quelle
3

Sie müssen die Schnittstellen in die Datei exportieren, in der sie definiert sind, und sie in die Dateien importieren, in denen sie verwendet werden. Beispiele finden Sie unter diesem Link.

x.ts.

interface X{
    ...
}
export default X

y.ts

import X from "./x.ts"
// You can use X now

Weitere Informationen finden Sie unter https://www.typescriptlang.org/docs/handbook/modules.html


quelle