Подводные камни при переходе с 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
