Posts

Use non-numbers in Typescript enums. enums have the following typical definition and usage - enum Colors { red, blue, green } console.log(Colors[1]); // blue Or, the numbers can be explicitly specified.. enum Colors { red = 1, blue = 2, green = 3 } console.log(Colors[1]); // red console.log(Colors["red"]); // 1 Since Typescript v2.2, we can also specify non-numbers against the value. enum FruitColors { apple = "red", orange = "orange", } console.log(FruitColors['apple']); // red Or, you could go crazy with more complex objects (but, why?). ...

Decorate a class, member or property to signify its specialty. Decorators are not available in Javascript but enable us to enhance our Typescript libraries and code. Decorators are experimental features in Typescript at this time. A decorator is a way to annotate or modify a class, properties, functions or parameters. Decorator is specified against a target class, and has a body that indicates the decorator’s function. A decorator exists in brought to life in two parts - ...

“Typecast types in Typescript” : that’s three “types” in a sentence with three significant words, and for that, I should tap out (but I don’t). We see a lot about “type assertions” in to type conversations (or conversions!) in Typescript. Type assertions enable you to override default type inference for neutral types. We have discussed about type assertion before. Typecasting refers to type conversions. While they don’t function similar to other strongly typed languages, they do exist. ...

How are collections typed in Typescript? Primitives are fairly easy to type - we have seen this while discussing Typescript and its types. const num: number = 0; const msg: string = "hello"; We have seen examples of typed arrays in the same post, but how about all the other collections? How far down the typed rabbit hole are you willing to go? Arrays There are two useful notations - pick one, or both. let num: number[] = [1, 2, 3]; const numToo: Array<number> = [1, 2, 3]; Tuples Tuples, unlike arrays, have fixed number of elements. In Typescript, we just go about typing all of them. ...

Easily convert objects to arrays and iterate to your heart’s content. There are multiple ways of converting an object to an array (which, also is an object but a different one at that.) Method 1: A simple Object.values() method The first idea that comes to mind is to just use Object.keys(), Object.values() or Object.entries() to generate an array. const numO = { a: 1, b: 2, c: 3, d: 4, e: 5 }; console.log(Object.values(numO)); // [ 1, 2, 3, 4, 5 ] Method 2: Apply transformation logic during object to array conversion If you are going fancy about the conversion and want to include some logic therein - ...

Here’s a different syntax for our favourite IIFE’s. Immediately invoked function expressions enable us to write functions without using “functions”. Well - just kidding. They are functions but with a different syntax. A typical IIFE looks like this - const x = 1, y = 9; var sum = 0; (function() { sum = x + y; console.log("sum: ", sum); }(); /* output sum: 10 */ There is another interesting syntax that is lesser known. At least it was not known at all to me-self until I came across the syntax in some library. ...

Daily blogging by itself is not a bad thing. I changed tracks a year back to get back to development after a million years of doing something else. I thought through the idea of blogging daily, what I was going to write about, and how that would pan out through days and months. The premise was simple - learn something, and record that for yourself. The world may benefit from it if it chooses to. ...

Typescript supports public, private and protected modifiers that affect the accessibility of class in different ways. Access modifiers further a core concept of object oriented programming - ’encapsulation’. The accessibility of variables and members of a class are driven by modifiers and therefore controlled in the programming flow. Let’s start with a simple class example. class MathOp { public x:number; private y: number; protected z: number; } Public modifier All variables and members are public by default in Typescript. ...

Typescript allows use of static variables and methods just like modern Javascript. Static variables and methods are declared with a keyword static. Static variables Static variables exist within the class context, and are not carried forward to the object of the class. Define a static variable like so - class Human { static chaos: boolean = true; } The variable value is accessible using the class. console.log(Human.chaos); // true .. but not against the object. const joe = new Human(); console.log(joe.chaos); // error TS2576: Property 'chaos' is a static member of type 'Human' If you need a value in the object no matter the costs, you can always have the two variables with same names. ...

Typescript’s type assertion features help us to override type inference and indicate a specific type to a variable. Type assertion may not be the most common of the features you employ, but it is invaluable when you are migrating from Javascript. Or, when you have to interact with Javascript libraries or data from external systems in your Typescript code. Take note of one important thing though - since all Typescript code is compiled to Javascript, any and all assertion is applied at compile time. There is no runtime type assertion. ...