Interfaces as function types in Typescript

Let’s get to know interfaces for functions - yes, that’s a thing. We have seen interfaces used as types and interfaces as array types. Since function is an object and interfaces are supported on other objects, they should be supported on functions also. Right? You betcha. What is this blog if we can’t write about all the stuff that no one care’s about? Well, to be clear - I am not starting that trend today. ...

Modules in Typescript

It’s not the why, but more on what of ‘modules’. No Javascript is an island. It was an island about two decades back but Javascript has done some pretty good land reclaimation to form large continents now. So it goes without saying that these are not the days of writing Javascript or Typescript in <script> tag in a single HTML. A typical project has hundreds of packages and a lot of code written by you and others who hate you. ...

Extend interfaces in Typescript

Interface an interface. If that doesn’t excite you, I don’t know what will. We have seen interfaces used as types before. But as our God Goop says - “abstract; (while && when) you can;”. So, we are here to know about interfaces for interfaces. Consider this simple example - interface Borg { name: string; } Now, any class implementing the interface Borg will have a name attribute. What if you want to add more attributes? Well, you can always add attributes to Borg, but what if you have a function that very much likes names and cannot digest anything else? ...

Interfaces for Arrays in Typescript

What exactly are interfaces for arrays? Previously we have seen interfaces as types. Interfaces provide useful abstraction on class and can be useful in tricky situations with complex types. But, what about interfaces for array? It turns out interfaces can be as easily applied for array types as well. They are just super useful as interfaces that define complex types and make arrays type-safe - nothing more, nothing less. Interfaces can define type for both array and its values. Let’s see an example. ...

Anonymous functions in Typescript

Let’s talk anonymous functions and make them, well, “not anonymous”. Anonymous functions are just functions without names. If you have been following this blog, or have written some Javascript - you surely would have come across them. Anonymous functions are just function expressions. Let’s see a quick example. The following code block has a ’named’ function. function getSum(x: number, y: number): number { return x + y; } We can rewrite the same as an anonymous function and get the same end result. ...

Abstract classes in Typescript

Why and how of using abstract classes in Typescript. We have seen a bit of classes and objects in Typescript previously. There was however a key aspect of object oriented programming missing there. Although we discussed inheriting classes, we never mentioned abstract classes. Sacrilege, that. On the other hand, anything goes for the daily blogging gobble-gobble. Abstract classes are meant to be inherited and are not used directly. Defining such an abstract class is painfully easy. ...

Non-number values for enum in Typescript

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?). ...

Decorators in Typescript

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 - ...

Type casting in Typescript

“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. ...

Typing collections in Typescript

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. ...