typescript — вопросы с ответами

Стандарт ECMAScript и назначение TypeScript

TypeScript – это язык и коллекция инструментов для генерации JavaScript. Вместо того, чтобы требовать совершенно новую среду выполнения, созданный с помощью TypeScript JavaScript может повторно использовать все доступные инструменты JavaScript, фреймворки и множество библиотек, доступных для JavaScript. Однако язык и компилятор TypeScript приближают разработку JavaScript к более традиционному объектно-ориентированному опыту.

JavaScript как язык существует уже давно. Первоначально разработанный как язык для поддержки HTML в одном веб-браузере, он вдохновил множество клонов языка, каждый со своими реализациями. Со временем был введен глобальный стандарт, позволяющий веб-сайтам поддерживать несколько браузеров. Язык, определенный в этом стандарте, называется ECMAScript.

Каждый интерпретатор JavaScript должен предоставлять функции, соответствующие стандарту ECMAScript. Стандарт ECMAScript, который был опубликован в 1999 году, официально назывался ECMA-262, 3-е издание, но стал известен просто как ECMAScript 3. Эта версия JavaScript получила широкое распространение и стала основой для взрывной популярности и роста интернета в том виде, в котором мы его знаем сейчас.

С популярностью языка и ростом использования вне веб-браузера стандарт ECMAScript неоднократно пересматривался и обновлялся. К сожалению, время, которое требуется между предложением новых языковых функций и ратификацией нового стандарта для их покрытия, может быть довольно длительным. Даже когда публикуется новая версия стандарта, веб-браузеры только принимают эти стандарты с течением времени, а также могут реализовывать части стандарта раньше других.

Поэтому, прежде чем выбирать, какой стандарт принять, важно понять, какие браузеры или, точнее, какой механизм времени выполнения необходимо будет поддерживать. Для поддержки этих решений существует ряд справочных сайтов, которые перечисляют поддержку в так называемой таблице совместимости.

В настоящее время на выбор предлагаются 3 основные версии ECMAScript: ES3, ES5 и недавно ратифицированная ES6. ES3 существует уже давно, и почти любой веб-браузер будет поддерживать его. ES5 поддерживается большинством современных веб-браузеров. ES6 является последней версией стандарта и, безусловно, самым большим обновлением языка до настоящего времени. Он впервые вводит классы в язык, что облегчает реализацию объектно-ориентированного программирования.

Компилятор TypeScript имеет параметр, который может переключаться между различными версиями стандарта ECMAScript. В настоящее время TypeScript поддерживает ES3, ES5 и ES6. Когда компилятор запускает ваш TypeScript, он генерирует ошибки компиляции, если код, который вы пытаетесь скомпилировать, недопустим для этого стандарта. Команда Microsoft взяла на себя обязательство следовать стандартам ECMAScript в любых новых версиях компилятора TypeScript, так что, как только новые версии будут приняты, язык TypeScript и компилятор последуют его примеру.

Компиляция

Одна из самых любимых функций JavaScript – отсутствие этапа компиляции. Просто измените свой код, обновите браузер, а интерпретатор позаботится обо всем остальном. Нет необходимости ждать какое-то время, пока компилятор не закончит работу, чтобы запустить ваш код.

Хотя это может рассматриваться как преимущество, есть много причин, по которым вы захотите ввести этап компиляции. Компилятор может найти глупые ошибки, такие как пропущенные скобки или запятые. Он также может найти другие более неясные ошибки, такие как использование одиночной кавычки ('), где должна была использоваться двойная кавычка ("). Каждый разработчик JavaScript расскажет ужасные истории о часах, потраченных на поиск ошибок в своем коде, только для того, чтобы найти пропущенную закрывающую скобку { или простую запятую. Введение шага компиляции в ваш рабочий процесс действительно начинает сиять при управлении большой базой кода.

При внесении изменений в большую кодовую базу нам также необходимо убедиться, что мы не нарушаем существующую функциональность. В большой команде это часто означает использование функций ветвления и слияния репозитория исходного кода. Выполнение шага компиляции до, во время и после слияния из одной ветви в другую дает нам дополнительную уверенность в том, что мы не допустили никаких ошибок или что процесс автоматического слияния также не допустил никаких ошибок.

Используя непрерывный процесс интеграции в команде разработчиков, сервер CI отвечает за создание и развертывание всего сайта, а затем запускает набор модульных и интеграционных тестов для вновь проверенного кода. Мы можем сэкономить часы сборки и часы тестирования, гарантируя отсутствие синтаксических ошибок в коде, прежде чем приступить к развертыванию и запуску тестов.

Наконец, как упоминалось ранее, компилятор TypeScript может быть настроен для вывода ES3, ES5 или ES6 JavaScript. Это означает, что мы можем ориентироваться на разные версии среды выполнения из одной и той же базы кода.

Строгая типизация

JavaScript не сильно типизирован. Это очень динамичный язык, в котором объекты могут изменять свои свойства и поведение на лету. Для примера можно рассмотреть такой кусок кода:

В первой строке этого фрагмента кода объявлена тестовая переменная и ей присвоено строковое значение. Чтобы убедиться, что это так, мы записали значение в консоль. Затем мы присваиваем числовое значение тестовой переменной и снова записываем ее значение в консоль. Обратите внимание на последний фрагмент кода. Мы назначаем функцию, которая принимает два параметра для тестовой переменной. Если мы запустим этот код, мы получим следующие результаты:

Здесь мы можем ясно увидеть изменения, которые мы вносим в тест переменной. Он изменяется от строкового значения до числового значения, а затем становится функцией.

Изменение типа переменной во время выполнения может быть очень опасным делом и может вызвать неисчислимые проблемы. Вот почему традиционные объектно-ориентированные языки обеспечивают строгую типизацию. Другими словами, они не позволяют типу переменной изменяться после объявления.

Хотя весь приведенный выше код является допустимым в JavaScript (и может быть оправдан), довольно легко увидеть, как он может привести к ошибкам во время выполнения. Представьте, что вы были ответственны за написание библиотечной функции для добавления двух чисел, а затем другой разработчик непреднамеренно переназначил вашу функцию, чтобы вместо этого вычесть эти числа.

Подобные ошибки могут быть легко обнаружены в нескольких строках кода, но становится все труднее находить и исправлять их по мере роста вашей базы и развития команды разработчиков.

Проверка типов

В большинстве случаев JavaScript не заботится о том, какие типы вы ему предоставляете, и вместо этого он пытается сделать все возможное, чтобы преобразовать то, что вы ему дали, в то, что он ожидает.

TypeScript, с другой стороны, проверяет ваш код во время компиляции. Таким образом, вам не нужно фактически запускать свой код, чтобы увидеть какую-либо ошибку. Typescript статически анализирует ваш код на наличие ошибок, подобных этим, и показывает их вам, прежде чем вы действительно запустите свой код. Если ваш код не компилируется, то это действительно хороший признак того, что вы допустили ошибку, и вы должны исправить ее, прежде чем пытаться запустить свой код.

С хорошим плагином TypeScript для выбранного вами редактора кода ошибка будет отображаться в виде красной волнистой линии под вашим кодом при вводе. Это значительно ускоряет цикл обратной связи между написанием вашего кода, сообщением о том, что вы сделали ошибку, и обновлением вашего кода, чтобы исправить эту ошибку.

Настройка IDE

Теперь, когда у вас есть некоторое представление о том, как работает компилятор TypeScript и система типов, давайте настроим вашу IDE, чтобы мы могли приступить к изучению реального кода.

Начните с загрузки текстового редактора для написания своего кода. Хорошим выбором является VSCode, потому что он обеспечивает особенно приятный опыт редактирования TypeScript, но вы также можете использовать Sublime Text, Atom, Vim, Webstorm или любую другую IDE, которая вам нравится. Инженеры, как правило, очень разборчивы в IDE, поэтому мы постараемся не оскорбить ваши чувства и предоставляем окончательное решение вам. Если вы хотите использовать VSCode, следуйте инструкциям на веб-сайте VSCode, чтобы настроить его.

TSC сам по себе является приложением командной строки, написанным на TypeScript3, что означает, что вам нужен NodeJS для его запуска. Следуйте инструкциям на официальном сайте NodeJS, чтобы запустить NodeJS на своем компьютере.

NodeJS поставляется с NPM, менеджером пакетов, который вы будете использовать для управления зависимостями вашего проекта и управления вашей сборкой. Начните с создания новой папки и инициализации нового проекта NPM:

tsconfig.json

Каждый проект TypeScript должен включать файл с именем tsconfig.json в корне проекта, в котором проекты TypeScript определяют такие вещи, как, какие файлы должны быть скомпилированы, в какой каталог их компилировать и какую версию JavaScript генерировать.

Создайте новый файл с именем tsconfig.json в корневой папке, затем откройте его в вашей IDE и введите следующее содержимое:

Ваш tsconfig.json поддерживает десятки опций, и постоянно добавляются новые. Вы не обнаружите этих изменений на практике, кроме набора номера модуля и настроек цели при переключении на новый пакет модуля, добавления «dom» в lib при написании TypeScript для браузера или настройки уровня «строгости» при взаимодействии с существующим кодом JavaScript. Для получения полного и актуального списка поддерживаемых опций перейдите к официальной документации на веб-сайте TypeScript.

В вашем проекте также должен быть файл tslint.json, содержащий вашу конфигурацию TSLint, кодифицирующую любые стилистические соглашения, которые вы хотите для своего кода (табуляции или пробелов и т. д.).

16 ответов
У меня есть это приложение helloworld для простого создания, созданное в онлайн-курсе, однако я получаю эту ошибку: Неверный объект конфигурации. Webpack был инициализирован с использованием объект конфигурации, который не соответствует схеме API.  - Конфигурация имеет неизвестное свойство postcss....
06 фев. 2017, в 05:12
23 ответа
У меня возникла следующая ошибка при запуске моего приложения "Угловое", даже если компонент не отображается. Я должен прокомментировать, чтобы мое приложение работало. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input...
angular
input
11 авг. 2016, в 09:12
32 ответа
Я создал базовое приложение на Angular, но столкнулся со странной проблемой, когда я не могу внедрить службу в один из моих компонентов. Тем не менее, он отлично вписывается в любой из трех других компонентов, которые я создал. Для начала, это сервис: import { Injectable } from '@angular/core'; @...
angular
23 июнь 2016, в 17:22
5 ответов
Я не могу понять, как установить значения свойств по умолчанию для моих компонентов с помощью Typescript. Это исходный код: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): ...
17 май 2016, в 17:33
4 ответа
В чем разница между этими утверждениями (интерфейс против типа)? interface X { a: number b: string } type X = { a: number b: string };
15 май 2016, в 03:22
21 ответ
Угловая ngOnInit обеспечивает цикл жизненного цикла ngOnInit по умолчанию. Зачем использовать ngOnInit, если у нас уже есть constructor?
angular
constructor
ngoninit
03 март 2016, в 04:23
10 ответов
Кто-нибудь знает, как получить элемент, определенный в шаблоне компонента? Полимер делает это очень легко с $ и $$. Мне просто интересно, как это сделать в Angular. Возьмем пример из учебника: import {Component} from '@angular/core' @Component({ selector:'display' template:' <inp...
angular
angular-components
angular2-components
21 сен. 2015, в 11:39
7 ответов
В чем разница между @Component и @Directive в Angular? Оба они, похоже, выполняют одну и ту же задачу и имеют одинаковые атрибуты. Каковы варианты использования и когда вы предпочитаете друг друга?
20 сен. 2015, в 13:51
11 ответов
Я работаю над проектом typescript в коде Visual Studio и хотел бы скрыть файлы .js.map (и, возможно, даже .js) из файла в проводнике файлов. Можно ли отображать только файлы .ts в проводнике файлов?
visual-studio-code
vscode-settings
23 июль 2015, в 12:48
18 ответов
Я пытаюсь запустить и запустить мое первое приложение Typescript и DefinitelyTyped node и запустить некоторые ошибки. Я получаю сообщение об ошибке "TS2304: Не могу найти имя" require ", когда я пытаюсь переслать простую страницу ts node. Я прочитал несколько других случаев этой ошибки на SO, и я не...
definitelytyped
02 июль 2015, в 01:28
9 ответов
Любое предложение о том, как преобразовать строку в число в TypeScript? var aNumber : number = "1"; // --> Error // Could this be done? var defaultValue = 0; var aNumber : number = "1".toInt32(defaultValue); // Or .. var defaultValue = 0; var aNumber : number = StringToInt("1", defaultValue); ...
02 фев. 2013, в 23:18
4 ответа
В TypeScript я могу объявить параметр функции как тип Function. Есть ли "безопасный для типов" способ сделать это, что мне не хватает? Например, рассмотрим это: class Foo { save(callback: Function) : void { //Do the save var result : number = 42; //We get a number from the save ...
01 фев. 2013, в 02:46
16 ответов
Я устанавливаю глобальные пространства имен для своих объектов, явно устанавливая свойство на window. window.MyNamespace = window.MyNamespace || {}; TypeScript подчеркивает MyNamespace и жалуется, что: Свойство 'MyNamespace' не существует при значении типа 'window' любой " Я могу заставить код р...
03 окт. 2012, в 12:50
10 ответов
Кто-нибудь сделал перегрузку конструктора в TypeScript. На стр. 64 спецификации языка (v 0.8) имеются инструкции, описывающие перегрузки конструктора, но не было приведено никакого образца кода. Я сейчас пробую действительно базовую декларацию класса; это выглядит так, interface IBox { x : n...
constructor
method-overloading
03 окт. 2012, в 05:32
5 ответов
Не могли бы вы описать язык TypeScript? Что это может сделать, что JavaScript или доступные библиотеки не могут сделать, что даст мне основание считать это?
02 окт. 2012, в 17:30
Наверх
Меню