Vad är TypeScript?

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 9 min

VIKTIGT

Försök för allt i världen inte att memorera allt utantill!

Titta igenom videos; det som fastnar - det fastnar. Du kan återkomma till modulerna under grupparbetets gång för att repetera när du märker att du behöver något.

Kolla igenom snabbt, lägg det någonstans i bakhuvudet & gå vidare med ditt JavaScript-liv.

Citat från tidigare student

Se det som att köra bil; JavaScript är en Jeep som tar sig fram överallt medan TS är att köra bil, fast på vintern, och det är en Ferrari, med sommardäck som är slitna.

Boken

Boken är HELT FRIVILLIG och är cirka 318 sidor och du förväntas inte läsa den under denna modul. Använd den som ett uppslagsverk och fördjupningsmaterial. Den går dessutom ganska djupt in i vissa ämnesområden, men avhandlar det mesta på ett lättbegripligt sätt.

Vad är TypeScript? (9 min)

📖 Learning TypeScript av Josh Goldberg: From JavaScript to TypeScript

❓ Våga Fråga

🔈 Transkription

🔈 Video 1 - Vad är TypeScript?

En av de bästa grejerna med JavaScript är att det går fort att utveckla program, för vi behöver inte skriva en massa extra kod. Men, det är också en av nackdelarna med JavaScript - det blir lätt fel.

TypeScript är ett sätt säkerställa att vi skriver mindre fel i vår kod, bland annat - men den gör också vår kod, i viss mån, mer läsbar. Framför allt för utvecklare som jobbar primärt i andra programmeringsspråk, kan TypeScript göra det lättare för dom att förstå vår kod.

TypeScript är ett s.k. "superset" av JavaScript. Det är ett programmeringsspråk utvecklat av Microsoft för internt bruk runt 2010, och som utökar JavaScript med funktionalitet som inte redan finns i JavaScript. All TypeScript är giltig JavaScript-kod, men vi behöver "kompilera om" TypeScript till JavaScript, för att vanliga webbläsare ska kunna tolka detta.

TypeScript är fyra saker, och vi ska gå igenom dessa:

1. Ett programmeringsspråk.
2. En "typ-kontrollant".
3. En kompilator.
4. Ett hjälpmedel för din editor, som föreslår vilken kod du kan skriva.

Hittills har vi deklarerat en sträng såhär:

const myName = 'Jenni';

Det kan vi göra även i fortsättningen, men vill vi vara extra tydliga kan vi skriva såhär i TypeScript:

const myName: string = 'Jenni';

När vi skriver kod i TypeScript kan vi inte längre använda filändelsen .js, utan ska istället skriva .ts. Detta berättar för bl.a. vår editor (t.ex. WebStorm eller Visual Studio Code) att filen är i TypeScript-format, och då aktiveras hjälpmedel i editorn för att skriva TypeScript.

Men, om vi tar sträng-exemplet ovan så kan det ju till synes verka onödigt att skriva dit att det är en sträng - det ser man ju!

Det fina med JavaScript är ju att vi just kan växla mellan variabeltyper, t.ex. såhär:

let myName = 'Jenni';
myName = 10;

Med TypeScript går inte det längre:

let myName: string = 'Jenni';
myName = 10; // Type 'number' is not assignable to type 'String'

Det finns för- och nackdelar med TypeScript. Det blir mer kod att skriva, men i stora kodbaser och när man samarbetar med flera utvecklare, så har TypeScript sina fördelar - det blir tydligare vad som avses även om någon har döpt sin variabel till n1: Number. Ibland orsakar också varningarna i TypeScript mer huvudvärk, och gör programmeringen avsevärt mycket tråkigare för att all ens tid går åt till att fixa fel i TypeScript.

Men ett område där vi har nytta av TypeScript är t.ex. när vi deklarerar objekt. Jämför nedan:

const user1 = {
  name: 'Regular Joe',
  age: 25,
  occupation: 'UX Designer',
};

const user2 = {
  name: 'Regular Jane',
  occupation: 'Developer',
};

const users = [user1, user2];

users.forEach(user => {
  console.log(user.age); // Kommer att generera undefined för vår Regular Jane, varför?
});

Hade vi istället använt oss av TypeScript och deklarerat ett "regelverk/mall" för hur våra användare ska se ut, så hade vi inte kunnat begå misstaget - för editorn (TypeScript) hade klagat:

type User = {
  name: string;
  age: number;
  occupation: string;
}

const user1: User = {
  name: 'Regular Joe',
  age: 25,
  occupation: 'UX Designer',
};

const user2: User = { // Property age is missing
  name: 'Regular Jane',
  occupation: 'Developer',
};

const users = [user1, user2];

users.forEach(user => {
  console.log(user.age);
});

TypeScript klagar på två typer av fel: typfel (type error) och syntaxfel (syntax error). Typfel är när vi exempelvis försöker sätta en siffra till en sträng, och syntaxfel kan vara om vi skriver t.ex. let två gånger:

let let number = 10;

I nästa video går vi igenom hur man kommer igång med TypeScript, och grunderna i det.