Typescript – bilješke

Zašto?

U jezicima poput C ili Jave imamo tipove varijabli i funkcija koje uvijek moramo deklarirati. A možemo deklarirati i predložak u kojem je određeno koji tip datoteke možemo imati u varijabli, funkciji ili strukturi. Koje su prednosti?

function hello(mustBeString){
	if (typeof mustBeString !== 'string'){
		throw 'Argument nije string!';
	}
}

Znači mi sada tu gubimo vrijeme na provjeru tipa argumenta. U typescript-u pišemo ovako:

function hello(mustBeString: string){
	//...
}

Isto tako možemo odrediti dozvoljeni tip koji vrača funkcija:

function hello(n: number) : number{
	return n++;
}

Znači sada ne moramo provjeravati vrijednost koju nam vrača funkcija.

Instalacija

sudo apt install node-typescript #ubuntu

Ovo nam omogućava da koristimo globalno naredbu “tsc”. Pa pripremamo projekt sa:

mkdir project 
cd ./project
tsc --init 
mkdir src
cd ./project/src
touch ./index.ts

tsconfig.json

“tsconfig.json” nam napravi “tsc –init” naredba. Ovu datoteku obavezno treba proučiti a u njoj se nalaze postavke i komentari sa objašnjenjima.

U “index.ts” unosimo:

function render(n: number) : number{
	return n++;
}
render(232);

Sa naredbom “tsc” kompajliramo kod. Pa u direktoriju gdje nam je “tsconfig.json” unosimo naredbu:

tsc

I sada u “/src” diru imamo i kompajlirani obični “index.js”.

"use strict";
function render(n) {
    return n++;
}
render(232);

Tipovi

number

string

boolean

null

undefined

object

any

unknown

never

enum

tuple

Primjeri

let age: number = 20;	broj
let sales: number = 123_456_789;	velike brojeve možemo odvojiti sa “_”
let course: string = ‘TypeScript’;	string
let isPublished: boolean = true;	bool
let level;	type: any – bilo koji
let numbers: number[] = [1,2,3];	array, ali samo sa brojevima

Tuple

Tuple je array sa određenim vrijednostima.

let user: [number,string] = [1, 'alpha'];  

Enum

Kao u C jeziku sa enum-om dodajemo niz varijabli koji postaje enumiran. Što znači da svaka varijabla dobiva broj u nizu a počinje s nulom.

const enum Size { Small, Medium, Large};

Tako da je ovdje “Size.Medium” jednako broj 1.

enum Size { Small=2, Medium, Large};

Ovdje enumeracija počinje sa brojem 2.

Za razliku od C jezika u TS-u enum može biti i string ali onda sve vrijednosti moraju biti string.

enum Size { Small='s', Medium='m', Large='l' }; 

Objekt

Strukturu objekta deklariramo ovako:

let employee: {
	id: number,
	name: string
} = { 
	id:1, 
	name:'' 
};

employee.name = 'Alpha';

Readonly

let something: {
	readonly id: number,
} = { 
	id:1 
};

Neobvezni property

Ukoliko ne unesemo sve property-je u deklariranom objektu, dobivamo pogrešku. Da to zaobiđemo koristimo “optional property”.

let employee: {
	id: number,
	name?: string   // ?: optional property
} = { 
	id:1 
};

Metode

Metode deklariramo ovako:

let employee: {
	id: number,
	retire: (date: Date) => void,
} = { 
	id:1,
	retire: (date: Date) => {
		console.log(date);
	},
};

Type Alias

Deklariramo novi tip “Employee” i koristimo ga kao built-in tipove:

type Employee = {
	id: number,
	retire: (date: Date) => void,	
}

let employee: Employee = { 
	id:1,
	retire: (date: Date) => {
		console.log(date);
	},
}

Union types

Kako dozvoliti više tipova:

function kgToLbs(weight:number|string): number{
	if (typeof weight === 'number') ...
};

kgToLbs(10);
kgToLbs('10kg');

Intersection types

Razumljivo samo po sebi u primjeru:

type Draggable = {
	drag: () => void
};

type Resizable = {
	resize: () => void
};

type UIWidget = Draggable & Resizable;

let textBox: UIWidget = {
	drag: () => {},
	resize: () => {},
}

Literal type

Određujemo samo dozvoljeno vrijednosti.

let quantity: 50 | 100; // može biti 50 ili 100
let quantity: Quantity;

type Metric = 'cm' | 'inch';

NULL

Tipovi NE MOGU biti “null” or “undefined” pa ih moramo navesti:

type Value = string | null | undefined;

Nastavlja se…