Wenn Sie in der Vergangenheit mit TypeScript arbeiten, handelt es sich um eine Programmiersprache, die strenge Datentypen fördert, was Entwicklern hilft, viele Produktionsprobleme zu vermeiden, die während der Entwicklung vermieden werden können. Da der strikte Modus in der neuesten Angular-Version (v.12) standardmäßig aktiviert ist, werden wir untersuchen, warum es eine gute Idee ist, diese Funktion in Ihrer App zu aktivieren und wie wir typsichere Codes schreiben können.

Warum strenger Modus?

Der Sinn des Aktivierens des strikten Modus in Angular-Apps besteht darin, Entwickler daran zu erinnern, sicherzustellen, dass Variablen, Methoden und Klassen einem bestimmten Datentyp zugewiesen wurden. Die strikte Moduseinstellung hilft:

• Fehler früh fangen
• Reduzieren Sie die Bundle-Größe, vermeiden Sie die Zuweisung von unnötigem Speicher.
• Befolgen Sie die Best Practices
• Holen Sie sich eine bessere IDE-Unterstützung

So schreiben Sie typsichere Codes

Im Folgenden finden Sie einige gängige Methoden zum Deklarieren von Typdefinitionen für Ihre Daten

Typ explizit deklarieren

Ein Typ kann an eine Variable angehängt werden, um Typmehrdeutigkeiten zu vermeiden.

• Primitive Typen

const a:number = 0;const b:boolean = false;const c:string = 'a';

const e:{x: number, y: string} = {x: 1, y: 'text'};
const f = e.x as number;

const g: number | null = null;

const h!: number;

const a = 0;     // a is a numberconst b = false; // b is a booleanconst c = 'a';   // c is a stringconst d = {x: 1, y: 'text'} 
// d is an object that has attribute x as number and attribute y as // a string

Beim Destrukturieren eines Objektliterals kann type auch auf zwei Arten deklariert werden:

• Ausdrückliche Erklärung

const a = {x: 1, y: undefined}
const {x: number} = a;
console.log(x); // 1

const a = {x: 1, y: undefined}
const {y = 'text' } = a;
console.log(y); // 'text'

• Methodensignatur

methodA(a: string, b: number): void {...}
//methodA doesn't have a return typemethodB(): string {...}
//methodB returns a stringmethodC = (a: string, b: number): number => {...}
//methodC returns a number

methodD(a: string, b: number) {
  return 'text';
} 
//methodD returns a stringmethodE = (a: string, b: number) => b > 0
//methodE returns a boolean