Becoming a React-typescript developer series 1:Comprehensive Type Checking

Not using typescript in it's full potential is not actually a Good practise cause the major reason why we want to use typescript is to ensure it perform a comprehensive check on our code so as to ensure all loop hole are block.

In these article we are going to be looking at the various feature typescript has that guide it in perfoming a comprehensive check on our code .

--noImplicitAny: it is was one of typescript features that tells typescript to raise an alarm if it is unable to detect the type of value to be assign to a function parameter. it is applied mainly to functions and method.

example:

let say we have a function called deliver and it is accepting a parameter called to

if the function is declared like these while the --noImplicitAny feature is turned on typescript will throw an error

Snap.png but if we declare the function as thus no error will be thrown

Snap1.png

--noImplicitThis: when this is feature is turned on, typescript will throw an error if it not able to detect the type of "this"

if these class is declared like these it will throw an error

Snap.png The question then arise why will it throw an error ? typescript will throw an error because the this inside the getAreaFunction is not in the context of the instance that will be created from the class rectangle . Am sure you still understand the meaning of instance they are basically object representation of a class where each property and method can be access via .

the correct way of writing these class which will not lead to typescript throw an error is an shown below

Snap1.png

the difference between code here and the one above is basically me creating an interface which is then use to inform typescript the type of this

--alwaysStrict: these feature is to ensure that javascript strict mode is turned on. you can read more about javascript strict mode here %[developer.mozilla.org/en-US/docs/Web/JavaSc..

--strictNullChecks: previously in typescript null and undefined can be assinged to any variable regardless of the type of value that typescript is being informed of that they accept . i.e before if typescript was informed that only string is allowed to be assign to a variable any attempt to assign a number or boolean value to it will throw an error but if null is assign to that same variable no error will be thrown.But with the --strictNullChecks feature these is no longer allowed to happen in typescript only variable that is being declared to accept null value are the variable that null value can be assign to.

e.g
let inform typescript a variable [name] is only allowed to accept string

Snap.png

Any attempt to add any other data type such as number or boolean to it apart from string will throw an error

Snap1.png

but if null is assigned to it no error will be thrown

Snap2.png

with --strictNullChecks feature on these will be avoided

--strictFunctionTypes: when it is turned on it perform type check on the function parameter and ensure it is what typescript was informed of that the function parameter will be .

e.g if typescript was inform that a function deliver will accept a parameter string when it is called

Snap.png

if the function was called as called with a number

Snap1.png

typescript will throw an error

--strictPropertyInitialization: When these feature is on , TypeScript will raise an error when a class property was declared but not set in the constructor.

e.g

typescript with throw an error if the class is written like this

Snap.png

the correct way of writing it is this

Snap1.png