Посібник по TypeScript

Для зберігання даних у програмі в TypeScript, як і в багатьох мовах програмування, використовуються змінні.

Для визначення змінних, як у JavaScript, можна використовувати ключове слово var:

var z; // змінна z

Інший спосіб визначення змінної застосовує ключове слово let, яке було додано в JavaScript у стандарті ES 2015:

let z;

Застосування let є кращим, оскільки дає змогу уникнути низки проблем, пов'язаних з оголошенням змінних. Зокрема, за допомогою var ми можемо визначити два і більше разів змінну з одним і тим самим іменем:

var x = "hello";
console.log(x);
var x = "work";
console.log(x);

Якщо програма велика, то ми можемо не встежити за тим, що така змінна вже оголошена, що є джерелом потенційних помилок. Подібну проблему дає змогу вирішити let:

let x = "hello";
console.log(x);
let x = "work"; // тут буде помилка, оскільки змінна x уже оголошена
console.log(x);

Те ж саме стосується, якщо змінна з одним і тим самим іменем визначається двічі, але за допомогою обох ключових слів - let і var:

let x = "hello";
console.log(x);
var x = "work"; // тут буде помилка, оскільки змінна x уже оголошена
console.log(x);

Визначивши змінну, ми можемо встановити її значення і в процесі роботи програми поміняти його на інше:

let z = 6;
z = 8;

Крім змінних у TypeScript є константи - для них можна встановити значення тільки один раз. І далі в процесі роботи програми ми вже не зможемо змінити це значення. Для визначення констант використовується ключове слово const:

const z = 6;
z = 8; // тут помилка - не можна змінити значення константи z

Область видимості змінної та констант

Вище було сказано, що не можна визначити за допомогою let визначити більше одного разу змінну (а за допомогою const - константу) з одним і тим самим ім'ям. Це твердження стосується ситуації, коли змінні let і константи визначаються в одній області видимості. Є локальна область видимості, яка визначається блоком коду, обмеженим фігурними дужками { //....код }. І є глобальна область видимості - поза будь-яким блоком коду.

Змінні та константи у вкладеній області видимості можуть приховувати змінні та константи з тим самим ім'ям, визначені у зовнішній області видимості. Наприклад:

let x = 10;
{
    let x = 25;
    console.log(x); // 25
}
console.log(x); // 10

Тут визначено дві змінні з одним і тим самим іменем. Але помилки немає, оскільки вони визначені в різних областях видимості. Змінна let x = 10 визначена в глобальній області видимості. А змінна let x = 25; визначена у вкладеному блоці коду - в локальній області видимості. І вона приховує зовнішню глобальну змінну. Тому консоль браузера виведе нам таке:

Те саме стосується випадку, якщо змінні визначаються в локальних областях видимості, які вкладені одна в іншу:

let x = 10;
{
    let x = 25;
    {
        let x = 163;
        console.log(x); // 163
    }
    console.log(x); // 25
}
console.log(x); // 10

Відмінності між var і let/const

Можна таким чином підсумувати відмінності між var і let/const:

{
    var x = 94;
}
console.log(x); // норм

{
    нехай x = 94;
}
console.log(x); // ! Помилка

console.log(x); // undefined, але норм
var x = 76;

console.log(x); // ! Помилка
let x = 76;

var x = 72;
console.log(x); // 72
var x = 24; // норм
console.log(x); // 24

let x = 72;
console.log(x); // 72
let x = 24; // ! Помилка
console.log(x);