🧛 🤞🏽 🏌️ Mode ketat dalam TypeScript: deskripsi bendera, contoh 👩🏽‍⚕️ 💕 ⛺️

- Bendera ketat termasuk bendera berikut:

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

Kami memberikan contoh dan mencoba memahami di satu tempat apa arti semua ini.

// I. --strictNullChecks

Masalah terkenal dengan NPE (pengecualian pointer nol, kesalahan miliar dolar) dalam konteks TS.
Secara default, dalam TS semua jenis adalah Nullable dan ini berarti bahwa kita dapat melewati "undefined" | "Null" di mana jenis lain diharapkan (bahkan primitif):

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

Contoh yang lebih menarik adalah pemanggilan metode, yang mungkin tidak

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

Juga tersirat bahwa kita tidak dapat mengembalikan "tidak terdefinisi" | "Null" di mana ini jelas tidak diharapkan

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

Kami harus secara eksplisit menunjukkan bahwa "tidak terdefinisi" dapat kembali dan hanya setelah itu kami mendapatkan kesalahan

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

Dan sebagai bonus - operasi yang lebih aman, di mana mungkin tidak ada hasil, akan ada kesalahan dengan bendera dihidupkan dan Anda harus secara eksplisit memeriksa bahwa "menemukan" menemukan sesuatu:

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

// II. --selalu ketat

Menambahkan anotasi 'gunakan ketat' ke setiap file, menjadikan perilaku JS lebih eksplisit

// AKU AKU AKU. --noImplicitAny

Melarang penggunaan 'apa pun' secara implisit dalam TS, mis. kode tanpa jenis anotasi

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

Ini sangat membantu dengan impor yang tidak diketik dari perpustakaan pihak ketiga, menawarkan untuk menginstal definisi tipe

 /* 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

Ini mencakup pemeriksaan jenis "lebih ketat" untuk "bind" / "panggilan" / "berlaku", tanpa bendera - ini semua adalah TS yang valid.

 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

Membantu melacak bahwa semua properti telah diinisialisasi dalam konstruktor, Anda juga harus mengaktifkan --strictNullChecks untuk menonaktifkan tipe Nullable.

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

Namun, jika tugasnya tidak ada di konstruktor itu sendiri, yakinkan TS bahwa semuanya baik-baik saja.

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

Jika Anda tidak dapat meyakinkan TS bahwa properti tersebut akan diinisialisasi dengan tepat, Anda dapat mengatakan "Saya bersumpah demi Ibu, saya pasti akan menginisialisasi!" atau lebih singkat “!”

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

// VI. --strictFunctionTypes

Menghapus cek bivariat untuk argumen.Varian

dalam pemrograman, singkatnya - ini adalah kemampuan untuk melewati Supertype / Subtype di sana, di mana Type diharapkan. Misalnya, ada hirarki Shape -> Circle -> Rectangle, apakah mungkin untuk mentransfer atau mengembalikan Shape / Rectangle jika Circle diharapkan ? Opsi

Pemrograman 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);

Dipahami bahwa fungsi tidak boleh mengubah argumen yang dilewati (bertindak sebagai produsen tipe), tidak ada kesalahan dalam TS, pada kenyataannya - ada

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. --tidak terapkan Ini

Jika fungsi didefinisikan di luar objek / kelas, maka TS akan meminta Anda untuk secara eksplisit menunjukkan apa "ini" akan merujuk menggunakan pseudo-argumen pertama bernama "ini"

// 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');

Panggilan akan valid

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');

Fungsi Konstruktor Dapat Memberikan Masalah

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');

Bonus yang menarik adalah menambahkan perbandingan metode pengikatan konteks untuk kelas.

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();

Mode ketat dalam TypeScript: deskripsi bendera, contoh