Как обновить typescript в проекте

Обновление скриптов TypeScript на клиенте

Работаю сейчас с кодом на TypeScript. Вопрос такой: как обновить эти скрипты на клиенте? Насчет обычных js-скриптов нашел советы ссылки делать так: file.js?10122014 . Логично, вроде, и дата обновления есть, и скрипты обновятся. Вот только с TypeScript как такое сделать, не могу представить. Прямых ссылок в проекте нет, нашел только указания на папки со скриптами. Настроек компилятора нужных пока не нашел. Может, кто работал с TypeScript и подскажет. Не верю, что способа нет, но мне его найти пока не удалось.

Отслеживать

11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков

задан 9 дек 2014 в 21:27

Pleshkov Ivan Pleshkov Ivan

775 3 3 серебряных знака 10 10 бронзовых знаков

Typescript должен транспилироваться в джаваскрипт где-то в вашем проект, и эти файлы подтягиваются клиентом. На них можно повесить таймстамп в точно такой же манере. Чем собирается проект?

Установка TypeScript

Для начала работы с TypeScript необходимо установить его инструментарий. Установить TypeScript можно через пакетный менеджер NPM.

Установка Node.js​

Для установки через NPM необходимо установить Node.js (если он ранее не был установлен). Если у вас Windows, то для дальнейших действий нужен установленный менеджер пакетов Chocolatey. С помощью него установим Node.js. Если у вас MacOS, то мы используем менеджер пакетов Homebrew.

Для начала процесса установки необходимо выполнить команду:

• Choco
• Homebrew

choco install -y nodejs.install 

Послу завершения установки PowerShell выдаст такой результат:

brew install node 

Установка TypeScript​

Чтобы установить TypeScript необходимо выполнить в Powershell комманду:

npm install -g typescript 

Как обновить typescript в проекте

Сегодня посмотрим, что добавили в TypeScript 5.0 и как это повлияет на нашу разработку.

Установка TypeScript

Для того чтобы установить TypeScript Beta (если 5-я версия ещё не вышла) и попробовать в действии, установим его глобально или локально в dev зависимости:

npm i -D typescript@beta

Сменить версию TypeScript в VSCode можно открыв команды (CMD + SHIFT + P) и выбрав пункт Select TypeScript Version.

Увеличение производительности

Прежде всего хочу остановиться на увеличении производительности. Ребята проделали огромную работу и теперь bundle TypeScript весит практически в два раза меньше, а также собирает все на порядок быстрее. По крайней мере, от 10 до 20%, как они заявляют в своем посте. Конечно же, на маленьких проектах можно не увидеть никакой разницы, но если у вас есть огромный проект на TypeScript, прирост будет более ощутим.

Улучшение enum

Давайте представим, что у нас есть некоторый enum , который будет называться Role , у которого есть либо Admin , либо User .

enum Role

Теперь возьмем и реализуем функцию, которая будет проверять эту роль. Назовем ее testRole , передадим в него role типа Role , который нам нужно выбрать:

function testRole(role: Role) <>

Если мы возьмем более старую версию TypeScript (4.9.5), то можно вызвать testRole() с любым числовым значением, что будет логически неверно:

function testRole(role: Role) <> testRole(4)

Если же выбрать последнюю версию TypeScript, уже нельзя передать 4. При этом 0 или 1 будут продолжать быть валидными значениями.

Const в Generics

В generics теперь можно явно обозначить, что мы хотим работать именно с литералом.

Давайте для примера сделаем некоторый класс Flight , который будет принимать дженерик, и у него будет метод fly , который будет реализовывать полет до какой-то точки T . Кроме этого, сделаем конструктор, который будет принимать эти точки полета:

class Flight  < constructor(private dest: T[]) <>fly(to: T) <> >

Мы хотим так сделать, так как класс может работать как с обычными строками, коротким названием стран, так и с числами.

Сделаем экземпляр класса и передадим туда RU и GB:

const flight = new Flight(['RU', 'GB'])

Когда будем вызывать метод flight.fly() туда можно будет передать вообще любую чушь. Несмотря на то, что мы явно передали destination , он получает строки в качестве типа.

Можно попытаться сделать as const , но это требует обозначения, что T[] является readonly :

class Flight  < constructor(private dest: readonly T[]) <>fly(to: T) <> > const flight = new Flight(['RU', 'GB'] as const) flight.fly('adfasfasf')

Но, не всегда массив, который передается должен быть readonly , поэтому такой вариант нам не подходит. Сейчас же в TypeScript 5 и выше есть возможность записать следующим образом — const :

class Flight < // код >

И теперь мы обозначили, что то, что мы хотим передать, будет работать как литералы и мы можем передать строго либо RU, либо GB, но ничего больше.

О новых декораторах

Теперь перейдем к декораторам — самому большому изменению, которое ожидает в TypeScript 5.0. Декораторы в JavaScript уже на Stage 3, а значит, они скоро появятся в production. TypeScript для того, чтобы не потерять совместимость, необходимо их поддерживать. При этом пользователи Angular или Nest не пугайтесь: старые декораторы останутся, и дальше с ними ничего не будет. Они так же как и раньше включаются опцией:

"experimentalDecorators": true,

Создание декоратора

Итак, для чего нужны декораторы? Декораторы позволяют модифицировать поведение того или иного метода, если говорим, например, о декораторе метода:

class Flight  < constructor(private dest: readonly T[]) <>@test // декоратор fly(to: T) <> > const flight = new Flight(['RU', 'GB'] as const) flight.fly('adfasfasf')

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

function test()

Он принимает target — это тот метод, который мы вызываем и context — контекст вызова этого метода. Дальше мы должны вернуть новую функцию и в этой функции можем модифицировать поведение в начале, в конце либо даже до исполнения этой функции:

function test( target, context ) < /// return function() < /// /// >>

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

function test( target: (this: This, . args: Args) => Return, context: ClassMethodDecoratorContext Return> ) < /// return function() < /// /// >>

Где ClassMethodDecoratorContext – типизаций контекста для декораторов.

Далее нам нужно вызвать нашу исходную функцию и вернуть её результат:

function test( target: (this: This, . args: Args) => Return, context: ClassMethodDecoratorContext Return> ) < /// return function(this: This, . args: Args): Return < /// const res = target.call(this, . args); return res; /// >>

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

Как обновить TypeScript

Задача: Для использования нового функционала Typescript’a нужно его обновить к последней версии.

Инструменты: Windows Command Line (cmd); VS Code

Решение: Для обновления Typescrip’a нужно выполнить следующую команду:

npm update -g typescript@latestCode language: CSS (css)

Для установки TypeScript’a, нужно выполнить команду

npm install -g typescript@latestCode language: CSS (css)

Или без указания версии

npm install -g typescript

Если не удалось обновить TypeScript, скорее всего в папке «C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\» уже установлена некая версия.

• Попробуйте удалить или переименовать данную папку.
• Также не забывайте об переменных среды (Enviroment Variable). В переменной Path тоже осталось значение, и после обновления, его нужно будет подправить (указать правильный путь, например C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.5\ ).

Запись опубликована 27.05.2020 автором androschuk.a в рубрике Блог с метками TypeScript.

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Свежие записи

• Git — как переименовать ветку?
• Как удалить папки .@__thumb в Qnap?
• Как отключить генерацию .@__thumb папки в Qnap?
• How to show separate lines in Notepad++ when there is /r/n in the text (en)?
• Как в Notepad++ заменить /r/n на новую строку?