Приклади string і number

У першій програмі на TS ми виводили в консоль рядок. Розберемо тут написаний раніше код.

app.ts

function sayHello(name: string): void {
  console.log(`Hello, ${name}!`);
}

const personName: string = "Alex";
sayHello(personName);

Особливості, яких немає в JavaScript:

Параметру, який передаємо у функцію ми одразу визначаємо тип. Тип змінної вказують після символу двокрапки (типи змінних розглянемо пізніше)
void вказує на те, що функція нічого не повертає
При оголошенні змінної ми так само після символу двокрапки передаємо її тип.

Додавання чисел з використанням TypeScript

Розглянемо іще один приклад із зверненням до DOM-елементів.

Створимо index.html із двома полями для введення даних і кнопкою

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="TypeScript Project" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TypeScript Summ</title>
  </head>
  <body>
    <input type="text" name="number1" id="number1" />
    <input type="text" name="number2" id="number2" />
    <button type="button" id="summ-btn">Summ</button>

    <script src="app.js"></script>
  </body>
</html>

Напишемо код, який при натисканні на кнопку буде додавати два числа і виводити його в консоль.

app.ts

const button = document.querySelector("#summ-btn")! as HTMLElement;

const number1 = document.querySelector("#number1")! as HTMLInputElement;
const number2 = document.querySelector("#number2")! as HTMLInputElement;

function summ(a: number, b: number) {
  return a + b;
}

button.addEventListener("click", () => {
  console.log("Summ: ", summ(Number(number1.value), +number2.value));
});

Розберемо код:

Отримуємо DOM-елементи кнопки та інпутів,
Але якщо таких елементів не буде в index.html, то повернеться null. Ми ж впевнені, що такі елементи дійсно існують в нашому DOM. Тому ми можемо для TS підтвердити впевненість за допомогою ! оператора.
Функція summ отримує два параметри, типи яких ми описуємо після двокрапки
У слухачі події на натискання кнопки ми виводимо в консоль суму двох чисел з інпутів.
Але з інпутів ми отримуємо рядки, тому тип потрібно примусово привести до числа за допомогою Number(), або просто додати знак + перед сутністю, яку переводимо в число.

Компілюємо js файл командою: tsc app.ts
Отримаємо js-скрипт.

app.js

var button = document.querySelector("#summ-btn");
var number1 = document.querySelector("#number1");
var number2 = document.querySelector("#number2");
function summ(a, b) {
    return a + b;
}
button.addEventListener("click", function () {
    console.log("Summ: ", summ(Number(number1.value), +number2.value));
});

Код повністю коректно відпрацьовує Без помилок:

PreviousВстановлення TS, сервера і перший проєкт NextТипи даних

Last updated 1 year ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="description" content="TypeScript Project" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>TypeScript Summ</title> </head> <body> <input type="text" name="number1" id="number1" /> <input type="text" name="number2" id="number2" /> <button type="button" id="summ-btn">Summ</button> <script src="app.js"></script> </body> </html>

const button = document.querySelector("#summ-btn")! as HTMLElement; const number1 = document.querySelector("#number1")! as HTMLInputElement; const number2 = document.querySelector("#number2")! as HTMLInputElement; function summ(a: number, b: number) { return a + b; } button.addEventListener("click", () => { console.log("Summ: ", summ(Number(number1.value), +number2.value)); });

var button = document.querySelector("#summ-btn"); var number1 = document.querySelector("#number1"); var number2 = document.querySelector("#number2"); function summ(a, b) { return a + b; } button.addEventListener("click", function () { console.log("Summ: ", summ(Number(number1.value), +number2.value)); });