it-swarm.com.de

Wie deklariere ich einen Typ in TypeScript als nullfähig?

Ich habe eine Schnittstelle in TypeScript.

interface Employee{
   id: number;
   name: string;
   salary: number;
}

Ich möchte "Gehalt" als nullwertfähiges Feld erstellen (wie wir es in C # tun können). Ist dies in TypeScript möglich?

140
Amitabh

Alle Felder in JavaScript (und in TypeScript) können den Wert null oder undefined haben.

Sie können das Feld optional angeben, das sich von nullwert unterscheidet.

interface Employee1 {
    name: string;
    salary: number;
}

var a: Employee1 = { name: 'Bob', salary: 40000 }; // OK
var b: Employee1 = { name: 'Bob' }; // Not OK, you must have 'salary'
var c: Employee1 = { name: 'Bob', salary: undefined }; // OK
var d: Employee1 = { name: null, salary: undefined }; // OK

// OK
class SomeEmployeeA implements Employee1 {
    public name = 'Bob';
    public salary = 40000;
}

// Not OK: Must have 'salary'
class SomeEmployeeB implements Employee1 {
    public name: string;
}

Vergleichen mit:

interface Employee2 {
    name: string;
    salary?: number;
}

var a: Employee2 = { name: 'Bob', salary: 40000 }; // OK
var b: Employee2 = { name: 'Bob' }; // OK
var c: Employee2 = { name: 'Bob', salary: undefined }; // OK
var d: Employee2 = { name: null, salary: 'bob' }; // Not OK, salary must be a number

// OK, but doesn't make too much sense
class SomeEmployeeA implements Employee2 {
    public name = 'Bob';
}
192
Ryan Cavanaugh

Unionstyp ist meiner Meinung nach die beste Option in diesem Fall:

interface Employee{
   id: number;
   name: string;
   salary: number | null;
}

// Both cases are valid
let employe1: Employee = { id: 1, name: 'John', salary: 100 };
let employe2: Employee = { id: 1, name: 'John', salary: null };

BEARBEITEN: Damit dies wie erwartet funktioniert, sollten Sie die strictNullChecks in tsconfig aktivieren. 

67
bjaksic

Fügen Sie dem optionalen Feld einfach ein Fragezeichen ? hinzu.

interface Employee{
   id: number;
   name: string;
   salary?: number;
}
26
Miguel Ventura

Um mehr C # -ähnlich zu sein, definieren Sie den Nullable-Typ folgendermaßen:

type Nullable<T> = T | null;

interface Employee{
   id: number;
   name: string;
   salary: Nullable<number>;
}
11
Tim Santeford

ich hatte die gleiche Frage vor einer Weile. Alle Typen in ts sind nullfähig, da void ein Untertyp aller Typen ist (im Gegensatz zu beispielsweise Scala).

prüfen Sie, ob dieses Flussdiagramm hilfreich ist - https://github.com/bcherny/language-types-comparison#TypeScript

4
bcherny

Der Typ Nullable kann einen Laufzeitfehler auslösen. Daher denke ich, dass es gut ist, eine Compileroption --strictNullChecks zu verwenden und number | null als Typ zu deklarieren. Auch bei verschachtelten Funktionen kann der Compiler, obwohl der Eingabetyp NULL ist, nicht erkennen, was kaputt gehen könnte. Daher empfehle ich die Verwendung von ! (Ausrufezeichen).

function broken(name: string | null): string {
  function postfix(epithet: string) {
    return name.charAt(0) + '.  the ' + epithet; // error, 'name' is possibly null
  }
  name = name || "Bob";
  return postfix("great");
}

function fixed(name: string | null): string {
  function postfix(epithet: string) {
    return name!.charAt(0) + '.  the ' + epithet; // ok
  }
  name = name || "Bob";
  return postfix("great");
}

Referenz. https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-type-assertions

2
Margaux

Sie können einfach einen benutzerdefinierten Typ wie den folgenden implementieren:

type Nullable<T> = T | undefined | null;

var foo: Nullable<number> = 10; // ok
var bar: Nullable<number> = true; // type 'true' is not assignable to type 'Nullable<number>'
var baz: Nullable<number> = null; // ok

var arr1: Nullable<Array<number>> = [1,2]; // ok
var obj: Nullable<Object> = {}; // ok

 // Type 'number[]' is not assignable to type 'string[]'. 
 // Type 'number' is not assignable to type 'string'
var arr2: Nullable<Array<string>> = [1,2];
2
type MyProps = {
  workoutType: string | null;
};
0
Ritwik

setzen Sie den Wert Ihrer Nummer als undefiniert

var user: Employee = { name: null, salary: undefined }; 
0