TypeScript Essential Features

Introduction

Before we start, I assume you have your text editor/IDE and TypeScript compiler ready to run before seeing the examples.

In this post, we’ll talk about Typescript's essential features, such as strong typing, basic types, inferred typing, and duck typing.

All right, let's get going now.

What is Strong Typing?

Didn’t you know that the JavaScript language is not strongly typed but is a dynamic language?
It is a dynamic language because it allows objects to change their types, properties, and behavior on the fly.
While TypeScript is strongly type, because of this feature, TypeScript will enforce rules on how we use variables, functions, and objects.
Don’t be confused with static typing; it is also known as strong typing, which means creating a variable or defining a parameter in a function and specifying what type it is.
Remember that once the type is specified, we cannot change it.
Meanwhile, loose typing is the opposite of this concept (JavaScript is a loosely typed language).

Let’s have a simple example.

let language: string = "TypeScript";

In the example above, once we declare a variable to be of type string, we must treat it as a string throughout our code base.

Another thing to add for us to understand is using the colon ( : ) symbol to indicate what type of a variable should be.

Our example shows that we have declared a variable type of string before assigning a value.

This technique is called type annotation.

However, If you decide not to treat the code above as a string, see the example below.

let language: string = "TypeScript";
language = 5;

You’ll have a compilation error, or TypeScript will generate a compilation error: “Type 'number' is not assignable to type 'string.'”

TypeScript

TypeScript Basic Types

This section will focus on four common types: string, number, Boolean, and array.

Let's try to see an example.

let isHappy: boolean = true;
let age: number = 11;
let nbaTeams: string[] = [];

console.log(typeof isHappy === "boolean"); // true
console.log(typeof age === "number"); // true
console.log(Array.isArray(nbaTeams)); // true

We have declared a variable named isHappy, which is of type boolean and is set to true.

We then declared an age variable and assigned a type number set to 11.

Finally, we declared a variable named nbaTeams, a type string array, using the [] array syntax.

Below the declarations, you’ll see that we have checked the type of each variable, and the last one checks whether it is an Array.

Now that we have seen good examples, please try to change the values of the variables or assign a different value this time.

Let me know what happened by commenting in the comment section below.

Inferred Typing

Typescript also uses this technique called inferred typing or type-inference.

This type of inference determines the type of a variable, meaning that even if we do not explicitly specify the type of a variable, the compiler will determine its type based on when it was first assigned.

Let’s try to see an example below.

let dogName = "bruno";
let dogAge = 3;

console.log(typeof dogName); // string
console.log(typeof dogAge);  // number

As you can see, for the variable dogName, we didn’t use the explicit “: string” type syntax, the same with the dogAge because TypeScript has inferred the variable type.

Using IDEs like WebStorm or VSCode will show the variable type if you hover your mouse over it when editing.

What is Duck Typing?

Another feature is that TypeScript uses a method called duck typing.

Duck typing suggests, "If it looks like a duck and quacks like a duck, then it is probably a duck.”

Let’s try to take a look at an example before we go deep dive.

let customer= { id: 1, name: "Jose Rizal", write() {} };
customer = { id: 2, name: "Andres Bonifacio", write() {} };

console.log(customer);
//{ id: 2, name: 'Andres Bonifacio', write: [Function: write] }

customer = { id: 3, name: "Jose Rizal"}; //compiler error

From our example, you can see that we have defined a variable called customer, which is a standard JavaScript object.

Moreover, we have added an id property, name property, and write function.

After that declaration, we reassign the customer variable to another object with the same properties (name, id, and write function).

Behind the scenes, the compiler will use duck typing to determine whether this assignment is valid.

This means an object with the same properties and functions is considered the same type.

However, the last line of code throws a compiler error.

Thus, duck typing ensures type safety, and the TypeScript compiler verifies that two objects are identical in terms of matching properties and methods.

TypeScript compiler

Conclusion

We have seen strong typing, basic types, inferred typing, and duck typing, which I hope gave you a good understanding of Typescript’s features.

We need to understand this to appreciate better the tools we are working on with TypeScript and, of course, write better JavaScript.

I hope you have enjoyed this article, as I have enjoyed writing it.

Until next time, happy programming, and good luck with your career!