Как начать использовать Typescript
9 проектов, которые вам нужно сделать, чтобы стать продвинутым Frontend разработчиком
13.01.2022
Как постепенно учить Git
14.01.2022
Одним из самых значительных новшеств в веб-разработке за последнее десятилетие стал переход к Typescript. Рынок развивается и работодатели постоянно повышают требования для программистов, поэтому изучение Typescript становится необходимым для получения работы.
Хотя языки с динамической типизацией облегчают жизнь разработчику в краткосрочной перспективе, они могут стать причиной нежелательных ошибок, которые не будут обнаружены до момента выполнения. Вы можете избежать этой проблемы с помощью TypeScript. Давайте рассмотрим подробнее
Что такое TypeScript?
Простыми словами TypeScript – это расширение возможностей JavaScript. Это означает, что хотя обычный код JavaScript будет работать так же, как и в TypeScript, он будет обладать дополнительным набором функций, делающих наш код чище и лучше. TypeScript использует компилятор, известный как tsc, для проверки ошибок в коде и генерирует (технически известный как эмиттер) эквивалент JavaScript для использования в веб-приложениях.
TypeScript также можно назвать статически типизированной версией Javascript, но при этом мы упускаем из виду множество других возможностей, которые может предложить TypeScript. В следующем разделе рассмотрим некоторые преимущества использования TypeScript.
Преимущества использования TypeScript:
Strong typing – уделяется большое внимание типу переменных, используемых в коде. Если переменной присваивается значение, не соответствующее типу, компилятор tsc TypeScript выдает ошибку.
Object-oriented features вводит множество объектно-ориентированных концепций, которые помогают облегчить управление кодом.
Compile-time errors – поскольку существует этап компиляции, большинство ошибок отлавливается во время компиляции, а не во время выполнения.
Emitting with errors – разработчику сообщается о потенциальных ошибках в коде, но при этом позаботится о генерации эквивалентного JavaScript для поддержания процесса разработки. Окончательное решение остается за программистом.
Great tooling – предоставляется доступ к множеству отличных инструментов, которые помогают в редактировании, проверке ошибок и т.д. по мере набора кода.
Давайте посмотрим, как это можно сделать с помощью этой простой демонстрации, которая также подчеркивает некоторые из вышеупомянутых возможностей.
Как использовать TypeScript
Прежде чем перейти к основной демонстрации и рассмотреть сценарий, похожий на реальные приложения, давайте сначала рассмотрим основные строительные блоки TypeScript.
The Primitives
Здесь также присутствуют обычные для JavaScript примитивы число, строка и булеан. Кроме того, вы можете сделать аннотацию типа, чтобы зафиксировать тип переменной во время объявления. TypeScript также определяет тип, когда переменная уже определена. В TypeScript также есть специальный тип any, который используется для того, чтобы избежать ошибок проверки типа конкретной переменной.
|
1 2 3 4 5 6 7 8 9 10 11 |
let message: string = "Hello World"; // string type variable let myNum: number = 42; // number type variable let isReal: boolean = true; // boolean type variable let special: any = "Any type"; // any type variable special = 13; // any type doesn't cause any type checking errors |
Функции и объекты
Функции также следуют аналогичной схеме аннотации типов, где типы параметров указываются так же, как и для обычных переменных, а возвращаемый тип указывается между круглыми скобками и фигурными скобками. Анонимные функции используют свойство TypeScript, называемое контекстной типизацией, когда тип определяется по контексту использования функции.
Объекты – это почти то же самое, что и JavaScript, за исключением того, что типы определяются для каждого свойства внутри объекта. Обращение к несуществующим свойствам приводит к ошибке компилятора.
TypeScript дает нам возможность создавать объекты, используя псевдонимы типов (не могут быть расширены) или интерфейсы (могут быть расширены).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//This function takes two string types as input and returns a string output function greeting(firstName: string, lastName: string): string { return firstName + lastName } let fullName = greeting("Han", "Solo") console.log(fullName) // Anonymous functions // Inferred type const names = ["Stark", "Potts", "Parker"]; // Contextual typing for arrow functions names.forEach((s) => { console.log(s.toUpperCase()); }); |
Типы поверх JavaScript
TypeScript также добавляет некоторые собственные типы.
Tuples – это массивы, у которых типы элементов уже аннотированы, поэтому мы не можем сохранить любой другой тип на этом месте.
Enums подразумевают присвоение человекочитаемых идентификаторов числам/строкам. Это облегчает управление кодом и избавляет от необходимости запоминать фиксированные значения.
Unions позволяют использовать одну и ту же переменную с несколькими типами данных, не опасаясь ошибок типа. Это достигается путем указания нескольких типов для одной переменной с помощью символа pipe(|).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Tuples - Special Arrays with fixed type elements const universe: [number, string] = [1, "Marvel"]; // Enum type enum Seasons { SUMMER, WINTER, SPRING, AUTUMN }; // can be accessed as console.log(Seasons.WINTER) // Unions let data:(number | string) = 99; data = "ninety nine" //valid because it is a union |
Использование TypeScript в проекте
Поскольку мы уже знакомы с основными блоками TypeScript, давайте создадим небольшое приложение и посмотрим, как мы можем использовать его для написания более качественного кода. Это приложение будет принимать на вход два числа и выводить их сумму на консоль браузера.
1. Перед созданием демонстрации нам необходимо настроить TypeScript на устройстве. Следуйте инструкциям, чтобы установить TypeScript.
2. Создайте два файла index.html и app.ts. Не забудьте вызвать app.js внутри HTML-файла. Мы будем использовать app.ts (для эмуляции файла) и app.js (для использования в среде браузера).
3. Создайте файл index.html, как показано ниже. Этот файл будет содержать два ввода для чисел и одну кнопку добавления. Мы будем выводить сумму двух чисел на консоль.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TypeScript Demo</title> </head> <body> <h1>Intro to TypeScript</h1> <p>Remember to open the browser console</p> <button id="add-btn"> Add </button> <input type="number" id="num1"> <span> to </span> <input type="number" id="num2"> <script src="app.js"></script> </body> </html> |
4. Внутри файла app.ts добавьте следующий код. Этот код TypeScript создает файл JavaScript, который мы будем использовать для получения значений из DOM, добавления их и записи результата в консоль браузера.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// DOM Elements const addBtn = document.getElementById("add-btn"); const number1 = document.getElementById("num1")! as HTMLInputElement; const number2 = document.getElementById("num2")! as HTMLInputElement; // function to add two numbers and return the result function addNum(num1:number, num2:number): number { return num1 + num2; } // event listener for add button addBtn.addEventListener("click", function() { console.log(addNum(parseInt(number1.value), parseInt(number2.value))) }) view raw |
5. Чтобы эмулировать app.js, перейдите в терминал и выполните следующую команду для компиляции app.ts:
tsc —target es2015 app.ts
Убедитесь, что команда запущена внутри папки, в которой находится ваш app.ts. Как упоминалось ранее, tsc – это компилятор TypeScript. Он скомпилирует наш app.ts и выдаст app.js, а также выдаст сообщения об ошибках в случае их возникновения.
Флаг target необходим для того, чтобы убедиться, что создаваемый JavaScript соответствует стандарту ES2015. По умолчанию tsc выдает стандарт ES3, который является довольно старым.
6. Если вы используете приведенный выше код, он должен работать сразу же. Чтобы увидеть TypeScript в действии, необходимо удалить аннотации типов. Каждый раз, когда вы вносите изменения, вам нужно компилировать app.ts заново. Изменения, не соответствующие TypeScript, будут генерировать ошибки. Однако JavaScript все равно будет сгенерирован, и вы даже сможете его запустить, но это может дать неожиданные результаты.
Мы только поцарапали поверхность того, что может предложить TypeScript! Самое большое, что вы можете сделать, чтобы лучше познакомиться с TypeScript, – это начать использовать его в своих проектах. Чем чаще вы будете работать с TypeScript, тем легче вам будет применять его для написания чистого кода.
Ищете, где развернуть этот чистый код? Обратите внимание на Codesphere – единственного облачного провайдера, который делает развертывание в облаке таким же простым, как и локальное тестирование.
Пробуйте и все получится!
