🗿 Подводные камни при переходе с ES5 на ES6

🗿 Подводные камни при переходе с ES5 на ES6

Недавно мы с командой, наконец-то перешли с ES5 на ES6.

Всё прошло достаточно плавно, нам пришлось исправить всего несколько ошибок в рантайме. Почти все ошибки были в очень старых файлах, где были отключены проверки typescript с помощью @ts-nocheck.

Ошибка 1️⃣ — Action is not a constructor

Ошибка возникла в нескольких местах, где мы использовали стрелочную функцию в качестве конструктора. Раньше она не возникала, потому что стрелочная функция компилировалась в обычную function.

const Action = () => {}; // ES6

const action = new Action(); // Action is not a constructor

var Action = function () {} // ES5

var action = new Action(); // Всё ОК

Ошибка 2️⃣ — Функции, объявленные через let, больше не попадают в window

let openAction = function () {}

window.openAction() // window.openAction is not a function

// Раньше let заменялся на var и всё работало

var openAction = function () {}

window.openAction() // всё ок

Дело в том, что когда переменная объявляется глобально через var, она автоматически становится свойством глобального объекта window. Подробнее тут.

Ошибка 3️⃣ — Cannot access variable before initialization

Одна из ошибок случалась, когда мы пытались получить доступ к переменной promise до её инициализации.

class Queue {

executing;

run(thenable) {

const promise = new Promise(async (resolve, reject) => {

// пытаемся получить значние promise

while (this.executing != promise) {

// ...

}

// ...

});

}

}

// Cannot access 'promise' before initialization

new Queue().run(Promise.resolve())

Раньше, const превращался в var и ошибки не было. Это связано с понятием временной мертвой зоны TDZ, которая не возникает у переменных, объявленных через var.

Были и другие ошибки, но они по сути вариации или комбинации тех ошибок, что я привел выше.

👉 Кстатии, размер бандлов уменьшился процентов на 20.

#TypeScript #JavaScript