I am starting to move to Typescript. I discover how it works and different ways to use them with Typescript.

Typescript is a superset running up to Javascript, and it supports all primitive types.

Let start by showing a few things I learned today about Typescript.

Typescript and Types.

Typescript supports setting variables, properties, or parameters in functions using the primitive types.

A standard error is confusing primitive types with Interfaces.

The primitive types are all lowercase number , string, boolean, objectand array.

The interfaces of primitives types start with Capital Number,String, Boolean, and Array.

Primitive javascript types.

numbers type used for all numbers don't care if it is an integer, decimal, or float.

string type using for string literal, simple text or store any text values.

boolean type accepts two values, true and false or 1 or 0.

object type allows storing a data structure with any data and nested objects.

array type allows storing a list of any data types.

Declarations

For example, if the variable id is a type number, the compiler requires the id assignation to be a number.

let id = 5
id = "1"

The compiler will show an error before the compilation.

app.ts:3:1 - error TS2322: Type '"1"' is not assignable to type 'number'.
3 id = "1";
  ~~
Found 1 error.

The compiler gets the error before publishing our app.

Static vs Dynamic Type.

Javascript is a dynamic type that means our variable can change of kind on runtime.

Typescript is a static type and can help us to avoid errors during the development process.

The declaration can be with Type inference or Type assignment.

Type Inference.

The Type Inference means the variable understands the assignment as type.

let tokenKey = “Hello world”
let userId = 1234 .

The code is short. When the assignment comes from a method, the type is unknown.

let tokenKey = GetAPIToken()

Type Assigment

The variable type is part of the declaration.

let tokenKey: string = GetAPIToken()

Object

The object in Javascript is very flexible for storing data and defining a structure. Javascript allows storing any data type.

const player = {
  name: "Lebron",
  playerNumber: 23,
}

An object in Typescript looks like a javascript object but with type inferred.

The compiler checks my code and doesn't allow setting a string into the number property.

tsc app.ts
app.ts:6:1 - error TS2322: Type '"hello "' is not assignable to type 'number'.
6 player.numberPlayer = "hello ";
Found 1 error.

Define an object structure, and the compiler can check every property for the object.

let player: {
  name: string,
  numberPlayer: number,
  age: number,
  active: boolean,
} = {
  name: "legion",
  numberPlayer: 23,
  age: 32,
  active: true,
}

The object type assignment also supports nested objects. Keep in mind the object assignment is part of Typescript for the compiler, not in javascript.

Arrays

The Arrays are a beneficial data type because they allow storing any type or mixed data and like objects, Typescript infers in data type stored.

If you define an array with a list of numbers, it declares the arrays as a number array or set type.

let loteryNumbers: number[]
loteryNumbers.push(45)

let luckyNumbers = [1, 2, 3, 4]

luckyNumbers.push("hello world")

The compiler shows an error when trying to add another data type differently.

 tsc app.ts
app.ts:15:19 - error TS2345: Argument of type '"hello world"' is not assigned to type 'number' parameter.

15 luckyNumbers.push("hello world");

Final!

That gives you a bit of a head-start on Typescript and helps you avoid some of the more common mistakes.

If you enjoyed this post, please share it. Photo by Jeremy Bezanger on Unsplash