Type Script

Це суперсет над JavaScript. Це означає, що будь-який дійсний код JavaScript також є дійсним кодом TypeScript. Він додає типизацію до JavaScript.

1. Встановити nodejs
2. Вставноити VSCode
3. Встановити зборщик Vite
4. В зборщику Vite створюємо новий проект «Vanila TypeScript»
5. За необхыдныстю налаштувати компілятор за офіційною документацією або за курсом

Приклад базових налаштувань

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,


    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,


    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

• Базова типизация

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

let user: User = {
  name: 'Tom',
  age: 30,
};

let userJack: User = {
  name: 'Jack',
  age: 25,
};

export {};

let arrNumber: number[];
let mixed: (number | string)[] = [1, 'two'];

let arrAny: any[];

тип даних, який використовується, коли ви не знаєте, який тип даних може міститися у змінній. Змінні з типом any дозволяють викликати будь-які властивості та методи без перевірок типів. Цей тип даних робить змінну аналогічною змінною в JavaScript, що дозволяє передавати в неї будь-які значення. Однак, варто уникати використання типу any, оскільки це обходить переваги суворої типізації у TypeScript.

let notSure: any = 4;
notSure = 'maybe a string instead';
notSure = false;
notSure = {};

TypeScript багато в чому схожий на any, але він забезпечує більше безпеки під час роботи зі змінними. Якщо ми спробуємо присвоїти значення змінної типу unknown іншій змінній з конкретним типом без явного приведення типів, TypeScript видасть помилку. Це допомагає запобігти випадковому присвоєнню значень неправильного типу.

function fetchUserData() {
  return 'Tom';
}

let userData: unknown = fetchUserData(); // fetchUserData повертає невідомі дані
if (typeof userData === 'string') {
  console.log(userData.toUpperCase()); // OK, тепер ми знаємо, що це рядок
}

let tupleType: [string, boolean];
tupleType = ['hello', true]; // OK
tupleType = [true, 'hello']; // Error. Неправильні типи
tupleType = ['hello', true, true]; // Error. Більше значень ніж у tuple

Enum являє собою набір констант, що робить код більш зрозумілим. Як ми бачили у минулому прикладі, значеннями enum зазвичай є числа, проте ми можемо задати свої значення.

enum Role {
 ADMIN,
 USER,
}

console.log(Role.ADMIN); // 0
console.log(Role[Role.ADMIN]); // "ADMIN"

enum UserStatus {
 Active = 'ACTIVE',
 Inactive = 'INACTIVE',
 Banned = 'BANNED',
}
let status: UserStatus = UserStatus.Active;

Існує ще така конструкція, як const enum. На відміну від звичайного enum, const enum видаляється під час транспіляції та не створює додаткового об'єкта в JavaScript. Значення const enum вставляють у місце використання у вигляді літералів. Це може допомогти покращити продуктивність.

const enum HttpCodes {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
}

const status = HttpCodes.OK;

Union Type у TypeScript дозволяє вказати, що значенням може бути один із кількох типів. Це дуже зручно, коли хочемо визначити змінну, яка може приймати різні типи даних. Типи перераховуються через вертикальну риску |

let mixedType: string | number | boolean;

mixedType = 'string'; // OK
mixedType = 10; // OK
mixedType = true; // OK
mixedType = {}; // Error: Type '{}' is not assignable to type 'string | number | boolean'.