टाइपस्क्रिप्ट में सख्त मोड: ध्वज विवरण, उदाहरण

- स्ट्रिक्ट फ्लैग में निम्नलिखित झंडे शामिल हैं:


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

हम उदाहरण देते हैं और एक जगह समझने की कोशिश करते हैं कि इस सब का क्या मतलब है।

// I --strictNullChecks


टीएस के संदर्भ में एनपीई (शून्य सूचक अपवाद, अरब डॉलर की गलती) के साथ प्रसिद्ध समस्या।
TS में डिफ़ॉल्ट रूप से, सभी प्रकार अशक्त हैं और इसका मतलब है कि हम "अपरिभाषित" पास कर सकते हैं "अशक्त" जहां किसी भी अन्य प्रकार की उम्मीद है (यहां तक ​​कि एक आदिम):

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

अधिक दिलचस्प उदाहरण एक विधि कॉल है, जो नहीं हो सकता है

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

यह भी निहित है कि हम "अपरिभाषित" वापस नहीं कर सकते हैं "अशक्त" जहां यह स्पष्ट रूप से अपेक्षित नहीं है

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

हमें स्पष्ट रूप से संकेत देना होगा कि "अपरिभाषित" वापस आ सकता है और उसके बाद ही हमें कोई त्रुटि मिलती है

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

और एक बोनस के रूप में - सुरक्षित संचालन, जहां कोई परिणाम नहीं हो सकता है, वहां ध्वज को चालू करने में त्रुटि होगी और आपको स्पष्ट रूप से जांचना होगा कि "खोज" कुछ मिला:

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

// II। --alwaysStrict


प्रत्येक फ़ाइल में 'सख्त उपयोग' एनोटेशन जोड़ता है , जिससे जेएस व्यवहार अधिक स्पष्ट होता है

// III। --noImplicitAny


टीएस में 'किसी' के निहित उपयोग को प्रतिबंधित करता है, अर्थात कोड बिना एनोटेशन के

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

यह तीसरे पक्ष के पुस्तकालयों से अप्राप्त आयात के साथ बहुत मदद करता है, प्रकार की परिभाषाएं स्थापित करने की पेशकश करता है

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


इसमें झंडा के बिना "बाइंड" / "कॉल" / "लागू" के लिए "अधिक कठोर" प्रकार की जांच शामिल है - यह सभी एक वैध टीएस है।

 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


यह पता लगाने में मदद करता है कि सभी गुणों को कंस्ट्रक्टर में आरंभीकृत किया गया है, आपको अशक्त प्रकारों को निष्क्रिय करने के लिए --strictNullChecks को भी सक्षम करना होगा।

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

हालाँकि, यदि असाइनमेंट कंस्ट्रक्टर में ही नहीं है, तो TS को समझाएं कि सब कुछ ठीक है।

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

यदि आप टीएस को यह नहीं समझा सकते हैं कि संपत्ति बिल्कुल प्रारंभिक होगी, तो आप कह सकते हैं "मैं माँ की कसम खाता हूँ, मैं निश्चित रूप से आरंभ करूँगा!" या अधिक संक्षेप में "!"

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


// VI। --strictFunctionTypes


बहस के लिए एक bivariant जांच को निकालता है।

प्रोग्रामिंग में संस्करण, संक्षेप में - यह पारित करने की क्षमता है महाप्रकार / उपप्रकार जहां, प्रकार की उम्मीद है। उदाहरण के लिए, एक पदानुक्रम आकृति है -> सर्कल -> आयत, क्या सर्कल की अपेक्षा की जाती है तो किसी आकृति / आयत को स्थानांतरित करना या वापस करना संभव है ? प्रोग्रामिंग विकल्प हब्र , एसओ



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

यह समझा जाता है कि फ़ंक्शन को पास किए गए तर्क (टाइप प्रोड्यूसर के रूप में अभिनय) को म्यूट नहीं करना चाहिए, टीएस में कोई त्रुटि नहीं है, वास्तव में - वे हैं

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


यदि फ़ंक्शन ऑब्जेक्ट / क्लास के बाहर परिभाषित किया गया है, तो TS आपको स्पष्ट रूप से इंगित करने के लिए कहेगा कि "यह" "इस" नाम के पहले छद्म तर्क का उपयोग करने का क्या उल्लेख करेगा।

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

कॉल मान्य होंगे

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

कंस्ट्रक्टर के कार्यों में समस्या आ सकती है

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

एक दिलचस्प बोनस कक्षाओं के लिए संदर्भ बाध्यकारी तरीकों की तुलना जोड़ रहा है।

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