Typescript and primitive Types

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, it supports all primitive types.

Let start to show a few things learned today about typescript.

Typescript and Types.

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

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

List of 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 accept 2 values true and false or 1 or 0.

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

array type allows storing a list of any datatypes.

Declarations

For example, if the variable id is set as a number, the compiler requires the id assignation must 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.

This is good because we can found the bugs before publish our app.

Static vs Dynamic Type.

Javascript is a dynamic type that means our variable can change of type 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 assign 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 store data and define a structure. Javascript allows storing any data type into the object.

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 assign 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 very useful data type because allow store 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 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 if try to add another data type different.

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

15 luckyNumbers.push("hello world");

Final!

That gives to 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