Ich kann mit Typescript nicht herausfinden, wie Standardeigenschaftswerte für meine Komponenten festgelegt werden.
Dies ist der Quellcode:
class PageState
{
}
export class PageProps
{
foo: string = "bar";
}
export class PageComponent extends React.Component<PageProps, PageState>
{
public render(): JSX.Element
{
return (
<span>Hello, world</span>
);
}
}
Und wenn ich versuche, die Komponente so zu verwenden:
ReactDOM.render(<PageComponent />, document.getElementById("page"));
Ich erhalte die Fehlermeldung, dass die Eigenschaft foo
fehlt. Ich möchte den Standardwert verwenden. Ich habe auch versucht, static defaultProps = ...
innerhalb der Komponente zu verwenden, aber es hatte keine Wirkung, wie ich vermutete.
src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle...'.
Wie kann ich Standardeigenschaftswerte verwenden? Viele JS-Komponenten, die mein Unternehmen verwendet, verlassen sich auf sie, und es ist keine Wahl, sie nicht zu verwenden.
reactjs
typescript
tsx
Tom
quelle
quelle
static defaultProps
ist richtig. Können Sie diesen Code posten?Antworten:
Standard Requisiten mit Klassenkomponente
Verwendung
static defaultProps
ist richtig. Sie sollten auch Schnittstellen und keine Klassen für die Requisiten und den Status verwenden.Update 2018/12/1 : TypeScript hat die Typprüfung im
defaultProps
Laufe der Zeit verbessert . Lesen Sie weiter für die neueste und beste Verwendung bis hin zu älteren Verwendungen und Problemen.Für TypeScript 3.0 und höher
TypeScript hat speziell Unterstützung hinzugefügt
defaultProps
, damit die Typprüfung wie erwartet funktioniert. Beispiel:Was gerendert und kompiliert werden kann, ohne ein
foo
Attribut zu übergeben:Beachten Sie, dass:
foo
ist nicht als optional markiert (dhfoo?: string
), obwohl es nicht als JSX-Attribut erforderlich ist. Das Markieren als optional würde bedeuten, dass dies möglich istundefined
, wird es jedoch niemals sein,undefined
dadefaultProps
ein Standardwert bereitgestellt wird. Stellen Sie sich das ähnlich vor, wie Sie einen Funktionsparameter optional oder mit einem Standardwert markieren können, aber nicht beide, aber beide bedeuten, dass der Aufruf keinen Wert angeben muss . TypeScript 3.0+ behandeltdefaultProps
auf ähnliche Weise, was für React-Benutzer wirklich cool ist!defaultProps
hat keine explizite Typanmerkung. Sein Typ wird abgeleitet und vom Compiler verwendet, um zu bestimmen, welche JSX-Attribute erforderlich sind. Sie können verwenden,defaultProps: Pick<PageProps, "foo">
um sicherzustellendefaultProps
, dass eine Teilmenge von übereinstimmtPageProps
. Mehr zu dieser Einschränkung wird hier erklärt .@types/react
Version16.4.11
ordnungsgemäß funktioniert.Für TypeScript 2.1 bis 3.0
Bevor TypeScript 3.0 die Compiler-Unterstützung für
defaultProps
Sie implementierte , konnten Sie diese noch verwenden, und sie funktionierte zur Laufzeit zu 100% mit React. Da TypeScript jedoch bei der Suche nach JSX-Attributen nur Requisiten berücksichtigte, mussten Sie Requisiten mit Standardeinstellungen als optional markieren?
. Beispiel:Beachten Sie, dass:
defaultProps
mit ,Partial<>
so dass es typ Kontrollen gegen Ihre Requisiten, aber Sie haben nicht alle erforderliche Eigenschaft mit einem Standardwert zu liefern, die keinen Sinn macht , da geforderte Eigenschaften sollen nie eine Standard benötigen.strictNullChecks
des Werts vonthis.props.foo
wirdpossibly undefined
und erfordert eine Nicht-Null-Zusicherung (dhthis.props.foo!
) oder Typ-Guard (dhif (this.props.foo) ...
) zu entfernenundefined
. Dies ist ärgerlich, da der Standard-Prop-Wert bedeutet, dass er niemals undefiniert sein wird, aber TS hat diesen Ablauf nicht verstanden. Dies ist einer der Hauptgründe, warum TS 3.0 explizite Unterstützung für hinzugefügt hatdefaultProps
.Vor TypeScript 2.1
Dies funktioniert genauso, aber Sie haben keine
Partial
Typen. Lassen Sie also einfach diePartial<>
Standardwerte für alle erforderlichen Requisiten weg und geben Sie sie entweder an (auch wenn diese Standardeinstellungen niemals verwendet werden) oder lassen Sie die explizite Typanmerkung vollständig weg.Standard Requisiten mit Funktionskomponenten
Sie können sie auch
defaultProps
für Funktionskomponenten verwenden, müssen jedoch Ihre Funktion in dieFunctionComponent
(StatelessComponent
in der@types/react
vorherigen Version16.7.2
) Schnittstelle eingeben, damit TypeScript überdefaultProps
die Funktion Bescheid weiß :Beachten Sie, dass Sie
Partial<PageProps>
nirgendwo verwenden müssen, da diesFunctionComponent.defaultProps
in TS 2.1+ bereits als Teil angegeben ist.Eine andere nette Alternative (das ist, was ich benutze) ist, deine
props
Parameter zu zerstören und Standardwerte direkt zuzuweisen:Dann brauchen Sie das überhaupt nicht
defaultProps
! Beachten Sie , dassdefaultProps
eine Funktionskomponente Vorrang vor Standardparameterwerten hat, da React diedefaultProps
Werte immer explizit übergibt (sodass die Parameter niemals undefiniert sind und der Standardparameter daher niemals verwendet wird) der eine oder andere, nicht beide.quelle
<PageComponent>
irgendwo etwas verwenden, ohne diefoo
Requisite zu übergeben. Sie können esfoo?: string
in Ihrer Benutzeroberfläche optional machen .public static defaultProps
oderstatic defaultProps
(public
ist Standard), damit alles (Compiler- und React-Laufzeit) ordnungsgemäß funktioniert. Es funktioniert möglicherweiseprivate static defaultProps
nur zur Laufzeit mitprivate
undpublic
existiert zur Laufzeit nicht, aber der Compiler würde nicht richtig funktionieren.Verwenden Sie in Typescript 2.1+ Partial <T>, anstatt Ihre Schnittstelleneigenschaften optional zu machen.
quelle
Mit Typescript 3.0 gibt es eine neue Lösung für dieses Problem:
Beachten Sie, dass Sie eine neuere Version von
@types/react
als benötigen, damit dies funktioniert16.4.6
. Es funktioniert mit16.4.11
.quelle
export interface Props { name?: string;}
Wo ist der Name eine optionale Requisite? IchTS2532 Object is possibly 'undefined'
undefined
eine Art automatischer Standardwert für diese Requisiten ist. Sie möchtenundefined
manchmal als expliziter Wert übergeben können, haben aber einen anderen Standardwert? Hast du esexport interface Props {name: string | undefined;}
stattdessen versucht ? Ich habe das nicht versucht, nur eine Idee.?
ist dasselbe wie das Hinzufügen|undefined
. Ich möchte optional die Requisite übergeben unddefaultProps
diesen Fall behandeln lassen. Sieht so aus, als wäre dies in TS3 noch nicht möglich. Ich werde nur die gefürchtetename!
Syntax verwenden, da ich weiß, dass es nie ist,undefined
wanndefaultProps
festgelegt wird. Trotzdem danke!Für diejenigen mit optionalen Requisiten, die Standardwerte benötigen. Gutschrift hier :)
quelle
Aus einem Kommentar von @pamelus zur akzeptierten Antwort:
Tatsächlich können Sie die Schnittstellenvererbung von Typescript verwenden . Der resultierende Code ist nur ein bisschen ausführlicher.
quelle
Für die Funktionskomponente möchte ich das
props
Argument lieber beibehalten. Hier ist meine Lösung:quelle
Funktionskomponente
Für die Funktionskomponente ist die beste Vorgehensweise wie folgt: Ich erstelle eine Beispiel-Spinner-Komponente:
quelle