Strenger Modus in TypeScript: Flagbeschreibung, Beispiele

--strict flag enthält die folgenden Flags:


--strictNullChecks
--alwaysStrict
--noImplicitAny
--noImplicitThis
--strictBindCallApply
--strictFunctionTypes
--strictPropertyInitialization

Hier sind einige Beispiele und versuchen Sie an einer Stelle zu verstehen, was dies alles bedeutet.

// I. --strictNullChecks


Das berühmte Problem mit NPE (Nullzeiger-Ausnahme, Milliarden-Dollar-Fehler) im Zusammenhang mit TS.
Standardmäßig sind in TS alle Typen Nullable und dies bedeutet, dass wir "undefined" | übergeben können "Null", wenn ein anderer Typ erwartet wird (sogar ein Grundelement):

const bar1: { foo: number } = undefined;
const bar2: { foo: number } = null;
const bar3: number = null;
const bar4: string = null;

Interessantere Beispiele sind ein Methodenaufruf, der möglicherweise nicht vorhanden ist

declare var smth: { optionalMethod?(): string; };
smth.optionalMethod();

Es wird auch impliziert, dass wir "undefined" | nicht zurückgeben können "Null", wo dies eindeutig nicht erwartet wird

function getIt(): { data: number } {
  // Type 'undefined' is not assignable to type '{ data: number; }'
  return undefined;
}
getIt().data;
 

Wir müssen ausdrücklich angeben, dass "undefined" zurückkehren kann, und erst danach erhalten wir einen Fehler

function getIt(): { data: number } | undefined {
  return undefined;
}
// “Object is possibly 'undefined'”
getIt().data;
 

Und als Bonus - sicherere Operationen, bei denen möglicherweise kein Ergebnis erzielt wird, tritt ein Fehler bei eingeschalteter Flagge auf, und Sie müssen explizit überprüfen, ob "find" etwas gefunden hat:

// Object is possibly 'undefined'
[{ name: 'John', age: 4 }]
 .find(el => el.age === 42)
 .name;
 

// II. - immer streng


Fügt jeder Datei die Anmerkung "use strict" hinzu , wodurch das JS-Verhalten expliziter wird

// III. --noImplicitAny


Verbietet die implizite Verwendung von "any" in TS, d.h. Code ohne Typanmerkung

 // Parameter 'a' implicitly has an 'any' type
 function id(arg) {
   return arg;
 }

Große Hilfe bei untypisierten Importen aus Bibliotheken von Drittanbietern, die die Installation von Typdefinitionen vorschlagen

 /* Could not find a declaration file for module '3rd-party-lib'. '/node_modules/3rd-party-lib/index.js' implicitly has an 'any' type.

Try `npm install @types/3rd-party-lib` if it exists or add a new declaration (.d.ts) file containing `declare module '3rd-party-lib';`*/

import * as session from '3rd-party-lib';
 

// IV. --strictBindCallApply


Es enthält eine "strengere" Typprüfung für "Binden" / "Aufrufen" / "Anwenden" ohne Flag - dies ist alles ein gültiger TS.

 function getFullName(name: string, surname: string): string {
   return name + surname;
 }
 
 getFullName.call(null, 'John', 42);
 getFullName.apply(null, ['John', 42]);
 getFullName.bind(null)('John');
 getFullName.bind(null, 'John')();
 getFullName.bind(null, 'John')(42);
 

// V. --strictPropertyInitialization + --strictNullChecks


Hilft zu verfolgen, dass alle Eigenschaften im Konstruktor initialisiert wurden. Sie müssen auch --strictNullChecks aktivieren, um Nullable-Typen zu deaktivieren.

 class User {
// Property 'name' has no initializer and is not definitely assigned in the constructor
   name: string;
 }

Wenn sich die Zuweisung jedoch nicht im Konstruktor selbst befindet, überzeugen Sie TS davon, dass alles in Ordnung ist.

 class User2 {
  // Property 'name' has no initializer and is not definitely assigned in the constructor
   name: string;
     
   constructor(name: string) {
     this.initializeName();
   }
 
   initializeName() {
     this.name = 'John'
   }
 }

Wenn Sie TS nicht davon überzeugen konnten, dass die Eigenschaft genau initialisiert wird, können Sie sagen: "Ich schwöre bei Mama, ich werde definitiv initialisieren!" oder kurz "!"

class User3 {
   // definite assignment assertion
   name!: string;
 }
 


// VI. --strictFunctionTypes


Entfernt eine bivariante Prüfung auf Argumente.

Kurz gesagt, Variante in der Programmierung - dies ist die Möglichkeit, Supertype / Subtype dort zu übergeben, wo Type erwartet wird. Zum Beispiel gibt es eine Hierarchie Form -> Kreis -> Rechteck. Ist es möglich, eine Form / ein Rechteck zu übertragen oder zurückzugeben, wenn Kreis erwartet wird ?

Programmieroption habr , SO

interface Shape { name: string };
interface Circle extends Shape { width: number };
interface Rectangle extends Circle { height: number };
 
declare var logSC: (figure: Shape) => Circle;
declare var logRC: (figure: Rectangle) => Circle;
 
declare var logCC: (figure: Circle) => Circle;
 
declare var logCS: (figure: Circle) => Shape;
declare var logCR: (figure: Circle) => Rectangle;
 
declare var wlogBB: (fn: (figure: Circle) => Circle) => void;
 
wlogBB(logCC);
wlogBB(logSC);
wlogBB(logCR);
 
// always Error
wlogBB(logCS);
// Error with --strictFunctionTypes
wlogBB(logRC);

Es versteht sich, dass die Funktion das übergebene Argument (das als Typproduzent fungiert) nicht mutieren sollte, es gibt tatsächlich keine Fehler in TS - es gibt

const squares: Square[] = [{ name: 'Square', width: 5 }];
 
// function looks like a consumer of argument
function addSmth(arg: Shape[]) {
 // work with argument as a producer
 arg.push({ name: 'Square' });
}
addSmth(squares);
 

// VII. --noImplicitThis


Wenn die Funktion außerhalb des Objekts / der Klasse definiert ist, werden Sie von TS aufgefordert, explizit anzugeben, worauf sich "dies" bezieht, indem Sie das erste Pseudoargument mit dem Namen "dies" verwenden.

// TS force to add annotation for 'this'
 function getName(this: { name: string }, surname: string): string {
   return this.name;
 }
 
 // The 'this' is not assignable
 getName.call({}, 'Smith');
 getName.apply({}, ['Smith']);
 getName.bind({})('Smith');

Anrufe sind gültig

const somePerson = { name: 'John', getName };
const fullName: string = somePerson.getName('Smith')
 
getName.call({name: 'John'}, 'Smith');
getName.apply({name: 'John'}, ['Smith']);
getName.bind({name: 'John'})('Smith');
 

Konstruktorfunktionen können Probleme verursachen

function Person(this: { name: string }, name: string) {
   this.name = name;
 }
 // 'new' expression, whose target lacks a construct signature
 // Use class )
 const person = new Person('John');
 

Ein interessanter Bonus ist das Hinzufügen eines Vergleichs der Kontextbindungsmethoden für Klassen.

class A {
   x = 42;
 
   constructor() {
     this.getBound = this.getBound.bind(this);
   }
 
   getSimple(): number {
     return this.x;
   }
 
   // Has to add type for 'this', TS dont force it
   getSimpleAnnotated(this: A): number {
     return this.x;
   }
 
   getArrow = (): number => this.x;
 
   getBound(this: A): number {
     return this.x;
   }
 }
 
 const a = new A();
 
 // False positive: TS - ok, Runtime - error
 const getSimple = a.getSimple;
 getSimple();
 
 // Correct: TS - error, Runtime - error
 const getSimpleAnnotated = a.getSimpleAnnotated;
 getSimpleAnnotated();
 
 // Correct: TS - ok, Runtime - ok
 const getArrow = a.getArrow;
 getArrow();
 
 // False negative: TS - error, Runtime - ok
 const getBound = a.getBound;
 getBound();
 

All Articles