Understanding types in Typescript

I’d like to continue with types in Typescript as a follow-up to this article. As most of us know TypeScript offers all of JavaScript’s features and an additional layer on top of these: TypeScript’s type system.

For example, JavaScript provides language primitives like string and number, but it doesn’t check that you’ve consistently assigned these. TypeScript does.

We already learned that your existing working JavaScript code is also TypeScript code. The main benefit of TypeScript is that it can highlight unexpected behavior in your code, lowering the chance of bugs.

I’d like to divide types into two categories.

• Type Inference:
• Type Annotations:

What is Type Inference?

TypeScript will generate types for you in many cases by inferring it by looking at the value. For example; Typescript will pick up that it is a string type without being told.

let helloWorld = "Hello World";
// let helloWorld: string => being inferred by Typescript

What is Type by annotation?

Like you can benefit from type inference in Typescript, you can also be given a chance to annotate a type explicitly. In this article, we mostly are going to spend time on this part.

We can briefly say that TypeScript uses the syntax : type after an identifier as the type annotation, where type can be any valid type.

After the variable is specified with a type explicitly, it needs to conform the annotation otherwise typescript compiler will complain about it.

Before getting into the types, I’d like to show you the way how the annotation syntax looks.

let variableName: type;
let variableName: type = value;
const constantName: type = value;
let names: string[] = array;

I am hoping that we have a clear idea of the types which are being used in Typescript. Now it is time to find out which types are being provided in Typescript. As you can imagine, there are a lot of types to cover. I will cover some of them while leaving more advanced types for the next article.

Basic Types:

JavaScript has three very commonly used primitives: string, number, and boolean. Each has a corresponding type in TypeScript.

• string represents string values like "Hello, world"
• number is for numbers like 42. JavaScript does not have a special runtime value for integers, so there’s no equivalent to int or float - everything is simply number
• boolean is for the two values true and false

let price: number;// let price = 10 works in the same way
price = 10;
price = 10.2;

let name: string;// let name = "Hello Yasemin" works in the same way
name = "Hello Yasemin";

let isVisible: boolean; // let isVisible = false works in the same way
isVisible = false;

Note: In above examples, you don’t have to annotate types specifically. You can benefit from inferrence. These primitive types will come in handy inside the advanced types.

Object Type:

Apart from primitives, the most common sort of type you’ll encounter is an object type. The following shows how to declare a variable that holds an object:

type User = {
  name: string;
  age: number;
}
const user: User = {
  name: "test",
  age: 24
}

Array Type:

A TypeScript array is an ordered list of data. To declare an array that holds values of a specific type, you use the following syntax:

let names: string[];
names = ["hello",  "test"];

let ages: number[];
ages = [10, 12];

type User = {
   name: string;
   age: number;
}

let users: User[];
users = [
  {name: "Hello", age: 12},
  {name: "test", age: 24}
]

Tupple Type:

A tuple works in the same way as an array with some additional conditions.

• The number of elements in the tuple is fixed.
• The types of elements are known, and need not be the same.

let test: [string, number];
test = ['Hello', 5];
test = [5, "Hello"]; // Ts compiler will throw an error because the order doesn't comply with the given type.

I want to finish this article here before getting caught up in all the types. I think it would be overwhelming to learn all of them at the same time. In this article, tried to get to the root of the type system as well as introduce a couple of types. I will continue with the rest of the types in the next article.