✨ Why TypeScript matters ✨
Jesper Håkansson
Vad är TypeScript?
- TypeScript är JavaScript fast med syntax för typer
- Starkt typat språk som transpilerar till JavaScript
- Utvecklat av Microsoft
- Open source, finns på Github: https://github.com/Microsoft/TypeScript (över 80k stars)
- Funnits sedan 2012
Vad innebär ett starkt typat språk?
- Strikta typ-regler i compile time
- Kan ej få koden att kompilera fören vi upprätthåller korrekta typer
- En rad olika typer finns i TypeScript. Exempelvis:
- string
- number
- boolean
- Array
Vad innebär ett starkt typat språk?
1// compat.js
2function compat(arr) {
3 if (orr.length > 10) return arr.trim(0, 10);
4 return arr;
5}
1// compat.ts
2function compat(arr: Array<string>) {
3 if (arr.length > 10) return arr.slice(0, 10);
4 return arr;
5}Varför är typer bra?
- Vi får mer hjälp av TypeScript
- Refactorering av kod med självförtroende
Varför är typer bra?
- Autocomplete
Varför är typer bra?
- Tydligare kod, intentioner direkt genom att läsa koden
- Jump-to-definition
- Auto-import
- Bättre utvecklarverktyg
Varför inte typer?
- Mer komplext, jobbigt att typa allt
- Extra byggsteg
- Verbose
- Problem/jobbigt med tredje-partskod
- Falsk säkerhet med typer. Även om typer hjälper mycket så kan koden ändå ha buggar. Typer utesluter inte tester!
- Finns risk att TypeScript hamnar efter de senaste versionerna av ECMAScript
Varför inte typer svar
- Jobbigt att typa allt: TypeScript inferar faktiskt typer, det finns också en escape hatch och det är att typa saker som any. Dock ej bra!
- Extra byggsteg: Antagligen så använder man redan babel och någon nyare version av EcmaScript och kräver bakåtkompabiltet
- Verbose: Att typer är verbose är svårt att komma ifrån
Varför inte typer svar
- Problem/jobbigt med tredje-partskod. I värsta fall kan man skapa egna TypeScript typer för koden och typa upp det så gott man kan, alternativt så får man det lika dåligt typat som om det vore JavaScript
- Falsk trygghet med typer. Svårt att komma ifrån. Dock bör man ju ändå skriva tester!
Dags för lite kod! 🎉
1// user.ts
2
3// TypeScript infer it as: {id: number, username: string, email: string}
4const user = { id: 1, username: "jesper", email: "jesper@beanloop.se" };1// user.ts
2
3type User = {
4 id: number;
5 username: string;
6 email: string;
7};
8
9const user: User = { id: 1, username: "jesper", email: "jesper@beanloop.se" };
1// user-service.ts
2
3import type { User } from "./user";
4
5const getUser: User = () => // ...
6
7const editUser = (user: User) => // ...Primitiva typer
1const num: number = 123;
2const floatNum: number = 123.456;
3
4const str: string = "Hello";
5
6const bool: boolean = true;
7const falseBool: boolean = false;Arrays
1const boolArray: boolean[] = [true, false];
2
3console.log(boolArray[0]); // true
4console.log(boolArray.length); // 2
5
6const numbers: Array<number> = [1, 2, 3, 4, 5];Specialtyper
- any
- never
- undefined
- null
- void
Any
1// income tar alla typer
2let income: any = "100";
3income = 100;
4income = false;
5
6
7// any är kompatibel med alla typer
8let price: number = 0.0;
9income = price;
10price = income;Never
1function error(message: string): never {
2 throw new Error(message);
3}
4
5// Inferred return type is never
6function fail() {
7 return error("Something failed");
8}
9
10function infiniteLoop(): never {
11 while (true) {}
12}null och undefined
1const nullableVar: null = null;
2const undefinedVar: undefined = undefined;void
1function log(message): void {
2 console.log(message);
3}Generics
1function reverseStrings(items: Array<string>) {
2 return items.map((_item, index) => items[items.length - 1 - index]);
3}
4
5reverseStrings(["A", "B"]);
6
7function reverseNumbers(items: Array<number>) {
8 return items.map((_item, index) => items[items.length - 1 - index]);
9}
10
11reverseNumbers([1, 2]);Generics
1function reverse<T>(items: Array<T>): Array<T> {
2 return items.map((_item, index) => items[items.length - 1 - index]);
3}
4
5reverse<number>([1, 2, 3, 4, 5]);
6
7reverse<string>(["A", "B", "C", "D", "E"]);Unions
1type User = {
2 id: number;
3 username: string;
4 email: string;
5};
6
7type GuestUser = {
8 username: string;
9};
10
11const getUsername = (user: User | GuestUser): string => user.username;Unions
1const welcomePeople = (people: Array<string> | string) => {
2 if (Array.isArray(people)) {
3 // Here: 'people' is 'Array<string>
4 console.log("Hello, " + people.join(" and "));
5 } else {
6 // Here: 'people' is 'string'
7 console.log("Welcome lone traveler " + people);
8 }
9}Intersection
1import type { User } from "./user";
2
3type ErrorHandling = {
4 success: boolean;
5 error?: { message: string };
6};
7
8type UserResponse = User & ErrorHandling;
9
10const handleUserResponse = (userResponse: UserResponse): User | null => {
11 if (userResponse.error) {
12 // Report error to log service
13 return null;
14 }
15
16 return userResponse;
17};Tuples
1import type { User } from "./user";
2
3const getBalanceWithUsername = (user: User): [string, number] => {
4 const accountBalance: number = getAccountBalance(user);
5
6 return [user.username, accountBalance];
7};
8
9const [username, accountBalance] = getBalanceWithUsername({
10 id: 1,
11 username: "johndoe",
12 email: "johndoe@doe.doe",
13});Tuples
1import { useState } from "react";
2import type { Dispatch, SetStateAction } from "react";
3
4const MyButton = () => {
5 const [count, setCount]: [number, Dispatch<SetStateAction<number>>] =
6 useState(0);
7
8 const handleClick = () => {
9 setCount(count + 1);
10 };
11
12 return <button onClick={handleClick}>Clicked {count} times</button>;
13};Enums
1enum Color {
2 Red // 0,
3 Green // 1,
4 Blue // 2,
5}
6
7const getColor = (color: Color): string => {
8 switch (color) {
9 case Color.Red:
10 return "#FF0000";
11 case Color.Green:
12 return "#00FF00";
13 case Color.Blue:
14 return "#0000FF";
15 }
16};Enums
1enum Direction {
2 Up = "UP",
3 Down = "DOWN",
4 Left = "LEFT",
5 Right = "RIGHT",
6}1// Don't do this
2enum BooleanLikeHeterogeneousEnum {
3 Yes = "YES",
4 No = 0,
5}Readonly
1const items = [1, 2, 3];
2items.push(230);
3items[0] = 100;
4
5const point = { x: 10, y: 20 };
6point.x = 20;
7point.y = 40;Readonly
1let readonlyItems: ReadonlyArray<number> = [1, 2, 3];
2
3readonlyItems.push(230);
4readonlyItems[0] = 100;
Readonly
1type ReadonlyPoint = {
2 readonly x: number;
3 readonly y: number;
4};
5
6const readonlyPoint: ReadonlyPoint = { x: 10, y: 20 };
7
8readonlyPoint.x = 20;
9readonlyPoint.y = 40;
Få in TypeScript i redan befintlig kodbas?
yarn add -D typescript @babel/preset-typescript- Lägg till "@babel/preset-typescript" i er .babelrc
- tsc --init för att få en tsconfig.json med default-värden
- Sätt allowJs till true i tsconfig.json
- Bygg nya funktioner i TypeScript och importera gammal JavaScript-kod 🎉
Myter om TypeScript
- Det är inte JavaScript
- TypeScript är överflödigt, räcker att använda doc comments. E.g. @param, @return
- Man kan typa allt som any så det är inte är typesäkert
Det är inte JavaScript
- TypeScript följer noga ECMAScript. Implementerar stage 3 proposals
- Fungerar som JavaScript fast med typer
1// get-user.ts
2type User = {
3 id: number;
4 username: string;
5 email: string;
6};
7
8const users: ReadonlyArray<User> = [
9 { id: 1, username: "jesper", email: "jesper@beanloop.se" },
10];
11
12export const getUser = ({ userId }: { userId: User["id"] }): User | null =>
13 users.find((user) => user.id === userId) || null;1// get-user.js
2const users = [
3 { id: 1, username: "jesper", email: "jesper@beanloop.se" },
4];
5
6export const getUser = ({ userId }) => users.find((user) => user.id === userId) || null;Men enums finns ju inte i JavaScript?
1enum Color {
2 Red,
3 Green,
4 Blue,
5}
6
7const getColor = (color: Color): string => {
8 switch (color) {
9 case Color.Red:
10 return "#FF0000";
11 case Color.Green:
12 return "#00FF00";
13 case Color.Blue:
14 return "#0000FF";
15 }
16};1"use strict";
2var Color;
3(function (Color) {
4 Color[Color["Red"] = 0] = "Red";
5 Color[Color["Green"] = 1] = "Green";
6 Color[Color["Blue"] = 2] = "Blue";
7})(Color || (Color = {}));
8const getColor = (color) => {
9 switch (color) {
10 case Color.Red:
11 return "#FF0000";
12 case Color.Green:
13 return "#00FF00";
14 case Color.Blue:
15 return "#0000FF";
16 }
17};const enums till räddningen
1const enum Color {
2 Red,
3 Green,
4 Blue,
5}
6
7const getColor = (color: Color): string => {
8 switch (color) {
9 case Color.Red:
10 return "#FF0000";
11 case Color.Green:
12 return "#00FF00";
13 case Color.Blue:
14 return "#0000FF";
15 }
16};1"use strict";
2const getColor = (color) => {
3 switch (color) {
4 case Color.Red:
5 return "#FF0000";
6 case Color.Green:
7 return "#00FF00";
8 case Color.Blue:
9 return "#0000FF";
10 }
11};Doc comments
- Absolut bra, men det är sällan dokumentation hänger med implementation
- Vi kan använda både och med TypeScript. Doc comments funkar fortfarande, en aning överflödigt dock. Men @examples och beskrivning kan fortfarande vara ett trevligt komplement!
Man kan typa allt som any
1// tsconfig.json
2{
3 "compilerOptions": {
4 "noImplicitAny": true
5 }
6}1//.eslintrc.js
2module.exports = {
3 plugins: ["@typescript-eslint"],
4 extends: [...],
5 rules: {
6 "@typescript-eslint/no-explicit-any": "error",
7 },
8};Man kan typa allt som any
1const p;
2
3const age: any = "seventeen";
Alternativ till TypeScript
- Flow.js - Facebooks statiska type-checker. I princip utdött.
- Elm - Ett strikt funktionellt språk som kompilerar till JavaScript
- PureScript - Också starkt typat funktionellt språk som kompilerar till JavaScript
- ReasonML - Starkt typat språk kompilerar till JavaScript och OCaml. Kan nyttja både OCaml-paket och JavaScript-paket
Tack för mig
Frågor?