Быстрое введение в TypeScript для самых нетерпеливых, а также подборка книг для более длительного изучения. Обсудить Типизированный младший брат JavaScript был создан в 2012 году Андерсом Хейлсбергом – отцом-основателем Turbo Pascal, Delphi и С#. В 2019 году TypeScript попал в десятку самых популярных языков программирования и сохраняет позиции, оставаясь одним из лучших инструментов для создания веб-интерфейсов. Мы расскажем об истории создания и особенностях синтаксиса TypeScript, а также приведем список литературы для более полного погружения в тему и развития навыков программирования. История TypeScript По мере развития интернета и браузеров JavaScript стал все чаще использоваться для разработки сайтов. Из-за кажущейся простоты языка в приложениях возникало много ошибок, что привело к проблемам с поддержкой. Появление TypeScript было обусловлено недостатками JavaScript и сложностями при разработке программ. Индустрии требовалось что-то близкое, но с более развитыми инструментами для поиска и устранения ошибок еще до запуска кода в продакшен. К счастью, способ решения задачи давно известен – нужно сделать язык более или менее жестко типизированным. Что такое TypeScript? По сути это типизированное надмножество JavaScript, предназначенное для выявления ошибок на этапе компиляции. Программа на TypeScript компилируется в простой код JavaScript, который выполняется в любом браузере. Разрабатывается язык программирования как проект с открытыми исходными текстами, потому использовать его может любой желающий бесплатно и без особых ограничений. Ориентирован TypeScript на прикладные задачи – он помогает кратко и точно выражать идеи (писать более читаемый код), а также обеспечивает масштабируемость и безопасность приложений. Эта надстройка вокруг основного языка JavaScript дает разработчикам статическую типизацию и приведение типов. Главные преимущества TypeScript: Если тип переменной не поддерживает некую операцию, компилятор выдаст ошибку. Читаемость кода упрощает разработчикам поддержку чужих приложений. Если код компилируется, скорее всего он работает. При внесении правок в код среда сразу укажет на измененные классы и функции, а также предупредит об ошибках компиляции (упрощается рефакторинг). Начало работы с TypeScript Чтобы писать код на TypeScript, можно использовать любой текстовый редактор. Многие среды разработки (например, Visual Studio Code) поддерживают этот язык из коробки. Основная идея TypeScript – компиляция в JavaScript, а сам компилятор устанавливается с помощью менеджера пакетов npm в Node.js Чтобы начать работать с TypeScript, рассмотрим два варианта: установку через NPM или как плагин к Visual Studio. Установка через NPM Node.js – самая популярная платформа для исполнения серверных и клиентских приложений. После ее установки потребуется выполнить команду: npm install -g typescript В некоторых случаях (например, в OS X) для установки пакета нужно использовать механизм повышения привилегий sudo: sudo npm install -g typescript Для начала можно потренироваться в онлайн-версии TypeScript – для этого ничего устанавливать не нужно и сразу виден результат. Использование Visual Studio Если при инсталляции IDE отметить опцию «Node.js development», установятся все средства для работы с TypeScript. Синтаксис TypeScript В TypeScript есть разные типы переменных, а проверка корректности значений перед обработкой позволяет сделать поведение кода более предсказуемым. Язык модули, функции, переменные, операторы и выражения, а также комментарии. Можно добавлять объявления типов к переменным, параметрам функций и возвращаемым значениям. Тип записывается после двоеточия после имени переменной. var num: number =5; Основные типы данных: Ключевое слово Тип данных Описание Пример кода Any Динамичный Описывает данные, тип которых может быть неизвестен на момент написания приложения. let AnyVar: any = «green»; console.log(AnyVar); // сейчас AnyVar – это string AnyVar = 30; console.log(AnyVar); // сейчас AnyVar – это number Number Числовой Целые числа или числа с плавающей запятой let decimal: number = 6; String Строчный Последовательность символов Unicode let color: string = «blue»; color = ‘grey’; Boolean Логический Используется для логических значений true и false let isDone: boolean = false; Void Void Отсутствие конкретного значения. Используется для функций, которые не возвращают значений button.onclick = () => void doSomething(); Null Null Используется, когда переменная определена (например, строка или число), а значение неопределенно. let x: null = null; console.log(x); Underfined Underfined Используется для всех неинициализированных переменных let x: underfined = underfined; console.log(x); Большинство из этих типов соотносится с примитивными типами из JavaScript. { } – комплексный объект, которому можно определить свойства или индикатор: {name: string, age: number} // объект с атрибутами имени и возраста. или let person = {name:"Kira", age:25}; console.log(person.name); // Другой вариант получения свойства. Результат одинаковый console.log(person["name"]); Рассмотрим пример кода: let person = { name: "Kira", age: 25 }; person = { name: "Ira" }; Во второй строке мы получим ошибку, поскольку объект person имеет два свойства name и age. Должно быть соответствие по названиям, количеству и типу свойств. Array используется для определения типов элементов массива. Указать тип можно двумя способами: Array <T> и T[ ] Массив чисел Number [ ] Пример: let list: number[] = [11, 22, 33]; let colors: string[] = ["red", "green", "blue"]; console.log(list[0]); // 11 console.log(colors[1]); // green Массив строк Array <string>: let names: Array<string> = ["Kira", "Ira", "Vera"]; console.log(names[1]); // Ira Enum – перечисление, возможность дать имена наборам числовых значений: enum Day { Monday, Friday, Saturday, } let b: Day = Day.Friday Кортежи в TypeScript имеют фиксированное количество элементов определенных типов: // Declare a tuple type let x: [string, number]; // Initialize it x = ["hello", 10]; // OK // Initialize it incorrectly x = [10, "hello"]; // Error Компилятор выдаст приблизительно такие сообщения об ошибках:Type ‘number’ is not assignable to type ‘string’. Type ‘string’ is not assignable to type ‘number’. // Определение кортежа – кортеж состоит из двух элементов – строки и числа let user: [string, number]; // Инициализация кортежа user = ["Kira", 25]; // Неправильная инициализация – переданные значения не соответствуют типам по позиции //userInfo = [25, "Kira"]; // Ошибка // Использование кортежа console.log(user[1]); // 25 user[1] = 26; // а тут мы поменяли значение 25 на 26 Параметры функций подразделяются на параметры по умолчанию, однотипные и необязательные. По умолчанию function NAME_F (NAME_P:тип = “х”): Пример: // Определение функции function add(a: number, b: number): number { return a + b; } // Вызов функции let result1 = add(1, 2); // результат 3 Для определения классов поддерживаются модификаторы контроля доступа public, protected и private: Класс, название, атрибуты: class User { name: string; surname: string; year: number; } Тот же класс, вместе с модификаторами: class User { protected name: string; public surname: string; private _year: number; } Идентификаторы в TypeScript – это имена переменных, функций и других элементов кода. Идентификаторы могут содержать буквы, цифры и некоторые спецсимволы (‘_’ и ‘$’). Цифра не может стоять в начале идентификатора. Идентификаторы чувствительны к регистру, не могут быть ключевыми словами и не должны содержать пробелы. Например, Name_one, Name_1, Name1, Name$. TypeScript чувствителен к регистру, а использование точки с запятой в нем необязательно. Каждая строка инструкции называется оператором, одна строка может содержать несколько операторов и вот тогда их нужно разделять точкой с запятой. Комментарии повышают читаемость кода. С их помощью удобно оставлять информацию об авторе кода, подсказки по конструкциям и др. Hello world TypeScript является надмножеством ES5 и включает предлагаемые для ES6 функции, поэтому любая программа на JavaScript – уже и программа на TypeScript (обратное неверно). Создаём базовый файл index.html <!doctype html> <html lang=”en»> <head> <meta charset=”UTF-8”> <title>Learning TypeScript</title> </head> <body> <script scr=”HelloWorld.js”></script> </body> </html> Создаем файл с расширением HelloWorld.ts и добавляем в него следующую строку: alert(‘hello world in TypeScript!’); Компиляция. Чтобы преобразовать наш файл в файл на JavaScript нужно в командной строке запустить: tsc HelloWorld.ts 6 книг по TypeScript для углубленного изучения Мануал по TypeScript занимает всего 10 страниц. Восполнить пробелы помогут книги с задачами и описаниями чужого опыта. Больше практики, меньше теории. «Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений», Борис Черный. «Эффективный TypeScript: 62 способа улучшить код», Дэн Вандеркам. «Изучаем TypeScript 3», Натан Розенталс. «TypeScript», Jesse Russell, Ronald Cohn. «Angular и TypeScript. Сайтостроение для профессионалов», Яков Файн, Антон Моисеев. Бесплатное пособие «TypeScript Deep Dive». *** Если вы любите статически типизированные подходы в больших приложениях, TypeScript – то что нужно. Легкий в изучении, понятный и строгий на практике – отличный вариант для освоения премудростей веб-разработки. Удачи!
Типизированный младший брат JavaScript был создан в 2012 году Андерсом Хейлсбергом – отцом-основателем Turbo Pascal, Delphi и С#. В 2019 году TypeScript попал в десятку самых популярных языков программирования и сохраняет позиции, оставаясь одним из лучших инструментов для создания веб-интерфейсов.
Мы расскажем об истории создания и особенностях синтаксиса TypeScript, а также приведем список литературы для более полного погружения в тему и развития навыков программирования.
По мере развития интернета и браузеров JavaScript стал все чаще использоваться для разработки сайтов. Из-за кажущейся простоты языка в приложениях возникало много ошибок, что привело к проблемам с поддержкой. Появление TypeScript было обусловлено недостатками JavaScript и сложностями при разработке программ. Индустрии требовалось что-то близкое, но с более развитыми инструментами для поиска и устранения ошибок еще до запуска кода в продакшен. К счастью, способ решения задачи давно известен – нужно сделать язык более или менее жестко типизированным.
Что такое TypeScript? По сути это типизированное надмножество JavaScript, предназначенное для выявления ошибок на этапе компиляции. Программа на TypeScript компилируется в простой код JavaScript, который выполняется в любом браузере. Разрабатывается язык программирования как проект с открытыми исходными текстами, потому использовать его может любой желающий бесплатно и без особых ограничений.
Ориентирован TypeScript на прикладные задачи – он помогает кратко и точно выражать идеи (писать более читаемый код), а также обеспечивает масштабируемость и безопасность приложений. Эта надстройка вокруг основного языка JavaScript дает разработчикам статическую типизацию и приведение типов.
Главные преимущества TypeScript:
Чтобы писать код на TypeScript, можно использовать любой текстовый редактор. Многие среды разработки (например, Visual Studio Code) поддерживают этот язык из коробки. Основная идея TypeScript – компиляция в JavaScript, а сам компилятор устанавливается с помощью менеджера пакетов npm в Node.js
Чтобы начать работать с TypeScript, рассмотрим два варианта: установку через NPM или как плагин к Visual Studio.
Node.js – самая популярная платформа для исполнения серверных и клиентских приложений. После ее установки потребуется выполнить команду:
npm install -g typescript
В некоторых случаях (например, в OS X) для установки пакета нужно использовать механизм повышения привилегий sudo:
sudo npm install -g typescript
Для начала можно потренироваться в онлайн-версии TypeScript – для этого ничего устанавливать не нужно и сразу виден результат.
Если при инсталляции IDE отметить опцию «Node.js development», установятся все средства для работы с TypeScript.
В TypeScript есть разные типы переменных, а проверка корректности значений перед обработкой позволяет сделать поведение кода более предсказуемым. Язык модули, функции, переменные, операторы и выражения, а также комментарии.
Можно добавлять объявления типов к переменным, параметрам функций и возвращаемым значениям. Тип записывается после двоеточия после имени переменной.
var num: number =5;
Основные типы данных:
Большинство из этих типов соотносится с примитивными типами из JavaScript.
{ } – комплексный объект, которому можно определить свойства или индикатор:
{name: string, age: number} // объект с атрибутами имени и возраста.
или
let person = {name:"Kira", age:25}; console.log(person.name); // Другой вариант получения свойства. Результат одинаковый console.log(person["name"]);
Рассмотрим пример кода:
let person = { name: "Kira", age: 25 }; person = { name: "Ira" };
Во второй строке мы получим ошибку, поскольку объект person имеет два свойства name и age. Должно быть соответствие по названиям, количеству и типу свойств.
person
name
age
Array используется для определения типов элементов массива.
Указать тип можно двумя способами: Array <T> и T[ ]
Массив чисел Number [ ]
Пример:
let list: number[] = [11, 22, 33]; let colors: string[] = ["red", "green", "blue"]; console.log(list[0]); // 11 console.log(colors[1]); // green
Массив строк Array <string>:
let names: Array<string> = ["Kira", "Ira", "Vera"]; console.log(names[1]); // Ira
Enum – перечисление, возможность дать имена наборам числовых значений:
enum Day { Monday, Friday, Saturday, } let b: Day = Day.Friday
Кортежи в TypeScript имеют фиксированное количество элементов определенных типов:
// Declare a tuple type let x: [string, number]; // Initialize it x = ["hello", 10]; // OK // Initialize it incorrectly x = [10, "hello"]; // Error
Компилятор выдаст приблизительно такие сообщения об ошибках:Type ‘number’ is not assignable to type ‘string’.
Type ‘string’ is not assignable to type ‘number’.
// Определение кортежа – кортеж состоит из двух элементов – строки и числа let user: [string, number]; // Инициализация кортежа user = ["Kira", 25]; // Неправильная инициализация – переданные значения не соответствуют типам по позиции //userInfo = [25, "Kira"]; // Ошибка // Использование кортежа console.log(user[1]); // 25 user[1] = 26; // а тут мы поменяли значение 25 на 26
Параметры функций подразделяются на параметры по умолчанию, однотипные и необязательные.
// Определение функции function add(a: number, b: number): number { return a + b; } // Вызов функции let result1 = add(1, 2); // результат 3
Для определения классов поддерживаются модификаторы контроля доступа public, protected и private:
public
protected
private
Класс, название, атрибуты:
class User { name: string; surname: string; year: number; }
Тот же класс, вместе с модификаторами:
class User { protected name: string; public surname: string; private _year: number; }
Идентификаторы в TypeScript – это имена переменных, функций и других элементов кода. Идентификаторы могут содержать буквы, цифры и некоторые спецсимволы (‘_’ и ‘$’). Цифра не может стоять в начале идентификатора.
Идентификаторы чувствительны к регистру, не могут быть ключевыми словами и не должны содержать пробелы.
Например, Name_one, Name_1, Name1, Name$.
Name_one
Name_1
Name1
Name$
TypeScript чувствителен к регистру, а использование точки с запятой в нем необязательно. Каждая строка инструкции называется оператором, одна строка может содержать несколько операторов и вот тогда их нужно разделять точкой с запятой.
Комментарии повышают читаемость кода. С их помощью удобно оставлять информацию об авторе кода, подсказки по конструкциям и др.
TypeScript является надмножеством ES5 и включает предлагаемые для ES6 функции, поэтому любая программа на JavaScript – уже и программа на TypeScript (обратное неверно).
<!doctype html> <html lang=”en»> <head> <meta charset=”UTF-8”> <title>Learning TypeScript</title> </head> <body> <script scr=”HelloWorld.js”></script> </body> </html>
alert(‘hello world in TypeScript!’);
Мануал по TypeScript занимает всего 10 страниц. Восполнить пробелы помогут книги с задачами и описаниями чужого опыта. Больше практики, меньше теории.
***
Если вы любите статически типизированные подходы в больших приложениях, TypeScript – то что нужно. Легкий в изучении, понятный и строгий на практике – отличный вариант для освоения премудростей веб-разработки. Удачи!
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.
Δ
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.