Software developer

Developer of webapps and more since 2016

02 Apr 2020

417
Typescript is great, here are my good practices

Tags

I use Typescript since 2018 and I'd like to share my experience with it.

Static typing

Typescript has static typing. It means you can type variables, function arguments and functions return type at compile time and it is GREAT.


const str: string  = 1; //compiles in error

const multiplyStrings = (strA: string, strB: string) => strA * strB; // compiles in error

Types

  • Any. Typescript has the type any, which means that you can make a function argument or a variable any type :


let a: any = "Hi, I am a string";
a = 1; // this works
a = [1, 2, 3]; // this works
const b = 1;

const c = a+b; //  c == "1,2,31"

Typing a variable or a function return is optional. This means you can do a function that takes anything in argument, return anything, and feed it with whatever you want. Javascript world !

Binding

Binding in javascript / typescript is used to add arguments to functions or this value. In typescript, you can do function bindings :


const getFullName = (firstname: string, lastname: string): string =>
 `${firstname} ${lastname}`;
const myName = getFullName.bind(5)("Cyprien", "Taque"); // compiles, result: "5 Cyprien"

This means although you typed your function, if you bind it, you can call it with other arguments.

There is a trick for adding arguments to functions with no side effect, it consists in doing like in functional languages, functions returning functions (aka currifycation):


const callMe = (firstname: string) =>  (what : string): string => `Hi ${firstname}, you are a ${what}`;

const withFirstname = callMeDude("Cyprien");

withFirstname("dude"); // "Hi Cyprien, you are a dude"

withFirstname(5) // Compiles in error

This is handy when you call a function from a Dom Event without calling it (example in jsx) :


const addFlower = (flower:  Flower) => (e: React.FormEvent<HTMLButtonElement>) => this.props.addToSmack(flower)

flowers.map((flower: Flower) =>
   <button onClick={addFlower(flower)}>
	  Add Flower to smack
   </button> 
)

This way you can add a flower to the smack without doing it at rendering.

Null values

The inventor of null references, Tony Hoare, described them like this:

I call it my billion-dollar mistake. It was the invention of the null reference in 1965. At that time, I was designing the first comprehensive type system for references in an object oriented language (ALGOL W). My goal was to ensure that all use of references should be absolutely safe, with checking performed automatically by the compiler. But I couldn't resist the temptation to put in a null reference, simply because it was so easy to implement. This has led to innumerable errors, vulnerabilities, and system crashes, which have probably caused a billion dollars of pain and damage in the last forty years.

typescript has null values but with the strictNullCheck compiler flag there are more things unallowed.

// this compiles :
 interface Boat {
     masts: number;
     fittings: {
         tires: null;
     } ;
 }

 const fortyniner: Boat = { masts: 1, fittings: null }; // without strictNullCheck compiler flag
 const tires = fortyniner.fittings.tires;

/* But at runtime we get :
 * 
 * const tires = fortyniner.fittings.tires;
                                                               ^
 *    TypeError: Cannot read property 'tires' of null
 */

Conclusion

Typescript is the missing type system of Javascript. It adds a lot of serenity while developing and refactoring. Checkout the strict compilation flag, because without strict mode there are still mistakes that you - even advanced developers - can do and it may result in runtime errors.

In addition, this article explains why javascript is tricky. this

Thanks Microsoft !