Занятие 29

# OTUS

## Javascript Basic

### Вопросы?

## Различие между стандартами языка, инструменты транспиляции, проблемы типизации

### Различие между стандартами языка, инструменты транспиляции

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

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

[1](https://medium.com/@dupski/what-major-new-features-were-in-each-javascript-version-what-version-should-i-target-25526c498687), [2](http://es6-features.org/), [3](https://github.com/lukehoban/es6features), [4](https://www.w3schools.com/js/js_versions.asp)

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

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

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

До того, как язык начал развиваться, его пытались модернизировать или заменить другими языками ([которые бы транспилировались в Javascript](https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS))

Примерно там же (в 2012) появился язык [TypeScript](https://ru.wikipedia.org/wiki/TypeScript).

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

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

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

### Вопросы?

### Проблемы типизации

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

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

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

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

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

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

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

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

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

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

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

[Например](https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgArQM4HsTIN4BQyxyIcAthAFzIZhSgDmA3AQL4EFgCeADigGVycKGHRRsuALz4iJMpRp0GIFnOLAAjjRABXcgCNorDgQQ46yA1gM0hIsZhzIZhEqQrVkAcgBCN7wAadWQtGgB2AA52VjMLMCsbcUkaZOcZawNmIA) описать свойства и их тип, что было полезно для языка, где классами пользоваться еще не привыкли, а вот объекты были в ходу уже давно.

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

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

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

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

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

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

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

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

### Вопросы?

### Зачем мы будем работать с Typescript

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

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

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

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

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

### Вопросы?

### Установка, настройка и запуск Typescript

1. Создать новый npm-проект
1. Установить пакет [`typescript`](https://www.npmjs.com/package/typescript)
1. Инициализировать конфигурацию для Typescript
1. Создать файлы
1. Выполнить команду `npx tsc` (Для проверки, без сборки `npx tsc --noEmit`)

```bash
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 минут для быстрого старта)](https://www.typescriptlang.org/docs/handbook/intro.html)
- [Основное про типы в TS](https://canonium.com/category/typescript)
- TypeScript как будущее энтерпрайзного JavaScript [1](https://dou.ua/lenta/articles/typescript-1/) и [2](https://dou.ua/lenta/articles/typescript-2/)
- [Глубокое погружение в TypeScript](https://github.com/etroynov/typescript-book)