Прості та складні типи даних

TypeScript підтримує статичну типізацію. Це означає, що можна вказувати типи даних для змінних, параметрів функцій, властивостей об'єктів і т. д.

Далі наведено основні типи даних, доступні в TypeScript:

Прості типи даних

Прості типи даних, ще називають скалярними й вони зберігають одне значення.

Тип	Значення	Опис
number	-21, 8.3, 32	Будь-яке число. Ціле, відʼємне, дробове
string	"Just string!"	Будь-який рядок
boolean	true, false	Тільки true або false
null	null	Тільки null
undefined	undefined	Тільки undefined

Оголошення змінних і присвоєння значень

Під час оголошення змінної її тип вказують після двокрапки.

let myValue: number;
let myString: string;
let myBooleanValue: boolean;
let myEmptyItem: null;
let myParam: undefined; 

Після цього змінній можна присвоїти відповідне значення.

myValue = 21;
myString = "Just a random string!";
myBooleanValue = true;
myEmptyItem = null;
myParam = undefined;

Можна присвоїти початкове значення одразу при ініціалізації.

let myValue: number = 21;
let myString: string  = "Just a random string!";
let myBooleanValue: boolean = true;
let myEmptyItem: null = null;
let myParam: undefined = undefined; 

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

const myValue = 21;
const myString = "Just a random string!";
const myBooleanValue = true;
const myEmptyItem = null;
const myParam = undefined;

В такому разі змінній автоматично задається тип за першим присвоєнням і якщо далі присвоїти значення іншого типу, то виникне помилка.

Параметрам функцій тип даних також вказують після двокрапки.

function myFunction (myValue: number, myString: string, myBooleanValue: boolean, myEmptyItem: null) {
  // function code
}

Якщо функції передають параметр з явним типом, то його вказувати не треба.

function myFunction (myValue = 21, myString = "Just a random string!", myBooleanValue = true, myEmptyItem = null) {
 // function code
 }

Складні типи

Масиви

Масиви чисел

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

let myArrayOfNumbers: number[];
myArrayOfNumbers = [123, 3.4, -20, "Hello"];

Масиви рядків

Якщо ми оголосимо масив як колекцію рядків і спробуємо записати у нього якусь іншу сутність, то нам її буде підкреслено хвилястою лінією.

let myArrayOfstrings: string[];
myArrayOfstrings = [123, 3.4, -20, "Hello"];

Масив будь-яких сутностей

Можна використовувати any, щоб вказати, що змінна в масиві може мати будь-який тип.

let myArray: any[];
myArray = [123, 3.4, -20, "Hello"];

Масив обʼєктів

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

let myArrayOfObjects: { item: string; value: number }[];
myArrayOfObjects = [
  { item: "phone", value: 1 },
  { item: 1, value: "phone" },
];

Обʼєкти

Задати тип "обʼєкт" змінній можна такими способами.

const myObject: object = {};

або

const myObject: {} = {};

Але і такий запис не зовсім коректний. Адже, якщо ми присвоїмо якесь значення полю обʼєкта і спробуємо його витягнути, то буде помилка. Бо в обʼєкту не буде такої властивості, бо ми її не визначили.

Тому, треба описувати структуру об'єкта.

const myObject: { myString: string; myValue: number } = {
  myString: "Alex",
  myValue: 1,
};

У прикладі вище, якщо не вказати визначений параметр об'єкта, то виникне помилка.

Або такий варіант помилки, коли намагаємося вписати невизначений параметр:

Якщо ми хочемо вказати, що якийсь параметр не обовʼязковий, а опціональний, то використовують оператор ?. Тобто ми його можемо як задавати, так і не задавати. Або присвоїти якесь значення пізніше.

const myObject: { myString: string; myValue?: number } = {
  myString: "Alex"
};

myObject.myValue = 1;

Зазвичай на практиці використовують обʼєкти, які містять більше, аніж один-два параметри (властивості).

Виходячи з описаного вище складемо якийсь приклад можливого визначення типів у обʼєкті. Нехай це буде опис якоїсь книжки.

let myBook: {
  id: number;
  bookName: string;
  bookAuthor: string;
  bookPrice: number;
  cathegory: string[];
  inStock: boolean;
  details: {
    review: string;
    date: Date;
    imgCover?: string;
  };
};

myBook = {
  id: 12345,
  bookName: "Sophie's World",
  bookAuthor: "Jostein Gaarder",
  bookPrice: 4.49,
  cathegory: ["philosophy", "history"],
  inStock: true,
  details: {
    review:
      "The international bestseller about life, the universe and everything.",
    date: new Date(),
  },
};

Покликання:

Типи даних в TypeScript