Какая текущая версия языка ECMAScript?

Какие новые удобные вещи появились в сравнении с ES5 ?

1, 2, 3, 4

В каком году появилась версия Javascript следующая за ES5 ?

Какие инструменты позволяют использовать новые версии, в окружении, которое работает со старыми версиями языка?

В каком году появился Babel.js?

До того, как язык начал развиваться, его пытались модернизировать или заменить другими языками (которые бы транспилировались в Javascript)

Примерно там же (в 2012) появился язык TypeScript.

Разработчиком языка TypeScript является Андерс Хейлсберг (англ. Anders Hejlsberg), создавший ранее Turbo Pascal, Delphi и C#.

Главное чем отличался TS:

• был надмножеством Javascript
• поддерживал классы
• добавлял работу с типизацией

Виды типизации:

• динамическая / статическая
• слабая / сильная
• неявная / явная

Какая типизация в Javascript?

Большая часть проблем в разработке связанна с незначительными факторами:

• опечатки (неправильно назвали переменную или свойство)
• невнимательность (не передали параметр, или передали неправильный параметр)
• потеря контекста (не учли контекст вызова)
• мелкие упущения (не учли все места, которые затрагиваются изменениями)

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

Изначальная идея TypeScript - добавить явное указание типов в код. Что должно значительно уменьшить число таких проблем (или сделать их обнаружение более быстрым, без запуска кода).

function getCityMap(city) {
  return `https://map.com?q=${city}`;
}

Что с этим кодом может пойти не так?

function getCityMap(city: string): string {
  return `https://map.com?q=${city}`;
}

Помимо работы с стандартными типами для Javascript, TS позволял определить тип как класс / интерфейс / форму (shape).

Например описать свойства и их тип, что было полезно для языка, где классами пользоваться еще не привыкли, а вот объекты были в ходу уже давно.

Со временем функционал расширялся, в нем появлялись новые вещи (вроде декораторов) и обработчик языка становился умнее (например появился вывод типов).

Какую еще проблему решает Typescript?

/**
 * Returns city map url
 * @param {string} city
 * @return {string} url
 */
function getCityMap(city) {
  return `https://map.com?q=${city}`;
}

Какая проблема с этим кодом?

Указание типов

• документирует код описанием контрактов
• позволяет проверять использование кода на соответствие контрактам (и чем больше кода, тем это сложнее и важнее)

Важно! Typescript (как и другие языки транспилирующиеся в JS) НЕ работает в браузере.

Т.е. все его проверки работают только в момент написания или сборки кода! (в браузере будет работать уже javascript, полученный при транспиляции Typescript)

1. Экономит нервы и время (поначалу код на typescript может писаться дольше, но со временем эта проблема уходит)
2. Когда то был еще flow language, но сейчас Typescript самая популярная "альтернатива" js
3. "Необходим" для больших проектов (и очень рекомендован для маленьких)
4. Востребован при поиске работы
5. Улучшает понимание работы кода и понимание некоторых паттернов разработки

Что мы разберем на курсе:

• как использовать базовые возможности языка (базовые типы, интерфейсы, типизация функций)
• как настроить окружение для работы
• как применять некоторые "продвинутые" темы (немного generic, вывод типов,кастинг)

Базовые темы мы разберем отдельным занятием, остальное будем смотреть по ходу остальных занятий.

Дальше код будет писаться на Typescript.

1. Создать новый npm-проект
2. Установить пакет typescript
3. Инициализировать конфигурацию для Typescript
4. Создать файлы
5. Выполнить команду npx tsc (Для проверки, без сборки npx tsc --noEmit)

mkdir typescript-test
cd typescript-test

npm init -y

npm install typescript --save-dev

npx tsc --init

echo "export function x(n: number) { console.log('x with n', n); }" > "x.ts"
echo "import { x } from './x'; " > "index.ts"
echo "function y() { x(1); }" >> "index.ts"
echo "y();" >> "index.ts"

npx tsc

Дополнительные материалы:

• The TypeScript Handbook (30 минут для быстрого старта)
• Основное про типы в TS
• TypeScript как будущее энтерпрайзного JavaScript 1 и 2
• Глубокое погружение в TypeScript