Пошук уроків, статей та іншого контенту
Розгляньте типи string, number і boolean та використайте їх для опису найпоширеніших значень у програмі.
Примітивні типи описують прості значення, з яких складаються програми. У цьому уроці розглянемо:
string — текст;
number — числа;
boolean — логічні значення true і false.
Тип змінної повідомляє TypeScript, які значення дозволено зберігати в цій змінній.
stringТип string використовують для тексту. Значення типу string записують в одинарних або подвійних лапках, а також у шаблонних рядках із бектиками.
const firstName: string = "Олена";
const city: string = 'Львів';
const greeting: string = `Привіт, ${firstName}!`;
console.log(greeting);
console.log(city);Усі наведені змінні містять текст, тому мають тип string.
До рядків можна застосовувати стандартні операції та властивості:
const firstName: string = "Олена";
const lastName: string = "Коваль";
const fullName: string = `${firstName} ${lastName}`;
console.log(fullName);
console.log(fullName.length);
console.log(fullName.toUpperCase());У цьому прикладі:
оператор ${...} вставляє значення в шаблонний рядок;
length повертає довжину рядка;
toUpperCase() перетворює літери на великі.
Не можна присвоїти число змінній типу string:
let userName: string = "Марко";
// Помилка: тип number не можна присвоїти типу string
// userName = 42;numberТип number використовують для чисел. Він охоплює як цілі, так і дробові числа, а також додатні й від’ємні значення.
const age: number = 28;
const price: number = 199.99;
const temperature: number = -4;
console.log(age);
console.log(price);
console.log(temperature);Значення типу number можна використовувати в арифметичних операціях:
const price: number = 250;
const quantity: number = 3;
const total: number = price * quantity;
console.log(total);Основні арифметичні оператори:
+ — додавання;
- — віднімання;
* — множення;
/ — ділення;
% — остача від ділення.
const firstNumber: number = 10;
const secondNumber: number = 3;
console.log(firstNumber + secondNumber); // 13
console.log(firstNumber - secondNumber); // 7
console.log(firstNumber * secondNumber); // 30
console.log(firstNumber / secondNumber); // 3.333...
console.log(firstNumber % secondNumber); // 1TypeScript не дозволяє використовувати текст як число:
const count: number = 5;
// Помилка: тип string не можна присвоїти типу number
// count = "п'ять";booleanТип boolean має лише два можливі значення:
true — істина;
false — хибність.
Його використовують для зберігання станів і результатів логічних перевірок.
const isLoggedIn: boolean = true;
const hasAccess: boolean = false;
console.log(isLoggedIn);
console.log(hasAccess);Логічні значення часто отримують за допомогою операторів порівняння:
const age: number = 20;
const isAdult: boolean = age >= 18;
console.log(isAdult); // trueІнші оператори порівняння:
=== — дорівнює;
!== — не дорівнює;
> — більше;
< — менше;
>= — більше або дорівнює;
<= — менше або дорівнює.
const password: string = "typescript";
const enteredPassword: string = "typescript";
const isCorrectPassword: boolean = password === enteredPassword;
console.log(isCorrectPassword); // trueЛогічні значення можна використовувати в умовах:
const hasTicket: boolean = true;
if (hasTicket) {
console.log("Вхід дозволено");
} else {
console.log("Потрібен квиток");
}Тип можна вказати після назви змінної через двокрапку:
let productName: string = "Ноутбук";
let productPrice: number = 45000;
let isAvailable: boolean = true;Загальний синтаксис:
let назваЗмінної: тип = значення;Наприклад:
let title: string = "Курс TypeScript";
let lessonsCount: number = 12;
let isPublished: boolean = false;Явне зазначення типу допомагає повідомити про намір і не дозволяє випадково записати несумісне значення.
TypeScript часто може визначити тип автоматично за початковим значенням. Це називають виведенням типу.
const language = "TypeScript";
const version = 5;
const isPopular = true;TypeScript визначить типи так:
language — string;
version — number;
isPopular — boolean.
У простих випадках немає потреби повторно вказувати тип:
const userName = "Ірина";
const userAge = 31;
const isAdmin = false;Такий код еквівалентний за типами цьому:
const userName: string = "Ірина";
const userAge: number = 31;
const isAdmin: boolean = false;Виведення типів не означає, що TypeScript вимикає перевірку. Тип усе одно визначений, і несумісне значення не можна присвоїти:
let score = 100;
// Помилка: змінна має тип number
// score = "сто";const і letДля значень, які не змінюватимуться, зазвичай використовують const:
const applicationName: string = "Мій застосунок";
const maxUsers: number = 100;
const isProduction: boolean = true;Для значень, які можуть змінюватися, використовують let:
let currentPage: number = 1;
currentPage = 2;
let isLoading: boolean = true;
isLoading = false;Змінна, оголошена через const, не може отримати нове значення:
const language: string = "TypeScript";
// Помилка: значення const не можна змінити
// language = "JavaScript";Це обмеження стосується саме переприсвоєння змінної. Тип const при цьому залишається звичайним примітивним типом, наприклад string або number.
Розглянемо невелику програму з інформацією про товар.
const productName: string = "Бездротові навушники";
const productPrice: number = 2499;
const productQuantity: number = 2;
const isAvailable: boolean = true;
const totalPrice: number = productPrice * productQuantity;
console.log(`Товар: ${productName}`);
console.log(`Кількість: ${productQuantity}`);
console.log(`Загальна вартість: ${totalPrice} грн`);
if (isAvailable) {
console.log("Товар доступний");
} else {
console.log("Товару немає в наявності");
}У програмі:
productName зберігає текст;
productPrice і productQuantity зберігають числа;
isAvailable зберігає логічний стан;
totalPrice обчислюється на основі числових значень;
if перевіряє значення типу boolean.
TypeScript перевіряє типи під час розробки та компіляції, але після перетворення коду на JavaScript типові анотації зникають.
const age: number = 25;
console.log(age);Під час виконання JavaScript працює зі значенням 25. Тому TypeScript допомагає виявляти помилки до запуску програми, але не змінює самі значення та не перетворює текст на число автоматично.
Наприклад, значення, отримане з поля форми, часто є рядком, навіть якщо користувач увів цифри:
const valueFromForm: string = "42";Це текст "42", а не число 42. Порівнювати його з числом або виконувати математичні обчислення потрібно лише після явного перетворення. Перетворення значень буде розглянуто окремо; важливо запам’ятати різницю між string і number.
У TypeScript для примітивних типів використовують саме такі назви:
const name: string = "Олег";
const count: number = 10;
const active: boolean = true;Не слід використовувати String, Number або Boolean для опису звичайних примітивних значень.
let message: string = "Готово";
// Помилка
// message = false;Змінна типу string може містити лише рядок.
const textNumber: string = "100";
const realNumber: number = 100;"100" і 100 — різні значення різних типів. Лапки роблять значення рядком.
boolean і текстомconst isReady: boolean = true;
const status: string = "true";true — логічне значення, а "true" — текст із чотирьох символів.
constconst userAge: number = 30;
// Помилка
// userAge = 31;Якщо значення має змінюватися, потрібно використати let.
Створіть змінні для опису книги:
назва книги — string;
ціна — number;
кількість сторінок — number;
ознака наявності в магазині — boolean.
Після цього:
виведіть інформацію про книгу в консоль;
обчисліть ціну двох примірників;
за допомогою if виведіть повідомлення про наявність книги.
Один із можливих варіантів розв’язання:
const bookTitle: string = "Кобзар";
const bookPrice: number = 320;
const pageCount: number = 240;
const isInStock: boolean = true;
const twoBooksPrice: number = bookPrice * 2;
console.log(`Назва: ${bookTitle}`);
console.log(`Кількість сторінок: ${pageCount}`);
console.log(`Ціна двох примірників: ${twoBooksPrice} грн`);
if (isInStock) {
console.log("Книга є в наявності");
} else {
console.log("Книги немає в наявності");
}string описує текстові значення.
number описує цілі та дробові числа.
boolean описує лише true або false.
Тип можна вказати явно через двокрапку або дозволити TypeScript вивести його автоматично.
Тип змінної обмежує значення, які можна їй присвоїти.
Для незмінних змінних використовують const, для змінних, значення яких змінюватимуться, — let.
"42" — це string, а 42 — це number.
true — це boolean, а "true" — це string.