TypeScript: A teaser for curious JS devs

Have you heard about TypeScript but are unsure about what makes it special, especially if you're a JavaScript developer? I'm here to provide a sneak peek into what TypeScript is all about. My hope is that you'll consider incorporating it into your next project or making a smooth transition if you're already a JavaScript developer. Let's explore the unique features and advantages TypeScript brings to the table.

What is TypeScript?

TypeScript is a strongly-typed programming language built on JavaScript with it's key feature being static typing. "Static typing" meaning the type of the variable is known at compile time instead of runtime. It is like an upgraded version of JavaScript. Since JavaScript is a dynamic programming language and prone to several errors, TypeScript came to eliminate that. TypeScript is basically JavaScript with added syntax for types and when Typescript is compiled, it automatically converts to JavaScript.

There's been a bit of a debate about whether TypeScript qualifies as a real programming language. Some argue it isn't because it's built on JavaScript and, well, turns into JavaScript when it runs. But, hey, doesn't C++ also compile into assembly during runtime?

Let's not get caught up in the whole "Is TypeScript a language or not?" discussion here. If you're super attached to JavaScript and the idea of TypeScript being possibly better feels like a tough pill to swallow, you can think of it as more of a helper for JavaScript. It's like that trusty sidekick that makes your JavaScript experience even better. It might take a little time to fully accept, but hey, change can be a good thing!

Interesting features of TypeScript

We already know TypeScript is literally about "types". A "type" is a convenient way to refer to the different properties and functions that a value has. Some of the main features of TypeScript are static type checking (a process where types are associated with variables, function parameters, and function return values at compile-time, rather than at runtime), type safety (a programming language feature that eliminates type errors), type annotation (explicitly specify types for identifiers such variables, functions, objects, etc.) and type inference (a feature that allows the TypeScript compiler to automatically deduce the type of a variable or expression).

Typescript and JavaScript have quite a few differences, but let's zoom in on the features that really caught my eye in the points below.

• Union types: This allows you to build new types from already existing types using operators.

function printIncome(income: number | string) {
  console.log("My annual income is " + income);
}

You can see in the type annotation for income we have income: number | string. The "|" operator simple means income can either be a string or a number. Passing a string or number into the function will not trigger an error.

• Type aliases: They define types with the type keyword. Here, you can define a type which contains multiple different types and it can be very useful when you want to use this type more than once.

type Myself = {
    gender: string,
    height: number,
    income: number,
    isAJerk: boolean,
}

This even helps make passing objects into functions so much better and cleaner as you can just pass a variable of this type and into it.

• Enums: Enums group and represent a set of constant variables. They are declared using the enum keyword. Something like hair color are mostly either be black, brown, blonde, ginger or grey

enum HairColor = {
    BLACK,
    BROWN,
    BLONDE,
    GINGER,
    GREY
}

• Interfaces: An interface is somewhat a loose form of a class. It is basically another way to name an object type. It is declared with the interface keyword.

interface Myself {
    gender: string,
    height: number,
    income: number,
    isAJerk: boolean,
}

You might now be wondering what's the difference between an interface and a type alias. The key difference is a type is not extendable whereas an interface is. That means you could add new properties to an interface.

interface Myself {
    isHardworking: boolean
}

We have simply just included the isHardworking boolean to Myself interface. This is basically know as "re-opening an interface"

• Generics: With generics, you can create a new type variable which can be used to create classes or functions. They help make the components of your application reusable. Generics can be very helpful in functions in which the data type which was passed into them is what is expected to be received

function rateTypescript<T>(val: T):T {
    return val
}

In the rateTypescript function above, you can see that the data type it accepts is same that it returns.

While I've only touched on a few of TypeScript's many features, I highly recommend delving into the documentation for a more comprehensive understanding and clarity. In summary, for smaller projects, sticking with JavaScript might be a seamless choice. However, when dealing with larger projects or expanding codebases, TypeScript emerges as the ideal choice. Its static typing not only aids in bug elimination but also contributes significantly to maintaining a scalable and organized codebase as your project evolves.

PS: This is TypeScript from my point of view