index.html

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>TypeScript</title>

    <link rel="stylesheet" href="reveal/css/reset.css">
    <link rel="stylesheet" href="reveal/css/reveal.css">
    <link rel="stylesheet" href="reveal/css/kontur.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="reveal/css/idea-for-light.css">

    <!-- Printing and PDF exports -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? 'reveal/css/print/pdf.css' : 'reveal/css/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body class="has-light-background">
<div class="reveal"><div class="slides">
<section data-markdown><script type="text/template">

# TypeScript

<a href="https://github.com/kontur-web-courses/typescript" style="display: block; text-align: center">https://github.com/kontur-web-courses/typescript</a>

</script></section>
<section>
    <section data-markdown><script type="text/template">
      ## Введение
    </script></section>
    <section data-markdown><script type="text/template">
        ### Проблема JS

        ```js
        const str = '2468';
        const res = str.split('').reduce(sum);

        function sum (a, b) {
            return a + b;
        }

        console.log(res);
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### И еще проблема

        ```js
        function getUserName(id, source) {
            /* Тут какой-то код */
        }

        function formatDate(date, formatType) {
            /* Тут какой-то код */
        }
        ```

        Что принимают эти функции вторым аргументом?
    </script></section>

    <section data-markdown><script type="text/template">
        ### Почему существуют такие проблемы?
        ### Как можно от них избавиться?
    </script></section>


    <section data-markdown><script type="text/template">
        ### История решений

        #### 1. JSDoc

        ```js
        /**
        * Функция для форматирования даты в тот вид, который надо показывать на странице
        * @param {Date} date — дата, которую надо отформатировать
        * @param {string} formatType — формат: строка вида "DD.MM.YYYY"
        */
        function formatDate(date, formatType) {
        /* Тут какой-то код */
        }
        ```
        ![hint in vscode](img/jsdoc-hint.png)

    </script></section>
    <section data-markdown><script type="text/template">
        ### История решений

        #### 2. Dart

        Язык программирования от Google:
        - статическая типизация
        - работает в браузере
        - компилируется в JS


        ```js
        string function formatDate(Date date, string formatType) {
            /* Тут какой-то код */
        }
        ```

    </script></section>
    <section data-markdown><script type="text/template">
        ### История решений

        #### 3. React.propTypes

        ```js
        class MyComponent extends React.Component {}

        MyComponent.propTypes = {
            name: PropTypes.string,
            onClick: PropTypes.func,
        }

        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### История решений

        #### 4. Flow

        ```js
        // @flow
        function formatDate(date: Date, formatType: string): string {
            /* Тут какой-то код */
        }

        formatDate(new Date(), {day: 'full'}); // Error!
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### История решений

        #### 5. TypeScript

        - статически типизирован
        - компилируется в JS
        - является стандартом де-факто для крупных приложений
    </script></section>
    <section data-markdown><script type="text/template">
        ### TypeScript

        Был создан, чтобы добавить типизацию к JS.
        Поэтому у TS очень гибкая и удобная система типов.
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Инфраструктура для TS
    </script></section>
    <section data-markdown><script type="text/template">
        ### Официальный сайт

        Всю необходимую информацию о TypeScript можно найти на [официальном сайте](https://www.typescriptlang.org/).

        Здесь есть: документация, гайды по настройке, ссылки для скачивания и т.д.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Песочница

        Для проверки идей стоит использовать официальную песочницу [TypeScript Playground](https://www.typescriptlang.org/play/)

        Именно в ней будут находиться почти все задания нашего занятия.
    </script></section>

    <section data-markdown><script type="text/template">
        ### Реальные проекты

        В реальных проектах используется [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

        В этом файле хранится конфигурация для компилятора TypeScript. Например, в нем можно сконфигурировать:
        - в какую версию ES компилировать TypeScript (ES5, ES6, ...)
        - нужно ли генерировать SourceMap-ы
        - какие файлы (по каким путям) нужно компилировать
        - ...

        Для более подробной информации о возможностях конфигурации TypeScript можно узнать на официальном сайте.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Генерация tsconfig.json

        tsconfig.json можно создать и заполнить вручную. А можно выполнить команду
        ```
        tsc --init
        ```
        и компилятор сгенерирует файл конфигурации с дефолтными настройками.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Чем компилировать TS

        - `tsc — TypeScript Compiler`
        Подходит для приложений без фреймворков, которые просто нужно скомпилировать TS -> JS
        - `ts-loader` для webpack
        Подходит для приложений с реактом или другими фреймворками
        - `@babel/preset-typescript`
        Подходит в тех случаях, когда в сборке TS -> готовый бандл много шагов, чтобы не было проблем на стыке шагов.
        - `альтернативные решения`
        Если у вас легаси или код на каких-то редких технологиях, то для них наверняка есть свои решения.
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Простые типы
    </script></section>
    <section data-markdown><script type="text/template">
        ### Синтаксис

        Пример объявления переменной в TypeScript:

        ```ts
        const a: number = 10;
        ```
        Тип описывается после символа `:`.
        Примитивные типы пишутся с маленькой буквы.
    </script></section>

    <section data-markdown><script type="text/template">
        ### Примитивы

        ```ts
        const a: number = 10;
        const b: string = 'abc';
        const c: boolean = a < 30;
        ```

    </script></section>
    <section data-markdown><script type="text/template">
        ### Пробуем обмануть систему

        ```ts
        const a: number = 'abc';
        ```
        <img src="img/wrongtype.png" class="fragment">
    </script></section>
    <section data-markdown><script type="text/template">
        ### Массивы

        ```ts
        const stringArr: string[] = ['abc', 's'];
        const numberArr: number[] = [1, 3 + 5];
        const booleanArr: boolean[] = [true, 0 > 15, 'abc' === 'abc'];
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Массивы, альтернативный синтаксис

        Иногда вы можете встретить другой синтаксис описания массивов:
        ```ts
        const stringArr: Array<string> = ['abc', 's'];
        ```

        Про этот синтаксис поговорим дальше, а пока будем пользоваться синтаксисом `string[]`.
    </script></section>
    <section data-markdown data-transition="slide none"><script type="text/template">
        ### Массивы, что можно сложить внутрь

        Валидны ли эти конструкции?
        ```ts
        const a: number[] = [1, 2, 3, "4"]; // ?
        const b: number[] = [];     // ?
        ```

    </script></section>
    <section data-markdown data-transition="none slide"><script type="text/template">
        ### Массивы, что можно сложить внутрь

        Валидны ли эти конструкции?
        ```ts
        const a: number[] = [1, 2, 3, "4"]; // Error: Type 'string' is not assignable to type 'number'.(2322)
        const b: number[] = [];     // Все нормально
        ```

    </script></section>

    <section data-markdown><script type="text/template">
        ### Что делать, если надо сложить значения разного типа?

        ```ts
        const user: ? = ['Всеволод', 19, 'Екатеринбург', true];
        ```
    </script></section>

    <section data-markdown><script type="text/template">
        ### Tuple (кортеж)

        ```ts
        const user:
            [string, number, string, boolean]
            = ['Всеволод', 19, 'Екатеринбург', true];
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что делать, если надо описать массив внутри кортежа?

        ```ts
        const a: ? = [['Иван', 'Петров'], 'user', [14, 21]];
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что делать, если надо описать массив внутри кортежа

        ```ts
        const a:
            [[string, string], string, number[]]
            = [['Иван', 'Петров'], 'user', [14, 21]];
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что можно сложить в tuple?

        Валидны ли эти конструкции?
        ```ts
        const a: [number] = [];     // ?
        const b: [number] = ["123"];// ?
        const c: [number] = [1, 2]; // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что можно сложить в tuple

        ```ts
        const a: [number] = [];     // Error: Property '0' is missing in type '[]' but required in type '[number]'.(2741)
        const b: [number] = ["123"];// Error: Type 'string' is not assignable to type 'number'.(2322)
        const c: [number] = [1, 2]; /* Error:
            Type '[number, number]' is not assignable to type '[number]'.
            Types of property 'length' are incompatible.
            Type '2' is not assignable to type '1'.(2322)
        */
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### null и undefined

        В JS null и undefined — примитивные типы, содержащие по одному значению в каждом типе. Такие же типы есть и в TS:
        ```ts
        const a: null = null; // Вряд ли вам это понадобится
        const b: undefined = undefined; // И это тоже
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### null и undefined

        Без дополнительных настроек, null и undefined могут быть значением переменной любого типа:

        ```ts
        const a: string = null;
        const b: number = undefined;
        const d: string[] = null;
        const e: [number] = undefined;
        const f: [string, string] = [null, null];
        ```
        Но обычно TS настраивают, чтобы nullable типы нужно было описывать явно.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Автоматический вывод типов

        ```ts
        let a = 10;   // a: number
        let b = a;    // b: number
        let c = a + b;// c: number
        let d = c - 2*a === 0;// d: boolean
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Автоматический вывод типов у массивов

        ```ts
        const a = [1, 2, 3];// a: number[]
        const b = [0, 1];   // b: number[]
        ```

        Если нужен tuple — придется писать явно.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пора писать код!

        [Задача](https://www.typescriptlang.org/play/?strictNullChecks=false#code/PQKgsAUABDWOgggGEECwgDCcIFQQiCA4QQ-CBcOwgCgYiBaByIFFlPoLwgCg4iCCsINVoPIgUSg3CBsCGANFACN+AYwpQAJvwwJAXCD86GQHwggRhBA0iCRYUagyhqOiqIsASIFmWKZUGYsA8IHi4ksAOkghgkSMID2AOwDOAFyhuKABeKAAzbgAbXwBTAG4PHwDBUIjouMSILz9A0TDImISk3Ik0wsz3CBKUgEcARjTuLJy6gCY08QBtAAYAXRbkwNqAZjTajoBqKAaoafFHKNjvAHN-AAtB0tqAFjSBReW19bnBLra+w9WNrbqAVn3QkLDhLvq+3oGa4YA2NNf3p8ni83h9+p9bsMAOzjP7PMK1B7wqAAj7vSEzAAcAC4oN4AK5RKL-CFAA)
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Типы — это множества
    </script></section>
    <section data-markdown><script type="text/template">
        ### Типы — множества

        Все типы в TS — это множества.

        Например, тип `number` — множество всех чисел:
        - всех поддерживаемых систем счисления,
        - целых и десятичных,
        - включая `Infinity`, `NaN`, `-0`
    </script></section>
    <section data-markdown><script type="text/template">
        ### Как думаете

        Существуют ли типы, являющиеся единичными множествами?
    </script></section>
    <section data-markdown><script type="text/template">
        ### Единичные множества

        ```ts
        const a: 10 = 10;
        const b: true = true;
        const c: "lalaka" = "lalaka";
        const d: null = null;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Автовывод типов

        Зависит от способа объявления переменной:
        ```ts
        const a = 10;   // a: 10
        let aa = 10;    // aa: number
        const b = "str";// b: "str"
        let bb = "str"; // bb: string
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какие типы у этих переменных?
        ```ts
        const a = [1,2,3];   // ?
        let b = [1,2,3];     // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какие типы у этих переменных?
        ```ts
        const a = [1,2,3];   // a: number[]
        let b = [1,2,3];     // b: number[]
        ```
    </script></section>
    <style>
        .img-wrapper {
            position: absolute;
            left: 0;
            width: 694px;
            height: 450px;
            background: white;
            padding-top: 45px;
            top: 0;
        }
    </style>
    <section data-markdown><script type="text/template">
        ### Как это работает
        ```ts
        const a = 10;
        const b: number = a;
        ```
        <div style="position: relative;">
            <img src="img/10isNumber-1.png" height="450" alt="10 is number?">
            <img src="img/10isNumber-2.png" height="450" alt="10 is number? yes" class="fragment" style="position: absolute; left: 0">
            <div class="fragment img-wrapper">
                <img src="img/10isNumber-3.png" height="405" alt="10 is number? yes">
            </div>
        </div>

    </script></section>
    <section data-markdown><script type="text/template">
        ### Как это работает

        ```ts
        const a = "str";
        const b: number = a;
        ```

        <div style="position: relative;">
            <img src="img/strIsNumber-1.png" height="450" alt="str is number?">
            <img src="img/strIsNumber-2.png" height="450" alt="str is number? yes" class="fragment" style="position: absolute; left: 0">
            <img src="img/strIsNumber-3.png" height="450" alt="str is number? yes" class="fragment" style="position: absolute; left: 0">
        </div>

    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Кортеж и массив

        Валиден ли следующий код?
        ```ts
        const a: [number, number, number] = [1, 2, 3];
        const b: number[] = a; // ?
        ```
        А этот?
        ```ts
        const b: number[] = [1, 2, 3];
        const a: [number, number, number] = b; // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Кортеж и массив

        Валиден ли следующий код?
        ```ts
        const a: [number, number, number] = [1, 2, 3];
        const b: number[] = a; // Все нормально
        ```
        А этот?
        ```ts
        const b: number[] = [1, 2, 3];
        const a: [number, number, number] = b; // Error: Type 'number[]' is missing the following properties from type '[number, number, number]': 0, 1, 2(2739)
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Кортеж и массив

        <img src="img/tupleAndNumberArray.png" alt="tuple and numbers array">
    </script></section>

    <section data-markdown><script type="text/template">
        ## Any
    </script></section>
    <section data-markdown><script type="text/template">
        ### Any

        ```ts
        let a: any = null;
        a = 10;
        a = true;
        a = "lalaka";
        a = [1, 2, 3];
        ```

    </script></section>
    <section data-markdown><script type="text/template">
        ### Any как множество

        - any является множеством абсолютно всех возможных значений.
        - any является подмножеством абсолютно любого типа.
        <img src="img/any.png" alt="any">

    </script></section>
    <section data-markdown><script type="text/template">
        ### Any как подмножество любого типа

        ```ts
        const a: any = "lalaka";
        const b: number = a + a;
        const c: true = a;
        const d: [number, [string, string]] = a;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Как думаете

        Когда стоит использовать `any`?
    </script></section>
    <section data-markdown><script type="text/template">
        ### Когда использовать

        Для any TS отключает все проверки типов. Просто работает в режиме JS.

        Использовать any стоит:
        - если проект только начали внедрять TS и еще не все успели переписать, легаси пусть будет с any
        - чтобы парсить незнакомый JSON
        - если вынуждены использовать нетипизированый JS в части приложения
    </script></section>
    <section data-markdown><script type="text/template">
        ## Объединение типов
    </script></section>
    <section data-markdown><script type="text/template">
        ### Font-weight

        Попробуем описать переменную, которая будет хранить значение css-свойства font-weight:

        ```ts
        let fontWeight: ? = "bold";
        fontWeight = 600;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Font-weight

        Можно написать `any`:

        ```ts
        let fontWeight: any = "bold";
        fontWeight = 600;
        fontWeight = true;
        fontWeight = [1, "lalaka"];
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Font-weight

        Нужен какой-то тип, который разрешит записывать только строки или числа.
        Это называется объединение типов:
        ```ts
        let fontWeight: number | string = "bold";
        ```
        <img src="img/numberAndString.png" alt="number and string">
    </script></section>
    <section data-markdown><script type="text/template">
        ### Font-weight

        Усложним задачу. Теперь мы хотим, чтобы еще null и undefined можно было записать.

        ```ts
        let fontWeight: ? = "bold";
        fontWeight = 600;
        fontWeight = null;
        fontWeight = undefined;
        ```
        <img src="img/numberAndStringAndNull.png" alt="number and string and null and undefined">
    </script></section>
    <section data-markdown><script type="text/template">
        ### Font-weight

        ```ts
        let fontWeight: number | string | null | undefined = "bold";
        fontWeight = 600;
        fontWeight = null;
        fontWeight = undefined;
        ```
        <img src="img/numberAndStringAndNull.png" alt="number and string and null and undefined">
    </script></section>
    <section data-markdown><script type="text/template">
        ### Font-weight

        ```ts
        let fontWeight: number | string | null | undefined = "lalaka";
        fontWeight = -300;
        ```
        Хочется ограничить значения только теми, которые поймет css: "bold", "bolder", 500, 600.
        Это не все значения, но мы для примера возьмем только их.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Font-weight

        ```ts
        let fontWeight: "bold" | "bolder" | 500 | 600 | null | undefined = "bold";
        fontWeight = 600;
        fontWeight = null;
        fontWeight = undefined;
        fontWeight = 500;
        fontWeight = "bolder";
        fontWeight = "lalaka"; // Error: Type '"lalaka"' is not assignable to type '"bold" | "bolder" | 500 | 600 | null | undefined'.(2322)
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Объединение массивов

        ```ts
        const a: number[] | string[] = [1, 2, 3];
        const b: number[] | string[] = ["lalaka"];
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        валиден ли следующий код?
        ```ts
        const a: number[] | string[] = [1, "str", 3]; // ?
        const b: number[] | string[] = []; // ?
        const c: number[] | string[] = [true]; // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        валиден ли следующий код?
        ```ts
        const a: number[] | string[] = [1, "str", 3]; // Error: Type '(string | number)[]' is not assignable to type 'number[] | string[]'.
        const b: number[] | string[] = []; // Все ОК
        const c: number[] | string[] = [true]; // Error: Type 'true' is not assignable to type 'string | number'.(2322)
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Объединение элементов массивов

        ```ts
        const a: (number | string)[] = [1, "lalaka", 3];
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ## Пересечение типов
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пересечение типов

        ```ts
        const a: number & string = ???;
        ```

    </script></section>
    <section data-markdown><script type="text/template">
        ### Пересечение типов

        <img src="img/numberAndString.png" alt="number and string">

        Пересечение множества `string` и `number` = `∅`. Пустое множество соответствует типу `never` в TS.
        ```ts
        const a: number & string = ???; // Такого значения не существует
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Пересечение типов

        Для примитивов и кортежей пересечение бессмысленно — оно порождает пустое множество.
        Для массивов однако это множество будет не пустым.
        Как думаете, что будет валидным значением для переменных `a` и `b`?

        ```ts
        const a: (number & string & boolean)[] = ?;
        const b: number[] & string[] & boolean[] = ?;
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Пересечение типов

        Для примитивов и кортежей пересечение бессмысленно — оно порождает пустое множество.
        Для массивов однако это множество будет не пустым.
        Как думаете, что будет валидным значением для переменных `a` и `b`?

        ```ts
        const a: (number & string & boolean)[] = []; // Пустой массив подходит
        const b: number[] & string[] & boolean[] = [];
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Пересечение типов

        Настоящую силу пересечения типов мы обсудим дальше, в более сложных типах данных.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Тест. Типы как множества

        [Ссылка на тест](https://docs.google.com/forms/d/e/1FAIpQLSdoEt54rr4l0UZaxu9GnlUVC-KOwNt7yYgyGAxCok3X2FX80A/viewform?usp=sf_link)
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Объекты
    </script></section>
    <section data-markdown><script type="text/template">
        ### Тип объекта

        ```ts
        const a = { a: 10 }; // { a: number }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Тип объекта

        Почему вывелся тип не `{ a: 10 }`, а `{ a: number }`?

        ```ts
        const a = { a: 10 }; // { a: number }
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что можно сложить в объект

        Валидны ли эти строки?
        ```ts
        const a: { a: number } = { b: 10 }; // ?
        const b: { a: number } = { };       // ?
        const c: { a: number } = { a: true };// ?
        const d: { a: number } = { a: 10, b: 25 };// ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что можно сложить в объект

        Валидны ли эти строки?
        ```ts
        const a: { a: number } = { b: 10 }; // Error: Type '{ b: number; }' is not assignable to type '{ a: number; }'.
        const b: { a: number } = { };       // Error: Property 'a' is missing in type '{}' but required in type '{ a: number; }'.(2741)
        const c: { a: number } = { a: true };// Error: Type 'true' is not assignable to type 'number'.
        const d: { a: number } = { a: 10, b: 25 };// Error: Type '{ a: number; b: number; }' is not assignable to type '{ a: number; }'.
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что можно сложить в объект

        А если обмануть систему?
        ```ts
        const a = { a: 10, b: "lalaka" };
        a.a = 300       // ?
        a.a = "malaka"; // ?
        a.z = true;     // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Что можно сложить в объект

        А если обмануть систему?
        ```ts
        const a = { a: 10, b: "lalaka" };
        a.a = 300       // Все ок
        a.a = "malaka"; // Error: Type '"malaka"' is not assignable to type 'number'.
        a.z = true;     // Error: Property 'z' does not exist on type '{ a: number; b: string; }'.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Проверка типов объектов

        ```ts
        let x: {a: number, b: string};
        const y = {a: 10, b: "lalaka"};
        x = y;
        ```
        <p class="fragment">
            Объект <code>y</code> совместим с типом объекта <code>x</code>, если у объекта <code>y</code> есть все поля,
            которые есть у <code>x</code> и тип этих полей совместим с типом полей <code>x</code>
        </p>
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        валиден ли этот код?
        ```ts
        let x: {a: number, b: string};
        const y: {a: 10, b: "lalaka"} = {a: 10, b: "lalaka"};
        x = y; // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        валиден ли этот код?
        ```ts
        let x: {a: number, b: string};
        const y: {a: 10, b: "lalaka"} = {a: 10, b: "lalaka"};
        x = y; // Все ок, типы полей совместимы
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        валиден ли этот код?
        ```ts
        let x: {a: number, b: string};
        const y = {a: 10, b: "lalaka", c: true};
        x = y;      // ?
        x.c = false;// ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        валиден ли этот код?
        ```ts
        let x: {a: number, b: string};
        const y = {a: 10, b: "lalaka", c: true};
        x = y;      // Все ок
        x.c = false;// Error: Property 'c' does not exist on type '{ a: number; b: string; }'.
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Проверка типов объектов

        работает при помощи «утиной типизации»
    </script></section>
    <section data-markdown><script type="text/template">
        ## Type alias
    </script></section>
    <section data-markdown><script type="text/template">
        ### Type alias

        Это возможность описать типы отдельно от объявления переменных.

        ```ts
        type MyType = string;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Type alias

        ```ts
        type A = string
        type B = number | boolean
        type C = A | B
        const c: C = 10 // type: string | number | boolean

        type Q = {
            a: A;
            b: B;
            c: C;
            tuple: [A, B, "lalaka", string];
            array: number[];
            aliasArray: A[];
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ## typeof
    </script></section>
    <section data-markdown><script type="text/template">
        ### typeof

        Может понадобиться сохранить тип какой-то переменной:
        ```ts
        const x = {a: "lalaka", b: 10};
        type X = typeof x;

        const y: X = {a: "malaka", b: 15} // type: {a: string, b: number}
        const z: typeof x = {a: "palaka", b: 30} //type: {a: string, b: number}
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какие будут типы у переменных `b` и `c`?
        ```ts
        const a = [1, 2, 3];
        let b: typeof a;    // ?
        let c = typeof a;   // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какие будут типы у переменных `b` и `c`?
        ```ts
        const a = [1, 2, 3];
        let b: typeof a;    // number[]
        let c = typeof a;   // "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Как думаете
        ```ts
        const a = [1, 2, 3];
        let b: typeof a;    // number[]
        let c = typeof a;   // "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"
        ```
        Как TS не путает какой `typeof` использовать?

        <p class="fragment">
            TS различает контекст использования.<br>
            <code>typeof</code> в месте, где объявляются типы — взять тип у переменной.<br>
            <code>typeof</code> в обычном коде — используем <code>typeof</code> из JS
        </p>
    </script></section>
    <section data-markdown><script type="text/template">
        ## Interface
    </script></section>
    <section data-markdown><script type="text/template">
        ### Interface

        ```ts
        interface A {
            a: number;
            b: string:
            q: boolean;
        }

        const a: A = {
            a: 100500,
            b: "lalaka",
            q: false,
        };
        ```

        Обычно объекты описываются интерфейсами, а не `type alias`.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Interface vs type alias

        **1. type alias может содержать не только объект**

        ```ts
        interface A {
            a: number
        }

        type B = A;
        type C = B;
        type D = string | 10 | ["lalaka"] | null | undefined
        type E = C | D
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Interface vs type alias

        **2. При объявлении интерфейсов с одинаковым именем тип объекта расширяется...**

        ```ts
        interface A {
            a: number;
        }

        interface A {
            b: string;
        }

        const a: A = { a: 10, b: "lalaka" }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Interface vs type alias

        **2. ...а объявить два type alias с одинаковым именем нельзя**

        ```ts
        type A = { //Error: Duplicate identifier 'A'.
            a: number;
        }

        type A = { //Error: Duplicate identifier 'A'.
            b: string;
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Interface vs type alias

        **3. Интерфейсы могут наследоваться друг от друга**

        ```ts
        interface A {
            a: number;
        }

        interface B extends A {
            b: string;
        }

        interface C extends A {
            c: boolean;
        }

        const a: A = { a: 10 };
        const b: B = { a: 15, b: "lalaka" };
        const c: C = { a: 20, c: true };
        ```

        Type alias не наследуются.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Interface vs type alias

        - Интерфейсы позволяют типизировать только объекты
        - Type alias предназначены для хранения абсолютно любого типа
        - Интерфейсы умеют наследоваться и расширяться
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример использования наследования

        ```ts
        interface DomElement {
            width: number;
            height: number;
        }

        interface DivElement extends DomElement {
            textContent: string;
        }

        interface ButtonElement extends DomElement {
            tabIndex: number;
        }
        ```
        Вынесли общее (размер) в отдельный тип.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример использования наследования

        ```ts
        const div: DivElement = {textContent: "lalaka", width: 100, height: 15};
        const button: ButtonElement = {tabIndex: 0, width: 500, height: 300};

        const tree: DomElement[] = [
            div,
            button,
            div,
            button
        ];
        ```
        Собрали массив из элементов базового класса.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример использования наследования

        ```ts
        const div: DivElement = {textContent: "lalaka", width: 100, height: 15};

        const q: DomElement = div;
        q.textContent // Error: Property 'textContent' does not exist on type 'DomElement'.
        tree[1].textContent // Error: Property 'textContent' does not exist on type 'DomElement'.
        ```
        Но при использовании элемента в роли его базового типа, все дополнительные поля теряются.
    </script></section>
    <section data-markdown><script type="text/template">
        ## Readonly и optional
    </script></section>
    <section data-markdown><script type="text/template">
        ### Readonly

        ```ts
        interface A {
            readonly a: number;
            b: string;
        }
        ```

        Значение этоих полей указывается во время инициализации объекта.
        Присвоить новое значение таким полям нельзя - можно только полностью заменить весь объект.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Readonly

        ```ts
        interface A {
            readonly a: number;
            b: string;
        }

        let a: A;
        a = { a: 10, b: "lalaka" }

        a.b = "malaka";
        a.a = 15 //Error: Cannot assign to 'a' because it is a read-only property.

        a = {a: 15, b: "palaka"}
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Optional

        ```ts
        interface A {
            a?: number;
            b: string;
        }

        const a1: A = { b: "lalaka" };
        const a2: A = { a: 10, b: "malaka"}
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Индексаторы

        ```ts
        interface A {
            [index: number]: boolean;
        }

        const a: A = {
            [1]: true,
            [-1]: false
        }
        ```

        У интерфейса A нет конкретных названий полей, известно только, что они числа.

        Индексаторы могут быть только типа `string` или `number`.
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        это валидный код?
        ```ts
        interface A {
            [index: number]: boolean;
        }

        const a: A = { "32": true };// ?
        const b: A = { .1: true };  // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        это валидный код?
        ```ts
        interface A {
            [index: number]: boolean;
        }

        const a: A = { "32": true };// Все ок
        const b: A = { .1: true };  // Все ок
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        а это валидный код?
        ```ts
        interface A {
            [index: string]: boolean;
        }

        const a: A = { 32: true };  // ?
        const b: A = { true: true };// ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        а это валидный код?
        ```ts
        interface A {
            [index: string]: boolean;
        }

        const a: A = { 32: true };  // Все ок
        const b: A = { true: true };// все ок
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Оба типа индексатора в одном объекте

        ```ts
        interface A {
            [index: string]: number | string;
            [index: number]: string;
        }

        const a: A = {
            "lalaka": "malaka",
            "str": 42,
            "42": "str",
            35: "malaka",
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Оба типа индексатора в одном объекте

        Значения у индексатора типа `number` должны быть совместимы со значениями индексатора `string`
        ```ts
        interface A {
            [index: string]: boolean;
            [index: number]: boolean;
        }

        interface B {
            [index: string]: string;
            [index: number]: boolean; //Error: Numeric index type 'boolean' is not assignable to string index type 'string'.
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ## Пересечение объектов
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пересечение объектов

        ```ts
        interface A { a: number; }

        interface B { b: string; }

        const q = {a: 10, b: "lalaka"};
        const a: A = q;
        const b: B = q;
        ```
        Объект q принадлежит и множеству A, и множеству B
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пересечение объектов
        ```ts
        interface A { a: number; }

        interface B { b: string; }

        type Q = A & B;
        ```
        <img src="img/A&B.png" alt="A&B">
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пересечение объектов
        ```ts
        interface A { a: number; }

        interface B { b: string; }

        type Q = A & B;
        ```
        В пересечении будут те объекты, которые содержат:
        - поле  `a` типа `number`;
        - поле `b` типа `string`;
        - могут содержать любые другие поля
    </script></section>
    <section data-markdown><script type="text/template">
        ### Тип значения по ключу в объекте

        Можно делать так
        ```ts
        interface A {
            a: number;
            b: string;
            c: boolean;
        }

        type Aa = A["a"] // number
        type Ab = A["b"] // string
        type Ac = A["c"] // boolean
        type Wrong = A["e"] // Error: Property 'e' does not exist on type 'A'.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Тип значения по ключу в объекте

        Можно брать пересечения
        ```ts
        interface A {
            a: number;
            b: string;
            c: boolean;
        }

        type Aab = A["a" | "b"] // number | string
        type Aac = A["a" | "c"] // number | boolean
        type Aabc = A["a" | "b" | "c"] // number | string | boolean
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Где это используется

        ```ts
        const style: HTMLElement["style"] = {...}
        ```

        Типизировали переменную: теперь в нее можно положить только подходящие значения для атрибута `style` в HTML.
    </script></section>
    <section data-markdown><script type="text/template">
        ### keyof

        Можно получить объединение названий ключей:

        ```ts
        interface A {
            a: number;
            b: string;
            c: boolean;
        }

        type Keys = keyof A // "a" | "b" | "c"
        ```

        Ну, почти как `Object.keys(A)` только с типами
    </script></section>
    <section data-markdown><script type="text/template">
        ### keyof

        Можно получить объединение типов значений:

        ```ts
        interface A {
            a: number;
            b: string;
            c: boolean;
        }

        type Q = A[keyof A] // number | string | boolean
        ```

        А это как `Object.values(A)` только с типами
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Тест. Объекты

        [Ссылка на тест](https://docs.google.com/forms/d/e/1FAIpQLSc8imy1IR8rPN5z4pMdmlYNJnKks0NMdNnh3OnjFMqvVkf0Jw/viewform?usp=sf_link)
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Функции
    </script></section>
    <section data-markdown><script type="text/template">
        ### Синтаксис функций

        ```ts
        function foo(a: string, b: string) {

        }
        ```

        В данном примере функция `foo` принимает два аргумента, оба из которых — строки.
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Это валидный код?
        ```ts
        function foo(a: number) {}

        foo()       // ?
        foo(10, 15) // ?
        ```

    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Это валидный код?
        ```ts
        function foo(a: number) {}

        foo()       // Error: Expected 1 arguments, but got 0.
        foo(10, 15) // Error: Expected 1 arguments, but got 2.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Необязательные параметры

        ```ts
        function foo(a: number, b?: number) { // b: number | undefined
        }

        foo(10);
        foo(10, 15);
        ```
        Необязательные параметры должны быть в конце списка параметров.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Дефолтные значения аргументов

        ```ts
        function foo(a: number = 10) {}

        foo(); // a = 10
        foo(100); // a = 100
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Автовывод типа параметров

        ```ts
        function foo(a = 10) {}

        foo(); // a = 10
        foo(100); // a = 100
        foo("lalaka") // Error: Argument of type '"lalaka"' is not assignable to parameter of type 'number'
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### rest-параметры

        ```ts
        function foo(...rest: number[]) {}
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Типизация this

        ```ts
        function sumWith(this: number, b: number) {
            const c: number = this + b;
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Типизация this

        ```ts
        function foo(this: number) {}

        foo.call(10);
        foo.call("lalaka"); //Error: Argument of type '"lalaka"' is not assignable to parameter of type 'number'.

        foo.apply(15);
        foo.apply(true); //Error: Argument of type 'true' is not assignable to parameter
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Типизация возвращаемого значения

        ```ts
        function foo(): number {}

        function bar(): number {
            return "lalaka"; //Error: Type '"lalaka"' is not assignable to type 'number'
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Типизация возвращаемого значения

        ```ts
        function foo(): void {}

        function bar(): void {
            return 10; //Error: Type '10' is not assignable to type 'void'
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Автовывод типа возвращаемого значения

        ```ts
        function foo() {
        } //: void

        function bar() {
            return 10;
        } //: number
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Сохранение типа функции

        ```ts
        type F = (a: string, b?: boolean) => void;
        const f2: F = a => console.log(a);
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### В инициализации можно опускать параметры

        Нормально, если в типе указано больше параметров, чем в инициализации.
        ```ts
        type F = (a: number) => void
        const f: F = () => { };

        f(); //Error: Expected 1 arguments, but got 0.
        f(10);
        ```
        Вызвать все равно надо будет со всеми параметрами из типа.
    </script></section>
    <section data-markdown><script type="text/template">
        ## Перегрузки функций
    </script></section>
    <section data-markdown><script type="text/template">
        ### Разное поведение для разных типов

        Если нам нужно, чтобы для разных типов входных значений был разный результат. Можно было бы попробовать так:
        ```ts
function lalaka(a: "string" | "number", b: string | number): any {
    if (a === "string") {
             return { a: b }
    } else {
             return b + 15; //Error: Operator '+' cannot be applied to types 'string | number' and 'number'.
    }
}
        ```

        TS не может гарантировать, что при первом аргументе `"number"`, второй будет числом.
        Эти два аргумента независимы.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Перегрузки функций

        ```ts
        function foo(a: number): number;
        function foo(a: string): string;
        function foo(a: number | string) {
            return a;
        }
        ```
        Сначала описываем типы, потом реализацию функции.

        ```ts
        const a: number = foo(10) + 15;
        const b: string = foo(10); // Error: Type 'number' is not assignable to type 'string'.
        const c: string = foo("lalaka");
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Перегрузки функций

        Реализация функции должна реализовывать все перегрузки
        ```ts
        function foo(a: number): boolean; //Error: This overload signature is not compatible with its implementation signature.
        function foo(a: string): boolean {
            return true;
        }

        function bar(a: number): boolean; //Error: This overload signature is not compatible with its implementation signature.
        function bar(a: number): string {
            return "lalaka";
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Перегрузки функций

        Та функция, с которой начали обсуждать перегрузки выглядит так:
        ```ts
        function lalaka(a: "number", b: number): number
        function lalaka(a: "string", b: string): {b: string};
        function lalaka(a: "string" | "number", b: any) {
            if (a === "string") {
                return { a: b }
            } else {
                return b + 15;
            }
        }

        lalaka("number", "lalaka") //Error: No overload matches this call.
        lalaka("string", 150).c === "lalaka" //Error: No overload matches this call.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Функция как объект

        Функции в JS — это объекты, поэтому в TS их можно описать интерфейсами, как и объекты:
        ```ts
        interface B {
            (a: number, b: string): boolean // callable интерфейс
        }

        const b: B = (a, b) => a.toString() === b;
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Тест. Функции

        [Ссылка на тест](https://docs.google.com/forms/d/e/1FAIpQLScVFtG0snYPZ60B9nP5AEKOjSo4n_dKAOsmVCeU1q0k4WmTZA/viewform?usp=sf_link)
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Практика
    </script></section>
    <section data-markdown><script type="text/template">
        ### Практика

        - [Задание #1](https://www.typescriptlang.org/play/index.html#code/PQKgsAUABDWLgghhEEGwgheEEHwgVBCIIDhBD8INwdhBtABEDUCYQQBhBNAZECmxU0FYQYwERBHBOEEEEQKAYQEMANgGMArgL4AXAPYAnADRYKgLhAFgcRBMaQIwggaRAoZbQXK6ABkMGjx0mcag7A3CDYokWFG5pAEiDZNSioB4QR0povvh2gPIggGIg2I7YDraMBFAo2ICiIHpQBBRk2JzYvmicOFBomFC4zIyALCAUKCjaqbgUxH6MmKRkAHTOsIBEIHi6AMoiALYAgkISAJZSAHYKADIAptMA5hIAFmOTMwoAWgsyUptT04pKSIxQeagYvowooTSdECDAkJASAJ4ADgtQg6PjY5QAC8UAAFO1IV8+DI+EMAM4ALigfGmHwAlCCAHwotEAbne31+ixW6yOMxB4Mh7WhsIRyNRGOxuI+BIgnx+UD2B3JJ1BEKhMLhSJZmOBOMZbI5xKky15lIFNKF9NFzMVtOFDLRYol+LeEAm0wk+wAZnwhL9+MIxJJZFAAN5dGBgoRSIZDVEAE2R8IkMkNy3RyP+vLZLhdbo9029UF9-pWQagJNWG0BMzDsAj7q9Pr9AcT3MOaemGedruz0dz8cDyLmstDkAAvvrQFBALQgGhKgQqWFIgGYQKi0FAXFDIdBQF6QV3TX1QMzWyyyZFWiy2mQK8tRmNx-Naj7Mx3QWDwgDuEwkQjW4M3Xsxh5cLjM8N+ACJ4cMX4inQ+XDIFhIRBkE4wT4PcFAAIz3HUUSgABqKBwNLB8n1fAQlhTT9vx-GA-wAoDwVA1VxRRdo0NJNYkMfPhnygF8AC99ikTCj2w2BcMA4DCMZaDpSkE0YOBQTaJ3FYXygAB+EiyJTKAAEIhIABigBk5MUyjYBQ2iBFlZjWN-f8OPBSCiJxECoOZABZSQ1lI2UQMxYAoCs9ZbOWMFwPRb9mwgbzWwAWgCidXggSBW0ARBB4iKTxNDQJQgqncwbSsME3w-dEwQARgUhQMoAVk8iB51XZKX2k9YX3Sl8AEcTwWGq6oqhKFzXFKGIOCrMoUgqiqS2RWsYjrqtq+rGsKmZZwEPk50SxcZBS7Tlg65ybIAUQKybMvyprir60qdPSgAmQ7coANgK8LIo8LxYvikKIFbQBCECirwfH8W6etm+bBD4ABrPhBo9cQ-tG7berm1Khg6v0RAWbqZpaiGOqyuHmpK99IcqjKQcK+GSrKtYka60HPtK9DyvS6HYeJhH8cG-6FBfcDsY+hG2qY9KspyomcdR3a2cJhmstGlmSv5zGFJfLmUZ28GxbBSnpbB-r2vS+1G0Vkm5YAbQAXQK6m8f2lKFmF3HdoWwahY1mmjYVg3zaN5GUqyiXrcNxaOa6+WZBht2HY9sEDq5g6ABZzpAKAAr8oKgA)
        - [Задание #2](https://www.typescriptlang.org/play/#code/PQKgsAUABDWCgggGEELwghpECkwrCCEEQQXCCD4QQbhBAZEHykHYQBQZhA9AhED0CYQAjJVQURAoAXATwAcBTKAEMANgEtBAZwB0UQPgggARBAHCBRA-CB5APCB5AkiDKki9gCIseQIwg85Aag1FKqAGUOAVwAmfAHYcpkWFECEIKYwlGgwrGzQAFT5BAGMACz4AJyhlABFRBL5ojgB7JMUyZPUMQDkQHVYsQHkQULV6GTgCKpV5BkCcZUUsNWIyQGEQQE4QYO9YFUCMIpYUEPooLARNdXR8nplAHBA8QDYQJDwoPCaMQBYQDAaaInQGSeqUL2hYIZhImPi8oowaZMOka0AREEUcBDp5AAaQoVYE9Zr0ZinXCKAgIZIzAgMBDyU75KAYahQHDg4y1O5QQBIIIjkfIQjj5HioA84okALTwtTYgjFQDiID0oKJnNjcfCmOtFG9TIApEAwODeWHezG+v3+eGaCwps0BBKQCDI9GQijGCOaxGKUB6rMFRwq1wJaQyWVyhQwryln0UPz+AOBinUoJJmtRMxoPQ+dGmyiwSO9pyNJqYfRkvlDKKIBKwfoDDFU2y5vv90vhxkO8gFQpMovFMwdMpd8o0CPdzB1SaznwQ1x8sdJ4eNwSjac53IjnaqucCBZ2RbFErLTtlAI0bvGYzBEMw6gJyjwgDEQZj4PqGjumyAgYCQbj8KAAVQkiSgAF4oABvAlcgBcUAkHASojcAHMANwEtyCABbPhn1fd8v1-CAAF9ICPXgBAAYWyRwEgva87wfZxnzcRwAIAI0SCCfA4UQOGEYCXzfD8f0gaCIFgk8AHUSNiAAlQQOAEG97xuGAEnY8iAEYoAAHygAAmESoAAZkkgAWSSAFYINo+iBCYjhYgcFx3A4FjsjItDuJ8BJ9PIgxX20jwDBomCIGPNTmJpJ49IMriCRMsjnwMDjHkSayoNs+yoHU2IABk+AANz4YRDIJMiouELyACtHDcURcksUSDAArlnDIzKoHM9x0oSfzaNAKA6SqqAD0CuD7CcVwPEQ5DUJvFqUIEAAyYLmK0prdNMqAepCtiOOG3qNPChLVIayyODQ89Lx628oGiJDOokZ9VoAbSfKBsLwxIAF1n36nSOtQyCoBUuz6qcy8byWhI6pPS1MhyJInovBIIMgUBqrkCFWnhSq6VqiB1rcV8XwEs7Gp02KeJ7LyJAEgwVWR-8gNR9HMZ8dbWr4Lb0ORnwdoE07SZ8GnYH2gT8dpmniNIsyADF0lfDGCSZqA+I458FMZ3neNM1GEas4WRfi6KvJy5w8r4fzedonxIMx26oZhjg4epKJaS+6m6cwwqde5rHALMs2pZlxLCpStKMqlwnNu2nnYB2hSqaMkWYH2oX3dplnPMKjmADMNPN33RZD7z9aeZWmfVwOoAp72U58KQs7RqQXYvCQ06l3mPKt+O-JT1XYFozXsmhhbnF197rUNn2-ZNgwG6j2BsbMzupYsgaSdbmmdvM9GqbRouPfMsSDHTsmmf2meu99nvUdniuCWT5GfINoeU9Hs35+jqAs6kHWp9p-nyKky+brvw-Z+P6Ol44We758NfTffjPYFt1HipO1-rxfigtN7I2rrZCqVU6Q1WAEAA)
        - [Задание #3](https://www.typescriptlang.org/play/index.html#code/PQKgsAUABFgEIIrCCAYQQ3CCA4QQ7CCGEQQnCCCEQeUgIiCaC8IIFwggYiCqByIFALYCGA1gKYDKALiwA4A0UZQHwguQYAEQRIHkQKIH4QQTNHxALCCBpEEWZAkiDxAPCCYogQRBBekRJI0oqQMwgo5VEBMIIPS3x6xPFyQYe5EszVNBVDQoADsAVwAbcIA6OCQ0LDwCWz0CEnhBQEYQQFEQQUVULWUCRWQpNIJcVGllGMAMEHQM+AtERKgGYIBPKMgPKABxBjp2DgYuAC4emABaegZuKGmtRD09VFtzK0FbZSyoTMApEHgyETWACkBxEBEoQFkQS9xEIQJp00A2EHgASgn5qG5whnaWABOAAUAPYAZy+qEUhz0128WngJDu61EgjIiDsUEWy1WAQ2Wx2+0Ox0+0zBAGMQQCWF98GQNKhsPozm5SVAOKEAcEviRBAjRFA6RpGnIcopEN1oFAavjBEyiUcvjc5EZUej+EIROIpNJRKhTIs3LtFLzzOh9N41H5UDt0CRECzTNhRjA2QAiIFuyEbMjugCiXumTkQFndABlA-o0ajbKhNO6APqRvT2DK5e1SMjeXDoyUwQBYIIhniomWKUWioCcPW63jJlHc3HodfAFAijKhcIAZECbdl1iHsMUASCBQdD91ArLSGCq7XCCwQWQQa+5ynqWGNy3YZA6K+1ijs9vR92wY4Tl9XyQTjsUSWdeHzWgi69IZcToTaIUwScZSqZQQCoIF4qD6EeGIppk6aSAI2bopWbpJrW0xrhW0gtto8AuI2pSgam6a+FBbj0t+MDEVAADa1b8HBboALrzAAfGRVGUZ61EANykgBQSHuIx5RmQMZxgQVYRghZ5QA0Ci3tGmyCfwU6uLgB44SakFZgRiBESRjGepREa0ZMDHkTpUBUbRABkUAUlSNIALyWZS1JQAA1FAACM7E-vMnFAdx-YYsGFiwQGolIWQUCYBkqwKXY4gLnJRgKQe0mxpomkkUZbqUQG+mGRRJl6R5PQyuII73B+ZxRZhGrzuK3y-P8wLglANktTM3BROELDBAA5hwAAW8yuTEgAoICU1wiAuMysJwPBQIogjIM89o9LYLYkJgXYhBE0RFVYuiTktcijtImDtptZC8tIQhMgASqEwS1LKBAGEYggmKgBB6nomCYZiQgkAYaAxN5PSyLs-1nB+ZhrjYaz-YDQFpLOgiABIgqBpmF0x2g6HYohiCgoBg772nYa2CD0JyBEBwirbOsjzRY9poG8MSAGgg8DIIg+DIJ2vL8BcmSwwIRbzVoUC8vYYv9IMnAjCwkwEBkyjIOLmzKEyVxkOg2jSCUArYisx6rrKTLoqIuDVJAIDAJKHDtNwNLS0McvNa0HSSgAZvd5IcAAliC3KMNNXDcCcADedV-ICoJgvwjB8PZ1n8ByXJQAAvi6Tuy1wbyZwMztcFAAA+W2RFAYeQGnkqQKAkzTPmuSlSdegwTD8yTNbkCUsEYIcJZwwAhwACysyuxllFJhPmUmZPJkBlPWXT2688z0vEYL6vi8b26BVdwHvf9wwg-Zywecy8Mhd2RHVnUi6AAMcezC6vdH8Psz8D8UeNWC9-J5ywT33Th5TqfcX6X0PsfC+LAPLdwPiwAAHg7H2LAAAmAAVf+EI7IACYAAsMD959wQUgrgKC2AOVslAAAbIVCAJwvbBB9v7bk4QQQglDrWCunlYF92CAgjgJ9XZByGDwE4YCWBvA8iRX2HtKx8PgQIqBzVWphEiJwz4JFYEgk6h1EE3UTgAAMMGp0pPdDgLoAAkYdxFRBTsENOBiPieU0fvbRLBdH6IMeQ6yljrFQKiDfFgDjJEaOIjIysNi7FQAAIStWISwZB6DMHFxLjYwJMS4mIISaQ7xjki6pP8fHUiNj44dS6r1AakxXK0ViXZas6jnFaRgP1AEIIADuIQWAdL9ACVpAIqxsBBIMfqvtuRtNaT1GsUimnp1CTAakdjpkwCrtw1xOjySdSPicEJqye5uI8SceRii5ZRFKQAKxBKMqsNYnEkXEa7I5J8lmWRYBwNBvtBgglCBwE4rD2H8FcnfIFTi05vG2R5Wu0x27WyAA)
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Generics
    </script></section>
    <section data-markdown><script type="text/template">
        ### Generics

        **Generic тип** — тип, параметризированный другим типом.

        Это возможность описывать типы, которые будут известны позже.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример

        Например, мы хотим типизировать вот такую функцию:
        ```js
        function createArray(...args) {
            return args;
        }

        const first = createArray(1, 2, 3);
        const second = createArray(1, "lalaka", true)
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример

        Можем попробовать any:
        ```ts
        function createArray(...args: any[]): any[] {
            return args;
        }

        const arr = createArray(1, 2, 3);
        const str: string = arr[2]; // так можно, потому что тип элементов массива any
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример

        Можем явно указывать тип:
        ```ts
        function createArray(...args: number[]): number[] {
            return args;
        }

        const first = createArray(1, 2, 3);
        const second = createArray(1, "lalaka", true); //Error: Argument of type '"lalaka"' is not assignable to parameter of type 'number'.
        const a: number = first[0];
        const b: string = first[1]; //Error: Type 'number' is not assignable to type 'string'.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример

        Если будем указывать явно, то придется описать все возможные перегрузки:
        ```ts
        function createArray(...args: number[]): number[]
        function createArray(...args: string[]): string[]
        function createArray(...args: any[]): any[] {
            return args;
        }

        const numArr = createArray(1, 2, 3);
        const strArr = createArray('1');
        const boolArr = createArray(false, true); // Error: No overload matches this call.
        ```
        И все равно все описать мы не сможем. Придется дописывать перегрузку для каждого использования.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Пример

        Для таких сценариев существуют generic-типы
        ```ts
        function createArray<T>(...args: T[]): T[] {
            return args;
        }

        const first = createArray<number>(1, 2, 3); // first: number[]
        const second = createArray<string>("1", "2", "3"); // second: string[]
        const third = createArray<number | string>(10, "100", 50);
        // third: (number | string)[]

        const a: number = first[0];
        const b: string = second[0];
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Еще пример

        Встроенный интерфейс `Array<T>`:
        - работа с массивом не зависит от типа его элементов
        - необходимо не потерять тип элементов при обращении по индексу

    </script></section>
    <section data-markdown><script type="text/template">
        ### Синтаксис

        ```ts
        function funcWithGeneric<T>(): void {
            const a: T = ...
        }
        ```

        В `<>` после названия функции и перед `()` указываются названия для generic

        ```ts
        const funcWithGeneric = <T>(): void => {
            const a: T = ...
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Синтаксис

        У одной функции может быть несколько generic-параметров
        ```ts
        function funcWithGeneric<T, S>(a: T, b: S): { value: S } {
            return { value: b };
        }

        const result = funcWithGeneric<number, string>(256, "512");
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Generic в интерфейсах


        ```ts
        interface User<T> {
            name: string;
            id: T;
        }

        const newUser: User<number> = {
            name: "John",
            id: 223,
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Generic в type alias

        ```ts
        type UselessUnion<T, S> = T | S | boolean;

        let strangeThing: UselessUnion<number, { name: string }>;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Автовывод generic-типов

        Можно не описывать тип явно:
        ```ts
        function createTuple<T>(value: T): [T] {
            return [value];
        }

        const strInArr = createTuple("str"); // strInArr: [string]
        const fiveInArr = createTuple(5);   // fiveInArr: [number]
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Валидные ли это конструкции?
        ```ts
        function createTuple<T>(value: T, secondValue: T): [T, T] {
            return [value, secondValue];
        }

        const strAndNumInArr = createTuple("str", 25); // ?
        const numbersInArr = createTuple(5, 25);       // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Валидные ли это конструкции?
        ```ts
        function createTuple<T>(value: T, secondValue: T): [T, T] {
            return [value, secondValue];
        }

        const strAndNumInArr = createTuple("str", 25); // Error: Argument of type '25' is not assignable to parameter of type 'string'
        const numbersInArr = createTuple(5, 25);       // Все ок
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какого типа переменные?
        ```ts
        function doNothing<T>(value: T): T {
            return value;
        }

        const str = doNothing("42");  // ?
        let anotherStr = doNothing("422");  // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какого типа переменные?
        ```ts
        function doNothing<T>(value: T): T {
            return value;
        }

        const str = doNothing("42");  // "42"
        let anotherStr = doNothing("422");  // string
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какого типа переменные?
        ```ts
        function doNothing<T>(value: T): T {
            return value;
        }

        const num = doNothing<number>(834);  // ?
        const anotherNum: 25 = doNothing<number>(25); // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Какого типа переменные?
        ```ts
        function doNothing<T>(value: T): T {
            return value;
        }

        const num = doNothing<number>(834);  // number
        const anotherNum: 25 = doNothing<number>(25); // Error: Type 'number' is not assignable to type '25'.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Синтаксис

        Если generic-параметров несколько, то их все надо либо явно задавать, либо не задавать ни один.
        ```ts
        function createTriplet<T1, T2, T3>(a: T1, b: T2, c: T3): [T1, T2, T3] {
            return [a, b, c];
        }

        const q1 = createTriplet(1, 2, 3);
        const q2 = createTriplet<number, number, number>(1, 2, 3);
        const q3 = createTriplet<string>("qweq", true, false); // Error: Expected 3 type arguments, but got 1.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Значения по умолчанию


        ```ts
        function createPair<T1, T2 = T1>(a: T1, b: T2): [T1, T2] {
            return [a, b];
        }

        const q1: number = createPair(1, 2)[1];
        const q2: string = createPair(1, "lalaka")[1];

        /* T1 = string, тогда T2 = T1 = string. */
        const q3: boolean = createPair<string>("lalaka", true)[1]; // Error: Argument of type 'true' is not assignable to parameter of type 'string'.
        const q4: boolean = createPair<string, boolean>("lalaka", true)[1];
        ```
        Если ни один generic тип не задан явно, то используется автовывод типов и тип по умолчанию не применяется. `[q1, q2]`

        Если заданы явно все типы, то используются явно заданные значения. `[q4]`

        Значения по умолчанию используются только, когда явно задана неумолчательная часть типов. `[q3]`
    </script></section>
    <section data-markdown><script type="text/template">
        ### Попробуем типизировать reduce


        ```js
        const array = [1, 2, 3];

        const q1 = array.reduce((acc, cur) => acc + cur); // result: 6

        const q2 = array.reduce((acc, cur, index) =>
            index % 2 === 0 ? acc + 1 : acc, 0); // result: 2

        const q3 = array.reduce((acc, cur, index, array) =>
            index > 0 ? acc + array[index - 1] : acc, ""); // result: "12"
        ```

        Как бы вы типизировали эти случаи?
    </script></section>
    <section data-markdown><script type="text/template">
        ### Попробуем типизировать reduce

        Первый случай:
        ```js
        const array = [1, 2, 3];
        const q1 = array.reduce((acc, cur) => acc + cur); // result: 6
        ```

        ```ts
        interface Reduce<T> {
            (callback: (
              previousValue: T,
              currentValue: T,
              currentIndex: number,
              array: T[]
            ) => T): T;
        }
        ```
        - нет начального значения
        - тип возвращаемого значения совпадает с типом значений элементов массива
    </script></section>
    <section data-markdown><script type="text/template">
        ### Попробуем типизировать reduce

        Второй случай:
        ```js
        const array = [1, 2, 3];
        const q2 = array.reduce((acc, cur, index) =>
            index % 2 === 0 ? acc + 1 : acc, 0); // result: 2
        ```

        ```ts
        interface Reduce<T> {
            (callback: (
              previousValue: T,
              currentValue: T,
              currentIndex: number,
              array: T[]
            ) => T,
            initialValue: T): T;
        }
        ```
        - начальное значение того же типа, что и элемент массива
        - тип возвращаемого значения совпадает с типом значений элементов массива
    </script></section>
    <section data-markdown><script type="text/template">
        ### Попробуем типизировать reduce

        Третий случай:
        ```js
        const array = [1, 2, 3];
        const q3 = array.reduce((acc, cur, index, array) =>
            index > 0 ? acc + array[index - 1] : acc, ""); // result: "12"
        ```

        ```ts
        interface Reduce<T> {
            <R>(
            callback: (
              previousValue: R,
              currentValue: T,
              currentIndex: number,
              array: T[]) => R,
            initialValue: R): R;
        }
        ```
        - Начальное и возвращаемое значения не совпадает с типом элементов массива
        - Приходится вводить отдельный generic тип `R`
    </script></section>
    <section data-markdown><script type="text/template">
        ### Попробуем типизировать reduce

        Все перегрузки вместе:
        ```ts
        interface Reduce<T> {
            // 1
            (callback: (
              previousValue: T, currentValue: T,
              currentIndex: number, array: T[]) => T): T;
            // 2
            (callback: (
              previousValue: T, currentValue: T,
              currentIndex: number, array: T[]) => T,
            initialValue: T): T;
            // 3
            <R>(
            callback: (
              previousValue: R, currentValue: T,
              currentIndex: number, array: T[]) => R,
            initialValue: R): R;
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Попробуем типизировать reduce

        Как этим пользоваться:
        ```ts
        interface Reduce<T> {
            (callback: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
            (callback: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
            <R>(callback: (previousValue: R, currentValue: T, currentIndex: number, array: T[]) => R, initialValue: R): R;
        }

        const reduce: Reduce<number> = [1, 2, 3].reduce;
        const q1: number = reduce((acc, cur) => acc + cur); // result: 6
        const q2: number = reduce((acc, cur, index) => index%2 === 0 ? acc + 1 : acc, 0); // result: 2
        const q3: string = reduce((acc, cur, index, array) => index > 0 ? acc + array[index - 1] : acc, ""); // result: "12"
        ```
        В ядре TS функция reduce уже описана. Чтобы ей пользоваться дополнительно ничего не нужно описывать.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Ограничиваем generic-параметры

        ```ts
        function foo<T extends string | number>(a: T) {
            // ...
        }

        foo("qweqw");
        foo(true); // Error: Argument of type 'true' is not assignable to parameter of type 'string | number'.
        ```

        `T extends string | number` означает, что тип в функцию может быть передан любой,
        который совместим с типом `string | number`.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Ограничиваем generic-параметры

        ```ts
        function bar<T, R extends keyof T>(obj: T, keys: R[]) {
            // ...
        }

        bar({a: 10, b: 15}, ["a", "b"])
        bar({a: 10}, ["lalaka"]) // Error: Type 'string' is not assignable to type '"a"'.
        ```

        Можно тип одного аргумента ограничить при помощи типа другого аргумента
    </script></section>
    <section data-markdown><script type="text/template">
        ### Ограничиваем generic-параметры

        ```ts
        function foo<T, R>(a: T, b: R): [T, R] {
            return [a, b];
        }

        const q1: "lalaka" = foo("lalaka", 10)[0]; //Error: Type 'string' is not assignable to type '"lalaka"'.
        const q2: 10 = foo("lalaka", 10)[1]; //Error: Type 'number' is not assignable to type '10'.

        function bar<T extends string, R extends number>(a: T, b: R): [T, R] {
            return [a, b];
        }

        const q3: "lalaka" = bar("lalaka", 10)[0]
        const q4: 10 = bar("lalaka", 10)[1]
        ```

        Если тип ограничен примитивом, то компилятор будет выводить литеральные типы.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Тест. Generics

        [Ссылка на тест](https://docs.google.com/forms/d/e/1FAIpQLSdlTz1EhwzoH7CLF9Wo-Jwy2v1qlErMTlnrCbllYwf0yXJlVQ/viewform?usp=sf_link)
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Задачки. Generics

        Допиши типы коду на JS, чтобы он стал валидным и разумным кодом на TS:
        - [Задача №1](https://www.typescriptlang.org/play?strictNullChecks=false#code/PQKgUABFGFggh8IIHhAGFYQQvCCCEQQDCCAEQQHCCHkQBXCAAQBcBnAWgFMAPABxoGMzaAndge3YkH4QRMkDiIGkDSIBECCIOmxwhgLhBcAGgiAmEAhy46ONlGBREAiAWEDiBuEEBsIKnGBGEFHpAMiAQ4gCRBclhaoiAREFypMx26kQIbGRHNFxcADpIaEBUEAljYjVAWRB0XH0pGXlMfScXODkIVGQIS0BhEANkdGUNBD5cY3wtbAgAFQBlVVEDTCkHZ1dS9UQ6hsAxEHDlAQMZSyLihDhzOH5M3Cw7CEB2EAqJWwAuaKgACzIyBgo94GAAd1uIsgBPJgpmdgBLBjIAGwBDADsAOYRHgA4AAEy4zAowCO-zBACMuFwANbAdg0L40H4UGhUP5cMg0aGPZ6vD5sADMVAAnBETgBbL4AYiolFojBYbBonB4VGYXHp9Jof0oYBAwDAYFAhwggAwQCQCPybUr4CAA4Xct7MKh8HCYFDSUTKOB1ZzoYoSXCAZhAfOhSjpPKVUHJxoBOEAgPwAjFQfgAWRQyoRaayFYrWYzLXKWfJDWr1fDjXBiiUAMwArn9WG8uH8PZ6ABQASggAG8IABfMDpzNkbO5n4AJiLpYrVYzWZzHopRbL6LIafYub+aa+XwA3K3qx3676exA+wOhyPx62wF7856AAyFifrgBEv1+yJ+e53efzZHYaZoZ-XZYA2gefkeTxAANQQPf058-Y97gC6ewQFuFa3gW95bv+YH5o+h6-ieUG7uBl7XohkqNhum7KFut5Nk+L57th267k2KE0Mo+HwaeJH5g+lF-u+n7fgRgHAZuFbKCmz44jua5NhBm7-sodFwQxH5fj+f6sSB5a4TB9EIco95kYhHr8SpSkKQBvFgJiZBdgA+p6QHDvS8LchAAC8XaYYWyg-BSBkNkBFCXm8gJWTZWl2YZFJAYiXCYv8nkOfmXFfDx9mOb6JlpmZ3L3v+IXdhBDYUmhuk0PpfpGS5bkedZfq2fZvpOf5SJBbmhWzveACsWFsVBJUGX5LYpp6AD8sXxbw5YhbO4U8ZK0rQHKiq2Mqqrqn8mrarq2D6pUOjGqaazFKkfDiAAQgAglQW0ACLKEGcAhkUJSiBGfR5AUNQjAm4TJmAJI0BAu2eWOz1PK9W1bR9X1MG9ADC-3uYS7BccwP0HaWYCVmA-J-K5EDwsZb07QAPKZ5nsAAfJ5W6fYjyPws56MY657yAvj1laUTOYk61u0YwJyiU+5AL-jTECs0xkkIZ9CMM-p8IxW9W0YwAbJum7c2W7VAdL7HlvTSMi7VQG-VjcU43LEAKxASuMfVyuqyTkuaxLAWVYlesG4lFaC8TIsAOya0DGO1RRKZvAAbjQe7c3V3t+wH-5myLAAc7vaz1FFgm8AJvGQgeefeLvx4nycARHKPUjH2MJUJPPs4CbP5ZzQe856XvAbVxewfzhF8yx4eSs7KNbprB2xzjyiF3jnllj8QFbso8Kj6bQtq53aOHRTFf9zr3J6yPn5bs3E9sY708k56ZPz6XAKJUpnqehAAA+wENhRZ97pf68Ns3R+JVzQ8ekBjcsePn9n7fT+aWYlRf8SUVbDXAKNeU41Jpqg1O8OaeoDTLUMMgDwJh0AWGKJsHwIhUAEAgMQOAVoFp4Nwfg6as0dSIKWnAFQAZRomlwGaC01pbT2nEB4J0LpcDumYD8PkYJjrBnEOdcMkZ+gxjuvGRMT0py1k7Hw5sZZKxyLrBAZg8IlHziyouCAw5RwThUe2eRuZmDMC0QuQcejlyGLbDWNRzAwRaPhh3Zg59rKKLHhABstVeKuIbJ5TxDU9w+OorvfSzAKSBJ+AvKmAJcb5j3BvCioS-HC3Ub6aJsSOZLx6gkpJm5m4+N4lcUgbJ6BMFYBwbg7BwnqNqlko++TkneN8U7dJzBJaBM0d5T6pTyDUAqZyapPA6nMBdt02yudmDR3XoUyZBSwmuPzhAI+CyXaFJ0q4kCHjzF7hPGkmebi0b7PvrsxJBzpn7yAnueEZz1F7LuSU4AZTBkciqdyGpYzPRRPOXuAkRwLJHzCd8zJHiwQY2HnlOJHFPwngSVC9etV77lgopc75DTwWQv1mjAesK9ztUDrRHFo8Gmos-ISw5yM3FdPBcStepyf6GxlsoZgv8Go11ARRZgSyOmegmXSxFjKUaKxZeo9l2F674vRf08p7yuQ8lqdsyOgSIWIrWeS05CKP6flEq+TV-wHhhNlW8ypCqvnbOpKq7Fa8NVor+Ea7VDK9UovtUa55rz2RmpGUqjpDZ2KCv1mTX0ZLvaemokAA)
        - [Задача №2](https://www.typescriptlang.org/play?#code/PQKgsAUABDWBgghBEEPwgg+EENwggZEEOwgh5ECgcwFMA7QgJwEsBjAWiUAYQQARB7AeEEFYQQIRBHBpEABooOgDhAkgrIMaBhEECcIBzZRAIiATAvCCAuEEBiIIMByIFABeFAA69IsKIHEQDikCMINyhK51tCigpAEiCDLKFVBUoWItDgaggB0UIBIIChYLCiAbCBKKPyoXGyWEpwIOMawgCwgKCII9BwYAsI2gEwgAmxocoqqQZAgwJAAZgCuxFQALhQA9sS6BgAUzRRkAM6d-GOEVH0AJgCUUADeWbPEE1AAthTEADIk+J0AFlAAvFAAsgCGJ8E7xMOjE8EANocnUzPzbx-HCwBuNZ9TZkQhjVqvTrnKAAbQAukDoFBmj0yFBBu9oRQYQAGAFQHEAHm2uwOxCOxwJFAA1DSlqtkTAwRCocF9K0xsdBrCRuNOrCKPCvus5oL4fCFlkAL5ZMGdVpkfosyGdSCyiCQdabACOAEYAFxQACCZDI1wAnkTYcRWlsAEbkKadSgU+EAPhhen0PL1-AATPwAMz8AAs-AArPwAGzCuEAIj18f48f9yag8aD8clSO10J1-qNpvNVth9p6PXe12I-HLlcI1Y9XqGsJdrUIcd511e034zW70xzWpB9bePXwg31-ALgKAA)
        - [Задача №3](https://www.typescriptlang.org/play?#code/PQKgsAUABDWBgghBEEPwgg+EENwggZEEOwgh5ECgcwFMA7QgJwEsBjAWiUAYQQARB7AeEEFYQQIRBHBpEABooOgDhAkgrIMaBhEECcIBzZRAIiATAvCCAuEEBiIIMByIATIB7AK4AHAEIBPXpFhRA4iAcUgRhBuUJXMdoUUFIAkQQfZQqoFRQWETQcDUEAOihAJBAULBYUQDYQJRR+VC42ewlOBBxLWEAWEBQRBHoODAFhJ0AmEAE2NDlFVQjIEGBIADN9YioAFwpdYh0DE1MACgBnAzIqQn4Aa0JTAGVCABtCft0yfgA3AEN1-UI1ze2yAEooAG8CqiHJvqgyQkn9deeAXihSAHcoABZA6GcaXADcBU6Oyg402zwoUB+AAZwVBEQAeKDTfSzQiRTbEfB9AAWaIoAGoKdc7tBYA9iE90X1CABbJHYmZzADaFAAupC6TAGUylqYOWKzls+jtxhQWaz+BQIQVhY9nodjoQOZqTlKLnKFUqVUL0Z1YQBCV7vT6REkHSbjMWXGmq2DWj59SKTQh9J3LfjcvkmqwAXzdHttRD9zsihn0kxJ411hBDUHDEAKrz6uOGkb6gozkBFzwAjgBGABcQJBGOI+lZACNyPx603yEGAHwc-B6Ixmcbc8v8ABM-AAzPwACx8-gADyR3YXAFIoGOoAuvkuoBSoOWTSWoKWR9XgYYMY3dLpNgdiPwbnPq09KESldW282yKGuzAfr3RgO3IAEQHKBQH8EBjZQeBUBAVQVAwUBpaIesRwHAsBxAbOsIAPrGou6LLiOSJfCi-DjHO+FbrCNwUPOoYusWjzXvi6y6Pg4wVvwx4QkAA)
    </script></section>
</section>
<section>
    <section data-markdown><script type="text/template">
        ## Классы
    </script></section>
    <section data-markdown><script type="text/template">
        ### Классы

        ```ts
        class User {
            name: string;
            age: number;

            constructor(name: string, age: number) {
              this.name = name;
              this.age = age;
            }
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Модификаторы доступа

        ```ts
        class City {
            public population: number;
            private name: string;
            protected square: number;

            constructor(name: string, population: number, square: number) {
              this.population = population;
              this.name = name;
              this.square = square;
            }
        }

        const tokyo = new City("Tokyo", 9_273_000, 2_188);

        tokyo.population = 10_000_000;
        tokyo.name = "Moscow"; // Error: Property 'name' is private and only accessible within class 'City'.
        tokyo.square = 10_000; // Error: Property 'square' is protected and only accessible within class 'City' and its subclasses.

        const q1 = tokyo.population;
        const q2 = tokyo.name; //Error: Property 'name' is private and only accessible within class 'City'.
        const q3 = tokyo.square; //Error: Property 'square' is protected and only accessible within class 'City' and its subclasses.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Модификаторы доступа

        - `public` — поле является публичным. Читать и изменять значение этого поля можно в любом месте
        - `private` — поле является приватным. Читать и изменять значение этого поля можно только из методов самого класса
        - `protected` — поле является защищенным. Чистать и изменять значение этого поля можно из методов самого класса и его наследников

        По умолчанию у всех полей `public`
    </script></section>
    <section data-markdown><script type="text/template">
        ### Модификаторы доступа readonly

        ```ts
        class Pie {
            public readonly filling: string;

            constructor(filling: string) {
              this.filling = filling;
            }
        }

        const applePie = new Pie("apple");

        const fruit = applePie.filling;
        applePie.filling = filling; // Error: Cannot assign to 'filling' because it is a read-only property.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Модификаторы доступа static

        ```ts
        class Pie {
            public static doughType: string = "yeast";
        }

        console.log(Pie.doughType);
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Необязательные поля

        ```ts
        class Pie {
            public filling?: string;
        }

        const applePie = new Pie();
        applePie.filling = "apple"
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Инициализация полей

        ```ts
        class Pie {
            public doughType: "yeast" | "pastry" = "yeast";
            public filling: string;

            constructor(filling: string) {
              this.filling = filling;
            }
        }
        ```

        Инициализировать поля можно при их объявлении и в конструкторе.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Инициализация полей

        ```ts
        class Pie {
            public doughType: "yeast" | "pastry" = "yeast";

            constructor(public filling: string) {}
        }

        const applePie = new Pie("apple");
        console.log(applePie.filling);
        ```

        В конструкторе можно указать модификаторы доступа к аргументам функции-конструктора,
        тогда в классе создадутся одноименные поля.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Методы

        ```ts
        class A {
            private q: number = 2;

            multiply(a: number): number {
              return this.q * a;
            }
        }

        const a = new A();
        const q1 = a.multiply(15); // 30
        const q2 = a.multiply(10); // 20
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Методы. Модификаторы доступа

        Как и у полей, у методов могут быть модификаторы доступа:
        - `public` методы могут быть вызваны как внутри класса, так и снаружи;
        - `private` - только внутри класса;
        - `protected` - внутри класса или внутри класса наследника.

        `readonly` к методам не применим. `static` работает также, как и для полей

    </script></section>
    <section data-markdown><script type="text/template">
        ### Generic-параметры

        ```ts
        class A<T> {
            public readonly a: T
            constructor(a: T) {
              this.a = a;
            }
        }

        const a1 = new A(10);
        const a2 = new A("lalaka");
        const a3 = new A<true>(true);
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Наследование

        ```ts
        class Figure {
            print() {
              console.log("I'm a figure");
            }
        }

        class Circle extends Figure {
            radius: number = 15;
        }

        const q1 = new Circle();
        q1.radius; // 15
        q1.print();
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Абстрактные классы

        Можно наследоваться, нельзя создавать экземпляры класса.
        ```ts
        abstract class Figure {
            print() {
              console.log("I'm a figure");
            }
        }

        class Circle extends Figure {}

        const circle = new Circle();
        const figure = new Figure(); //Error: Cannot create an instance of an abstract class.
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Абстрактные методы в абстрактных классах

        Объявлена сигнатура, нет реализации
        ```ts
        abstract class A {
            abstract show(p: number): string;
        }


        //Error: Non-abstract class 'B1' does not implement inherited abstract member 'show' from class 'A'.
        class B1 extends A {}
        ```

        Как думаете, зачем такое нужно?
    </script></section>
    <section data-markdown><script type="text/template">
        ### Снова утиная типизация

        Так тоже можно:
        ```ts
        class A {
            public x: number = 15;
        }

        const a: A = { x: 40 };
        ```

        Мы воспользовались классом как интерфейсом.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Реализация интерфейса


        ```ts
        interface Figure {
            print: () => void;
        }

        class Circle implements Figure {
            print() {
              console.log("I'm a circle");
            }
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Реализация интерфейса

        Можно реализовывать несколько интерфейсов
        ```ts
        interface A {
            a: number;
        }

        interface B {
            b: string;
        }

        class X {
            public a: number = 300;
        }

        class Y extends X implements A, B {
            constructor(public b: string) {
              super();
            }
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Класс как объект

        Так как класс — это функция, а функция — это объект, классы можно описывать интерфейсами
        ```ts
        interface ClassType {
            new (a: number, b: string): {a: number, b: string, c: boolean}
        }
        class A {
            c: boolean = false;
            constructor(public a: number, public b: string) { }
        }

        const classType: ClassType = A;
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Тест. Классы

        [Ссылка на тест](https://docs.google.com/forms/d/e/1FAIpQLScGHVFdzcK747iP5ZToxucNWiFQSRcSrmwk6MC_nA9fQA7ZQQ/viewform?usp=sf_link)
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Задачки. Классы

        - [Задача №1](https://www.typescriptlang.org/play/#code/PQKgBAsAUGtouCCAYQQ-CCA4QQEiCsEIghWEDAYwBsBDAZ1LACEyBTaOMQDBBBBEGUD4QQbhBAZEEHYQQYRBAnCC4wgRhBOgLhBUYAESAsEDaAWEFE4eYNpjHjpYKXMVhmajeMSAeEFTaFHQPIgYZIAEQNoCYQHPclgsqND0SAxEFSo9HCA+CBszBx4ToDSIOwcgLwgOHGotuKKiGBOYKlxzJxSCpyAbCBxbKJRWFxggOIgqOGlACwADNAgwNDQoGDySiIqRqiaYK3QRGQUAIJgNAAeAC40AHYAJhTUpDRgAN5BsPgA9gukswBOAK74s3vHABTTAFxgC6cAtgBGNMcAlFs7DGCkpwADh9bgAaGTjaSfADcvwAvu0YHBAadXoQAJb4AjEQj4a4ATweTzeH0+RJe72OPyRfzAxxos1OxwWYFmAAt0aQAHTTMAAajA+NhNLACKgYpGJHIVCmc0WKyotGpDH2hxO50uN0J-xO6IWAHNvtsRQwAcCbgBGRrg-Ew+GIhgotGY7G4gnkklfZW0ukMpkswHEY7rACSC1m13ZnK5tv5guFDDFEqgqqOrvwpxImtIDzWNAA2gBdMAAXjA+YWNAA7mBxtcrZ9wZWa5RrtIrVDC8LU7N-i9S+nM8Rs1znsRAbdSwA+MDTLn4HF4ufTT6fLn0pbnGjXa7EcH4b4lmfEOMH7sHUh7Qg0LmEPb664A552qCdAC0H6GbSgHXA3QM-QiCY5hfiMi5Dtm+aNIWMbCs2irrPW1oyB2L7vp+rRAA)
        - [Задача №2](https://www.typescriptlang.org/play/#code/PQKgBAsAUGtouCCAYQQ-CCA4QQEiCsEIghWEDILhBBuEEUEEQEsADTFTC1WUoBUBPABwFNo4xAMEBOUB8IIUAyIIHYQQMIggThBcYQIwgQ-DQBEgLBABgFhA5OUWAGZ5+JdTCqNYcntSz8iQDwgqI+sKB5EDDJAAiADATCA53i2vSoooiAYiCoqFxwgPggAiSEeF6A0iCChIC8IDipqK74GohgXgQCqSRCNOpCgGwgqQJyiVjCYIDiIKhxNUoATAAMYACMAKxK0CDA0NCgYGqastq6+gL4YMPQAMYANgCGAM6blGAA3tAAvqNQAC5s7EwXYAC8YOsAdswA3CcAlg+n7ABOAGbry0uAEF9pFYAAPABcYAeAFcALYAIx+rygxyg0A+Xz+AMuACFQTA4KxvljoQAKZjQzanUkPADmAEpbgA+MAANwA9m8ACao9HQX6wh7LU5vTkPMDLb7sdZfclQmEI5HfAA0YHOHGhFBYHEZ0JBADIwASDkTYDLTrDvpKHuwAO4ai4Kxn8k7S2Xy-rqiiMgB0JKx5I6nSUjLG4AAtNHFiMMVA1lsdgB5U4ACx+hO4ywlNO+sNFnO+5NYsMRqzeyzAirhSJ+6tL5crYCpSrr32ZZu46IFUHGk3MsysNnssZWMrl7HJ3rAqYzHYjYGjkdjQA)
    </script></section>
</section>
<section>
    <section data-markdown ><script type="text/template">
        ## Всякое полезное
    </script></section>
    <section data-markdown ><script type="text/template">
        ## Приведение типов
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Приведение типов

        ```ts
        let a = 10;

        const b: 10 = a; // Error: Type 'number' is not assignable to type '10'.
        ```
        В этом случае мы уверены в том, какое значение в переменной.
        И точно знаем, что оно подходит! И чрезмерная забота от TS раздражает.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Приведение типов

        ```ts
        let a = 10;

        const b1: 10 = <10>a;

        const b2: 10 = a as 10;
        ```

        Два синтаксиса каста: `<>` и `as` — оба эквивалентны.
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Валидны ли эти конструкции?
        ```ts
        const a = 10;
        const b = a as string;  // ?
        const c = a as 15;      // ?
        ```
    </script></section>
    <section data-markdown data-transition="none"><script type="text/template">
        ### Как думаете

        Валидны ли эти конструкции?
        ```ts
        const a = 10;
        const b = a as string;  // Error: Conversion of type 'number' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
        const c = a as 15;      // Все ок
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Ломаем систему

        ```ts
        const a = 10;
        const b = a as any as string;
        ```

        Почему такое может быть плохо?
    </script></section>
    <section data-markdown><script type="text/template">
        ### Ломаем систему даже легально

        ```ts
        function getValue(index: 0 | 1) {
            const tuple: [number, number] = [1, 1];
            return tuple[index];
        }

        const a = 15;
        getValue(a as 0 | 1).toString() //Runtime Error: Uncaught TypeError: Cannot read property 'toString' of undefined
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ## Type guards
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Type guards

        ```ts
        interface Keyboard {
            pressKey: (key: number) => void;
        }

        interface Mouse {
            click: (button: "left" | "right") => void;
        }

        function makeAction(pointer: Mouse | Keyboard) {
            if ("click" in pointer) {
              pointer.click("left")
            } else {
              pointer.pressKey(85)
            }
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Type guards

        ```ts
        function makeAction(pointer: Mouse | Keyboard) {
            if ("click" in pointer) {
              pointer.click("left")
            } else {
              pointer.pressKey(85)
            }
        }
        ```

        `"click" in pointer` — type guard. Внутри if может быть только тип `Mouse`, а внутри else — `Keyboard`.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Type guards

        - оператор `in`
        - `===` или `!==`
        - оператор `instanceof`
        - `Array.isArray`, `Number.isNaN`...

        type guard помогают TS понять, что в этом месте ветвления значение принадлежит конкретному типу.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Type guard своими руками

        Можно определять свои type guards.
        ```ts
        function isNumber(a: any): a is number {
            return typeof a === "number"
        }

        function foo(a: string | number) {
            if (isNumber(a)) {
              a //type: number
            }
        }
        ```

        Конструкция `{parameter} is {type}` объявляет TS, что эта функция — type guard.
    </script></section>
    <section data-markdown><script type="text/template">
        ### Pattern matching

        ```ts
        interface A {
            kind: "a", do: (a: string) => boolean;
        }

        interface B {
            kind: "b", do: (b: number) => boolean;
        }

        function foo(q: A | B): boolean {
            switch (q.kind) {
              case "a":
              return q.do("lalaka");
              case "b":
              return q.do(15);
            }
        }
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ## Enum
    </script></section>
    <section data-markdown><script type="text/template">
        ### Enum

        ```ts
        enum Color {
            Black,
            White,
            Red,
            Green
        }

        const color = Color.Black;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Enum

        вот в такой js транспилируется предыдущий код:
        ```js
        var Color;
        (function (Color) {
            Color[Color["Black"] = 0] = "Black";
            Color[Color["White"] = 1] = "White";
            Color[Color["Red"] = 2] = "Red";
            Color[Color["Green"] = 3] = "Green";
        })(Color || (Color = {}));
        const color = Color.Black;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Enum

        можно задавать значения явно:
        ```ts
        enum Color {
            Black = 3,
            White,
            Red = 10,
            Green
        }

        const black: 3 = Color.Black;
        const white: 4 = Color.White;
        const red: 10 = Color.Red;
        const green: 11 = Color.Green;
        ```
    </script></section>
    <section data-markdown><script type="text/template">
        ### Enum

        Значением в enum могут быть строки, но тогда явно объявленными для всех
        ```ts
        enum Color {
            Black = "black",
            White = "white",
            Red = "red",
            Green = "green"
        }

        enum WrongColor {
            Black = "black",
            White   //Error: Enum member must have initializer.
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Задачки. Полезные штуки

        - [Задача №1](https://www.typescriptlang.org/play?#code/PQKgBI6CCAwggsIFi8IIDhBCsIALgFBi2QBCDKoNwgig7CCDCIIJwggQiDJiAiIKfIFwggYiCKByIGAI5iVSMA0YQOIglQHwggRhBA0iBh4NKQVFhRgCRBE40YzCNRgHhBA-CCICgeRBWiMGb2jAgiAEagJhBJlgrKRHM2O1tHwroomHkoMGIoAytAGRAMbDAAIgBGAAYwAEsAZzAAU04AVwBDABt0gBcAezBEgDowACYAVhT0rLzCsFKa2qrqpLTMnILisq6Y9yxADBArJ3CyKhoigE8ABwywAHM8gCcAEwBaSUEScWRAZhAoGbAAY1zUot2K9BBgdHRkgDsijPWAM1zz5YBBMAAbxGYE+JRKqDAAApcpCXtkALYAIw+AEowABeAB8YHhyI+AG50ABfJ6vd5fH7LABCQJBYIh0NhuMRKPWgiRcNZaMxOLxbKJ0RKRQAFh9IVD0diWfj1kTSc83h9vr8wABhOnRJG5dYS5n8nnSg1yklPT7ZF7nIrJEovLgwyEAgA+YFpLrVqK5ss12HWGSK2XWdri8qeoDAgHwQQACIKI7Mgo4wgg90OdbdcuHFMfbAaDwXqvWypTjcmBiaiiamXunONUs5woTmGXqOUWwCWANRgJGCYVi3XQ1txeplitpopcADMdYbXZ1kJL0pLZaeldSJXyGQq+RKKyhAAMACSAzhxYkNXrNAblBJVI81s89Jr9VqDDpgO8Th+NPotNpdPflkAA)
        - [Задача №2](https://www.typescriptlang.org/play?#code/PQKgBI6CCAwggsIFi8IIDhBCsIALgFBi2QxCCEYQZQARBFAhEGTAEMA7ATzEGEQMExQfhBA+EECYQMAZQFcBbAGK8qAYwA0YAKIBHXhQA2AZ2FiwiMACUApgDdtAJ1HbVo9WDYtEgCRBS5RIFEQJlEBcIOMzZA4iAk2eQNIgYPDk-oDcIGwWtnhsLmAubIA8IFYhgPIggGIgiIgAdGCA+CBsgIIgIeQcfuwhQUjJsWxwYFxx8PlsIRowzYBsIPDh-iSAMiBgAMxg+YTRiBjYYABESgKSAEwArFMeWFPacopKkgAuBrzaU+6TUwZ6hsaSALQAjAAMKyDA6Og7NAAO2jwCpmAAvJRaABuV4fL6yeTKX4A6g0EFvT5ac5GEwiMww4EvBFfUxKf7fIRosAAH2kmyhRNJOn0KNMIPQADM0TsAJYAeyoYAZbLZAAoKKgwFQBAAjQySEWC4X8MUGSRMsRKQW4gCUYAA3qswEoAO4snaiAAWYF5CtESky2LVmsmk1EFCUXxmAimE1t7tEHKUbIU2kyCjZAHNec7+EcuWiLWb+RKVSqQe73SKzhQANYJxP2x3TDaQpSurWJsCeqje33+oMh3NbcNmqNomNgEVxjNFrDJ7Rp1u2rNOs404wFtvYEtlv0B4OnZGD+WRzLRihxwuJjtdrUAX3Qm8ZPN590kN0WknVYGxgtDtbRgsbzf+AD5KGAANRNsDr+M7vkDO6Sb-H09gue1bKJeYjXhQsb3o+fwwa+74gtyfL7mA9w-hqAGfOe-YXIcs5gdBD5XBQb7xkAA)
    </script></section>
</section>
<section>
    <section data-markdown ><script type="text/template">
        ## Декларации типов: *.d.ts файлы
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Что такое *.d.ts файлы

        `*.d.ts` файл — файл, который содержит только описание типов, без их реализаций.

        Например, сигнатуры функций без реализации; описание переменных без инициализации.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Зачем нужны *.d.ts файлы

        - вы написали библиотеку и хотите, чтобы ее можно было использовать не только в TypeScript проектах
        - вы хотите использовать в TS библиотеку, которая написана на JavaScript

    </script></section>
    <section data-markdown ><script type="text/template">
        ### Пример

        Мы реализовали библиотеку:
        ```ts
        class Vector {
            static readonly zero = new Vector(0, 0);

            constructor(public readonly x: number, public readonly y: number) {
            }

            public add(vector: Vector): Vector {
              return new Vector(this.x + vector.x, this.y + vector.y);
            }
        }
        ```

        Теперь хотим поделиться ею с миром.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Пример

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

        Нехорошо!
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Пример

        Можно скомпилировать в JS!
        Тогда библиотекой смогут пользоваться все и компилятор настраивать не надо.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Пример

        Но в случае с компиляцией в JS, проекты на TS не будут знать ничего о типах,
        с которыми наша библиотека работает.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Пример

        Чтобы иметь код на JS и использовать преимущества типизации TS, и нужны `*.d.ts` файлы
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Синтаксис

        Описания без реализаций создаются при помощи ключевого слова `declare`:
        ```ts
        /* .d.ts */
        declare class Vector {
            readonly x: number;
            readonly y: number;
            static readonly zero: Vector;
            constructor(x: number, y: number);
            add(vector: Vector): Vector;
        }
        ```
        `*.d.ts` файлы можно генерировать автоматически, а можно писать вручную.

    </script></section>
    <section data-markdown ><script type="text/template">
        ### Синтаксис

        ```ts
        /* .ts */
        const globalVariable1: string = "lalaka";
        let globalVariable2: number = 48;
        var globalVariable3: 15 = 15;
        function foo(a: number, b: string): boolean {
            return a.toString() === b;
        }
        ```

        ```ts
        /* .d.ts */
        declare const globalVariable1: string;
        declare let globalVariable2: number;
        declare var globalVariable3: 15;
        declare function foo(a: number, b: string): boolean;
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Публикация *.d.ts файлов

        - Приложить их к библиотеке прям рядом с соответствующими js файлами
        - Сложить в специальный репозиторий [https://github.com/DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped).
        Тогда типы будут доступны в npm в пространстве имен `@types`:

        ```
        npm i @types/myAwesomeLibrary
        ```

    </script></section>
    <section data-markdown ><script type="text/template">
        ### Задачка *.d.ts

        Напишите файл декларации типов для файла [vector.js](https://gist.github.com/byTimo/c51bc16d8c48e676da840f3f892b14c6)

    </script></section>
</section>
<section>
    <section data-markdown ><script type="text/template">
        ## TS + React
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Типы React

        К счастью, типы React функций, методов, классов и всего остального описаны за нас.
        В проект их нужно добавить, при помощи подключения npm-пакета:
        ```
        npm install @types/react --save-dev
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Экспорт и импорт типов

        Типы можно экспортировать/импортировать так же, как и переменные в обычном JS
        ```ts
        /* SomeComponent.tsx */
        export type Align = "left" | "right";

        export interface SomeComponentProps {
            align: Align;
            value: string | null;
            onChange: (value: string | null) => void;
        }
        ```

        ```ts
        /* OtherComponent.tsx */
        import { Align, SomeComponentProps } from "../SomeComponent.tsx";

        const align: Align = "left";
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Экспорт и импорт типов

        В TS ≥ 3.8 можно импортировать типы только на уровне типов: не исполняя код в модуле
        ```ts
        /* OtherComponent.tsx */
        import type { Align, SomeComponentProps } from "../SomeComponent.tsx";

        const align: Align = "left";
        ```
        Для такого импорта нужно писать `import type`
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Импорт React в файл

        В JS мы писали так:
        ```js
        import React from "react"
        ```

        В TS надо писать так:
        ```ts
        import * as React from "react"
        ```

        Но можно настроить конфиг, чтобы работало как раньше.
    </script></section>
    <section data-markdown ><script type="text/template">
        ## Функциональные компоненты
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Функциональные компоненты

        Без пропсов

        **< 16.8**
        ```js
        const ColorText: React.StatelessComponent = () => {
            return <span>text</span>
        }
        ```
        **≥ 16.8**
        ```js
        const ColorText: React.FunctionComponent = () => {
            return <span>text</span>
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Функциональные компоненты

        С пропсами

        **< 16.8**
        ```js
        interface ColorTextProps {
            color: "red" | "green" | "blue";
        }

        const ColorText: React.StatelessComponent<ColorTextProps> = (props) => {
            return <span style={{color: props.color}}>text</span>
        }
        ```
        **≥ 16.8**
        ```js
        const ColorText: React.FunctionComponent<ColorTextProps> = (props) => {
            return <span style={{color: props.color}}>text</span>
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Функциональные компоненты

        В React есть встроенный тип для функциональных компонентов.
        До версии Реакта 16.8 он назывался `React.StatelessComponent`, потом переименовался в
        `React.FunctionComponent`. Чтобы не писать так длинно, можно писать так: `React.SFC` и `React.FC`

        Дип функциональных компонентов используется один generic параметр — тип props.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Функциональные компоненты

        В типе props не нужно описывать children — он уже объявлен в типе `StatelessComponent`
        ```js
        interface ColorTextProps {
            color: "red" | "green" | "blue";
        }

        const ColorText: React.SFC<ColorTextProps> = (props) => {
            return <span style={{color: props.color}}>{props.children}</span>
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Функциональные компоненты

        Не обязательно использовать типы `FC` или `SFC` вообще.
        Достаточно описать функцию, возвращающую `React.ReactElement | null`
        ```js
        interface MdashProps {
            color: "red" | "green" | "blue";
        }

        const Mdash = (props: MdashProps): React.ReactElement => {
            return <span style={{color: props.color}}>&mdash;</span>
        }
        ```
        но в этом случае `children` в пропсах надо будет явно объявлять
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Hooks

        У всех хуков есть свои собственные типы. Вот пример для `useState`
        ```ts
        type SetStateAction<S> = S | ((prevState: S) => S);
        type Dispatch<A> = (value: A) => void;
        function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Hooks

        Автовывод типа значения в хуках работает на основании переданного значения. Но не в сложных случаях
        ```ts
        const [value, setValue] = React.useState(10);
        const [color, setColor] = React.useState<"red" | "green" | "blue">("red");
        const [text, setText] = React.useState<string>(null);
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ## Компоненты-классы
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Компоненты-классы

        ```ts
        interface ColorTextProps {
            value: string | null;
            onChange: (value: string | null) => void;
        }

        interface ColorTextState {
            color: "red" | "green" | "blue";
        }

        class ColorText extends React.Component<ColorTextProps, ColorTextState> {
            ...
        }
        ```

        У обоих generic-параметров значение по умолчанию `{}`, можно их не указывать.
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Компоненты-классы. render

        Из метода render должен вернуться тип React.ReactNode:
        `узел jsx-разметки | string | number | boolean | null | undefined`
        ```ts
        class SomeComponent extends React.Component<{value: any}> {
            render(): React.ReactNode {
              const value = this.props.value;
              if(typeof value === "number") { return value + 10; } // number
              if(typeof value === "boolean") { return !value; } // boolean
              if(typeof value === "undefined") { return value; }  // undefiened

              return JSON.stringify(value); // string
            }
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Компоненты-классы. Методы жизненного цикла


        ```ts
        interface ColorTextProps {
            value: string;
        }
        interface ColorTextState {
            color: "red" | "green" | "blue";
        }

        class ColorText extends React.Component<ColorTextProps, ColorTextState> {
            componentDidUpdate(prevProps: ColorTextProps, prevState: ColorTextState): void {
              if(this.props.value !== prevProps.value
              || this.state.color !== prevState.color) {
              ...
              }
            }
            ...
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Default props


        ```js
        interface ColorTextProps {
            value: string;
            width: number;
        }

        class ColorText extends React.Component<ColorTextProps> {
            static defaultProps = {
              width: 100
            }
        }

        function App() {
            return (
              <ColorText value="value">Some message</ColorText>
            )
        }
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ## High Order Component
    </script></section>
    <section data-markdown ><script type="text/template">
        ### High Order Component

        Для компонентов без props все просто:
        ```js
        function myHOC(Component: React.ComponentType) {
            ...
        }

        class Some extends React.Component {
            render() {
              return null
            }
        }

        myHOC(() => <div>lalaka</div>);
        myHOC(Some);
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### High Order Component

        Но если у компонента есть хоть какие-то props, то будет ошибка:
        ```js
        function myHOC(Component: React.ComponentType) {
            ...
        }

        const Text = (props: { value: string }) => {
            return <span>{props.value}</span>;
        }

        myHOC(Text); // Error: Argument of type '(props: { value: string; }) => JSX.Element' is not assignable to parameter of type 'ComponentType<{}>'.
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### High Order Component

        Починим ошибку:
        ```js
        function myHOC<TProps>(Component: React.ComponentType<TProps>) {
            ...
        }

        const Text = (props: { value: string }) => {
            return <span>{props.value}</span>;
        }

        myHOC(Text); // Теперь все ок
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### High Order Component

        Ограничим компоненты, которые можем принять в HOC
        ```js
        interface WithColor {
            color: string;
        }
        function myHOC<TProps extends WithColor>(Component: React.ComponentType<TProps>) {
            ...
        }

        const Text = (props: { value: string }) => {
            return <span>{props.value}</span>;
        }
        const ColorText = (props: { value: string, color: string }) => {
            return <span style={{color: props.color}}>{props.value}</span>;
        }

        myHOC(ColorText);
        myHOC(Text); // Error: Argument of type '(props: { value: string; }) => JSX.Element' is not assignable to parameter of type 'ComponentType<WithColor>'.
        ```
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Задачка React+TS

        Задача лежит [тут](https://github.com/kontur-web-courses/typescript/tree/master/react-typescript-task)

    </script></section>
</section>
<section>
    <section data-markdown ><script type="text/template">
        ## Заключение
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Мы разобрали:
        - базовый синтаксис TS
        - типы как множества
        - описание типов объектов, функций, классов
        - использование generic-типов
        - описание деклараций типов в *.d.ts файлах
        - типизация реакт-компонентов
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Чего не было в курсе:
        - сравнения типов unknown, never, void и any
        - типизации redux
        - использования ts для выведения сложных случаев, например, тип guid или строки даты
        - использование встроенных типов, например, Promise, Date...
    </script></section>
    <section data-markdown ><script type="text/template">
        ### Обратная связь
        Заполни форму обратной связи по ссылке

        http://bit.ly/kontur-courses-feedback
    </script></section>
</section>
</div></div>

<script src="reveal/js/reveal.js"></script>

<script>
    Reveal.initialize({
        hash: true,
        dependencies: [
            { src: 'reveal/plugin/markdown/marked.js' },
            { src: 'reveal/plugin/markdown/markdown.js' },
            { src: 'reveal/plugin/highlight/highlight.js' },
            { src: 'reveal/plugin/notes/notes.js', async: true }
        ]
    });
</script>
</body>
</html>