Typescript and primitive Types
Tags: typescript, javascript, codenewbie
Published: 2020-03-21 00:00:00

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**, **object**and **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.

```javascript
let id = 5
id = "1"
```

The compiler will show an error before the compilation.

```bash
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.

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

```

The code is short when the assign comes from a method the type is unknown.

```javascript
let tokenKey = GetAPIToken()
```

### Type Assigment

The variable type is part of the declaration.

```javascript
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.

```javascript
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.

```bash
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.

```javascript
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.

```javascript
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.

```javascript
 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 <a href="https://unsplash.com/@jeremybezanger?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jeremy Bezanger</a> on <a href="https://unsplash.com/s/photos/primitive?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>