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, тепер ми знаємо, що це рядок
}