Skip to content

Commit d519dee

Browse files
vvscodevvscode
committed
29
1 parent 7f22ab3 commit d519dee

File tree

1 file changed

+246
-1
lines changed

1 file changed

+246
-1
lines changed

‎lessons/lesson29/lesson.md‎

Lines changed: 246 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,246 @@
1-
# Lesson 29
1+
---
2+
title: Занятие 29
3+
description: Различие между стандартами языка, инструменты транспиляции, проблемы типизации
4+
---
5+
6+
# OTUS
7+
8+
## Javascript Basic
9+
10+
<!--v-->
11+
12+
### Вопросы?
13+
14+
<!-- s -->
15+
16+
## Различие между стандартами языка, инструменты транспиляции, проблемы типизации
17+
18+
<!-- s -->
19+
20+
### Различие между стандартами языка, инструменты транспиляции
21+
22+
<!-- v -->
23+
24+
Какая текущая версия языка ECMAScript?
25+
26+
<!-- v -->
27+
28+
Какие новые удобные вещи появились в сравнении с ES5 ?
29+
30+
<!--
31+
- классы
32+
- стрелочные функции
33+
- let/const
34+
- Symbol / bigint
35+
-->
36+
37+
[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)
38+
39+
<!-- v -->
40+
41+
В каком году появилась версия Javascript следующая за ES5 ?
42+
43+
<!-- v -->
44+
45+
Какие инструменты позволяют использовать новые версии, в окружении, которое работает со старыми версиями языка?
46+
47+
<!-- v -->
48+
49+
В каком году появился Babel.js?
50+
51+
<!-- Sep 2014 -->
52+
53+
<!-- v -->
54+
55+
До того, как язык начал развиваться, его пытались модернизировать или заменить другими языками ([которые бы транспилировались в Javascript](https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS))
56+
57+
<!-- v -->
58+
59+
Примерно там же (в 2012) появился язык [TypeScript](https://ru.wikipedia.org/wiki/TypeScript).
60+
61+
Разработчиком языка TypeScript является Андерс Хейлсберг (англ. Anders Hejlsberg), создавший ранее Turbo Pascal, Delphi и C#.
62+
63+
<!-- v -->
64+
65+
Главное чем отличался TS:
66+
67+
- был **надмножеством** Javascript
68+
- поддерживал классы
69+
- добавлял работу с типизацией
70+
71+
<!-- v -->
72+
73+
### Вопросы?
74+
75+
<!-- s -->
76+
77+
### Проблемы типизации
78+
79+
<!-- v -->
80+
81+
Виды типизации:
82+
83+
- динамическая / статическая
84+
- слабая / сильная
85+
- неявная / явная
86+
87+
Какая типизация в Javascript?
88+
89+
<!-- v -->
90+
91+
Большая часть проблем в разработке связанна с незначительными факторами:
92+
93+
- опечатки _(неправильно назвали переменную или свойство)_
94+
- невнимательность _(не передали параметр, или передали неправильный параметр)_
95+
- потеря контекста _(не учли контекст вызова)_
96+
- мелкие упущения _(не учли все места, которые затрагиваются изменениями)_
97+
98+
<!-- v -->
99+
100+
Это характерно для всех языков, но особенности типизации дают для этого хорошую почву.
101+
102+
<!-- v -->
103+
104+
Изначальная идея TypeScript - добавить явное указание типов в код. Что должно значительно уменьшить число таких проблем (или сделать их обнаружение более быстрым, без запуска кода).
105+
106+
<!-- v -->
107+
108+
```ts
109+
function getCityMap(city) {
110+
return `https://map.com?q=${city}`;
111+
}
112+
```
113+
114+
Что с этим кодом может пойти не так?
115+
116+
<!-- v -->
117+
118+
```ts
119+
function getCityMap(city: string): string {
120+
return `https://map.com?q=${city}`;
121+
}
122+
```
123+
124+
<!-- v -->
125+
126+
Помимо работы с стандартными типами для Javascript, TS позволял определить тип как класс / интерфейс / форму (shape).
127+
128+
[Например](https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgArQM4HsTIN4BQyxyIcAthAFzIZhSgDmA3AQL4EFgCeADigGVycKGHRRsuALz4iJMpRp0GIFnOLAAjjRABXcgCNorDgQQ46yA1gM0hIsZhzIZhEqQrVkAcgBCN7wAadWQtGgB2AA52VjMLMCsbcUkaZOcZawNmIA) описать свойства и их тип, что было полезно для языка, где классами пользоваться еще не привыкли, а вот объекты были в ходу уже давно.
129+
130+
<!-- v -->
131+
132+
Со временем функционал расширялся, в нем появлялись новые вещи (вроде декораторов) и обработчик языка становился умнее (например появился вывод типов).
133+
134+
<!-- v -->
135+
136+
Какую еще проблему решает Typescript?
137+
138+
<!-- v -->
139+
140+
```js
141+
/**
142+
* Returns city map url
143+
* @param {string} city
144+
* @return {string} url
145+
*/
146+
function getCityMap(city) {
147+
return `https://map.com?q=${city}`;
148+
}
149+
```
150+
151+
Какая проблема с этим кодом?
152+
153+
<!-- v -->
154+
155+
Указание типов
156+
157+
- документирует код описанием контрактов
158+
- позволяет проверять использование кода на соответствие контрактам (и чем больше кода, тем это сложнее и важнее)
159+
160+
<!-- v -->
161+
162+
**Важно!** Typescript _(как и другие языки транспилирующиеся в JS)_ **НЕ работает в браузере**.
163+
164+
Т.е. все его проверки работают только в момент написания или сборки кода! _(в браузере будет работать уже javascript, полученный при транспиляции Typescript)_
165+
166+
<!-- v -->
167+
168+
### Вопросы?
169+
170+
<!-- s -->
171+
172+
### Зачем мы будем работать с Typescript
173+
174+
<!-- v -->
175+
176+
1. Экономит нервы и время (поначалу код на typescript может писаться дольше, но со временем эта проблема уходит)
177+
1. Когда то _был_ еще [flow language](https://flow.org/), но сейчас Typescript самая популярная "альтернатива" js
178+
1. _"Необходим"_ для больших проектов (и очень рекомендован для маленьких)
179+
1. Востребован при поиске работы
180+
1. Улучшает понимание работы кода и понимание некоторых паттернов
181+
разработки
182+
183+
<!-- v -->
184+
185+
Что мы разберем на курсе:
186+
187+
- как использовать базовые возможности языка (базовые типы, интерфейсы, типизация функций)
188+
- как настроить окружение для работы
189+
- как применять некоторые "продвинутые" темы (немного generic, вывод типов,кастинг)
190+
191+
<!-- v -->
192+
193+
Базовые темы мы разберем отдельным занятием, остальное будем смотреть по ходу остальных занятий.
194+
195+
<!-- v -->
196+
197+
Дальше код будет писаться на Typescript.
198+
199+
<!-- v -->
200+
201+
### Вопросы?
202+
203+
<!-- s -->
204+
205+
### Установка, настройка и запуск Typescript
206+
207+
<!-- v -->
208+
209+
1. Создать новый npm-проект
210+
1. Установить пакет [`typescript`](https://www.npmjs.com/package/typescript)
211+
1. Инициализировать конфигурацию для Typescript
212+
1. Создать файлы
213+
1. Выполнить команду `npx tsc` (Для проверки, без сборки `npx tsc --noEmit`)
214+
215+
<!-- v -->
216+
217+
```bash
218+
mkdir typescript-test
219+
cd typescript-test
220+
221+
npm init -y
222+
223+
npm install typescript --save-dev
224+
225+
npx tsc --init
226+
227+
echo "export function x(n: number) { console.log('x with n', n); }" > "x.ts"
228+
echo "import { x } from './x'; " > "index.ts"
229+
echo "function y() { x(1); }" >> "index.ts"
230+
echo "y();" >> "index.ts"
231+
232+
npx tsc
233+
```
234+
235+
<!-- v -->
236+
237+
### Вопросы?
238+
239+
<!-- s -->
240+
241+
Дополнительные материалы:
242+
243+
- [The TypeScript Handbook (30 минут для быстрого старта)](https://www.typescriptlang.org/docs/handbook/intro.html)
244+
- [Основное про типы в TS](https://canonium.com/category/typescript)
245+
- TypeScript как будущее энтерпрайзного JavaScript [1](https://dou.ua/lenta/articles/typescript-1/) и [2](https://dou.ua/lenta/articles/typescript-2/)
246+
- [Глубокое погружение в TypeScript](https://github.com/etroynov/typescript-book)

0 commit comments

Comments
 (0)