web-dev-qa-db-fra.com

Comment déclarer un type nullable dans TypeScript?

J'ai une interface en TypeScript.

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

Je voudrais faire "salaire" comme un champ nullable (comme nous pouvons le faire en C #). Est-ce possible de le faire en TypeScript?

javascripttypescript
140
Amitabh

Tous les champs en JavaScript (et en TypeScript) peuvent avoir la valeur null ou undefined.

Vous pouvez rendre le champ facultatif qui est différent de nullable.

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;
}

Comparer avec:

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

Le type d'union est dans mon esprit la meilleure option dans ce cas:

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 };

EDIT: pour que cela fonctionne comme prévu, vous devez activer la strictNullChecks dans tsconfig. 

67
bjaksic

Il suffit d’ajouter un point d’interrogation ? au champ facultatif.

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

Pour être plus semblable à C #, définissez le type Nullable comme suit:

type Nullable<T> = T | null;

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

il y a quelque temps, j'avais la même question. Tous les types de ts sont nullables, car void est un sous-type de tous les types (contrairement à scala, par exemple).

voir si cet organigramme vous aide - https://github.com/bcherny/language-types-comparison#TypeScript

4
bcherny

Le type nullable peut invoquer une erreur d'exécution. Je pense donc qu’il est bon d’utiliser une option de compilation --strictNullChecks et de déclarer number | null en tant que type. également en cas de fonction imbriquée, bien que le type d'entrée soit null, le compilateur ne peut pas savoir ce qu'il pourrait casser, donc je recommande d'utiliser ! (marque d'exclusion).

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");
}

Référence. https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-type-assertions

2
Margaux

Vous pouvez simplement implémenter un type défini par l'utilisateur comme suit:

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
Willem van der Veen
type MyProps = {
  workoutType: string | null;
};
0
Ritwik

mettre la valeur de votre nombre comme indéfini

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