Practical intro to Typescript (Part 0)

The “Hello world”

If you are reading this post you probably already know what Typescript is. So here’s just a practical guide for Typescript. Feel free to come back as many times as you like while you get use to the language

Variables and Types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Variables
let hello = "world"; //TS infers the type

let hola: String = "mundo"; // Here we explicitly the type
// errorMsg can be either a String or a null
let errMsg: String | null = "This is an error message";
errMsg = null; // This is totally fine
//hola = 123 // This is not possible since I must keep the same type for all variables
hola = "another string"; // This is ok !
const hallo = "asd"; // Here I'm defining a constant, so not only i can't change the type but neither the value

// Type Aliases
type IDs = String[]; // This is just a 'human name' for the string type
// It's really normal to see things like this:
type MaybeIDs = IDs | null; // Things of Type MaybeIDs can be either IDs or null

// Why does any exist ? Hmm
let dew: any = "This could not be a string";
// We also have the unknown type which is pretty much as any but it can not be assigned
let theFutureOfArgentina: unknown = "1";
let s1: String = dew; // This is ok
let s2: String = theFutureOfArgentina; // This is fails
// There still some hope
let s2: String = theFutureOfArgentina as string; // This will not fail .. for now
// We can also do things like
let num: Number = theFutureOfArgentina as unknown as number

Functions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Functions
const getFullName = (first: String, last: String): String => {
return first + " " + last;
};
console.log(getFullName("Lucas", "Contre"));
const getFullNameJS = (first, last) => {
// This function is just Js inside Ts
// This will still work and we will just get a warning but it is not the best way to write TS
return first + " " + last;
};

const noReturn = (): void => {
// When return void when there's no return
console.log(getFullNameJS("Lucas", "Contre"));
};

// We can also write functions that never returns
const oblivio = (): never => {
throw "never";
};

Stick to the types unknown and void. Avoid using any in any case and
you will probably never use never.

Objects in TS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Create Objects like in JS
const userJS = {
name: "Lucas",
age: 25,
};
const user2JS = {
name: "Tom",
};

// Create Objects in TS (defining the type)
const userTS: { name: String, age: Number } = {
name: "Lucas",
age: 25,
};

const user2TS: { name: String, age: Number } = {
name: "Tom",
age: 30, // Now we need to comply to the Type
};

Interfaces

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Lets try to do this a bit more nicer with Interfaces
interface User {
// Interfaces for objects ? It look like, yes.
name: String;
dogsIDs: IDs;
age: Number;
address?: String; // The '?' indicates that this is optinal
getName(): String;
}

const nicerUserTS: User = {
dogsIDs: ["dog1", "dog2"],
name: "Brad",
age: 12,
getName() {
return "My name is " + this.name;
},
};

Author: Lucas Contreras