Ответы пользователя по тегу TypeScript
  • Какими способами можно получить аргументы из консоли в typescript?

    @bromzh
    Drugs-driven development
    import * as yargs from 'yargs';
    console.log(yargs.argv);


    Но надо понимать, что аргументы yargs, получаемые в конфиге вебпака просто так не будут доступны в собираемом им коде. Можно использовать DefinePlugin, например.
    Ответ написан
    6 комментариев
  • Как внедрить зависимость в сервис Angular 2?

    @bromzh
    Drugs-driven development
    Обычно такая ошибка возникает, когда нарушен порядок импортов/экспортов, либо что-то не проимпортировалось. Если тип внедряемой в конструктор зависимости по какой-то причине ещё не был загружен, то возникает такая ошибка. Причём, с точки зрения typescript всё нормально, ведь компилятор прежде всего смотрит на .d.ts-файлы.
    В этой ситуации скорее всего в проект не правильно подключается http-модуль из ангуляра. Т.е. сами .d.ts-файлы подключаются нормально, а вот непосредстенно js-код в итоговую сборку не включается (или включается, но в неверной последовательности).

    Но нужно видеть весь проект, чтобы сказать точнее.
    Ответ написан
    Комментировать
  • Как запаковать существующее angular2 приложение в nativescript?

    @bromzh
    Drugs-driven development
    Комментировать
  • Как изменить значение Observable у RxJs?

    @bromzh
    Drugs-driven development
    Нужно доки читать. reactivex.io/documentation/observable.html

    Вообще, есть куча разных способов, куча нюансов для подписок и подписчиков и т.д.

    Можно сделать так:
    class Foo {
        observer: any;
    
        constructor() {
            let observable = Observable.create<number>(observer => this.observer = observer);
    
            let sub1 = observable.subscribe(
                value => console.log('Sub1. Value:', value),
                err => console.log('Sub1. Error:', err),
                () => console.log('Sub1. Complete')
            );
    
            this.observer.next(1);
            this.observer.next(2);
            this.observer.next(3);
            this.observer.complete();
        }
    }


    Можно использовать Subject и его производные. Примеры в документации присутствуют. Ещё и с картинками!
    Ответ написан
    Комментировать
  • Как подсветить синтаксис html в файле typescript в PHPStorm?

    @bromzh
    Drugs-driven development
    Потому что подсветка работает только для поля с именем template, а не templateUrl.

    Ещё бывает, что IDE тупит. У меня такое периодически случается: шторм перестаёт распознавать встроенный шаблон и показывает его как строку. Перезагрузка IDE должна помочь.
    Ответ написан
    Комментировать
  • Как подключить typings?

    @bromzh
    Drugs-driven development
    Если tsconfig составлен верно, то больше ничего не требуется. По-умолчанию, компилятор будет подключать и компилить все .ts и .d.ts-файлы в проект рекурсивно, начиная с той папки, в которой лежит tsconfig.json, обычно это корень проекта. Единственный важный момент: чтобы компилятор не начал искать и компилировать всё из папки node_modules, её нужно добавить в список исключаемых директорий.
    Вот пример конфига:
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
      },
      "exclude": [
        "node_modules"
      ],
      "compileOnSave": false,
      "buildOnSave": false
    }
    Ответ написан
    Комментировать
  • Почему ругается компилятор typescript?

    @bromzh
    Drugs-driven development
    Немного поправлю Евгения, достаточно объявить нужное поле в классе, тип можно не ставить:
    export class AppComponent {
        sommm; // Можно и без типа, зависит от настройки компилятора
        title = 'hero';
        hero: Hero = {
          id: 1,
          name: 'Wind'
        }
        constructor (){
          this.sommm = 'from this some'
        }    
     }


    Или ещё можно добавить модификатор в аргумент конструктора:
    export class AppComponent {
        // В Angular 2 так можно делать в классах, 
        // которые не являются компонентами/директивами/сервисами/пайпами и т.п.
        constructor (public sommm: string = 'from this some') {}   
     }
    // Это аналогично такому:
    export class AppComponent {
        sommm: string;
        constructor (sommm: string = 'from this some') {
            this.sommm = sommm;
        }    
     }

    Но типы всё-таки лучше указывать.

    UPD 0. В TypeScript обычно, если переменная имеет тип, отличный от any, то динамически добавлять поля в неё нельзя. Когда создаётся экземпляр класса (оператор new), вызывается специальный метод с именем 'constructor'. Ты пытаешься в конструкторе записать в поле sommm. Компилятор TypeScript работает до рантайма и типы определяет исходя из объявления класса. В данном случае, тип AppComponent имеет 2 поля (title, hero). Так что с его точки зрения, у типа AppComponent нет поля sommm, потому-то он и ругается.
    Иногда, видимо из-за особенностей лайв-серверов, бывает, что хоть компилятор и ругается на несоответствие типов, но код запускается и работает, ведь с точки зрения JS, всё выглядит верно.

    UPD 1. Хоть я и привёл пример, где не указывал типы переменных, но так делать не стоит (почти) никогда. Чтобы оградить себя от написания такого кода, можно добавить опцию компилятора "noImplicitAny". Без неё следующий код скомпилируется без ошибок:
    let a;
    function foo(bar) {}
    class Bar {
      foo;
      private bar;
    }

    Со включённой опцией компилятор выдаст ошибки там, где переменные, аргументы функций и методов или поля классов объявлены без типов.
    Нужно всегда стараться указывать тип у переменных. Если один тип не подходит, можно попробовать сделать функцию/метод/класс дженериками. Если тип неизвестен - то можно поставить any. Но обычно такое бывает редко, ведь обычно ты знаешь, что за тип ожидается (у меня в проектах практически нет переменных с типом any).

    UPD 2. Я привёл пример, где в конструкторе указывается модификатор. Это специальный синтаксис в Typescript, который позволяет уменьшить количество повторяющегося кода.
    Однако, есть важный момент: внедрение зависимостей в компоненты/директивы/сервисы/и т.п. во втором ангуляре идёт через конструктор. Причём, в typescript-версии, фреймворк по-умолчанию извлекает информацию о типе аргумента конструктора и пытается внедрить по этому типу нужную зависимость. Поэтому в конструкторах должны быть только внедряемые зависимости.

    UPD 3. Если пишешь на ангуляре, то стоит изучить styleguide и стараться следовать ему. Плюс, хорошо ещё прикрутить к проекту tslint.
    Ответ написан
    4 комментария
  • Как создать типизированный интерфейс?

    @bromzh
    Drugs-driven development
    1) Параметризовать класс:
    class SomeClass<T> {
        public data: T;
    }
    let numData: number = new SomeClass<number>().data;
    let strData: string = new SomeClass<string>().data;


    2) Кастовать типы:
    class SomeClass {
    	data: any;
    }
    let numData: number = new SomeClass().data as number;
    let strData: string = new SomeClass().data as string;

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

    Ещё стоит посмотреть сюда: https://www.typescriptlang.org/docs/handbook/advan...
    Ответ написан
    1 комментарий
  • Можно ли писать на TypeScript под NodeJS?

    @bromzh
    Drugs-driven development
    Можно ли писать на TypeScript под NodeJS? Вопрос о том, хорошая ли это практика?

    Да, да
    Смогу ли я использовать без особых проблем пакеты из npm, либо какие-то сторонние скрипты/классы написанные на js?

    Если разобраться, для чего нужны .d.ts-файлы и как использовать typings, то проблем не будет.

    Плюсы:
    - свежие фичи из спецификаций ES
    - статическая типизация, а, следовательно, все плюсы, которые она даёт. если в двух словах: часть ошибок будет отлавливаться ещё до запуска и, соответственно, нужно меньше тестов
    - хорошая поддержка языка всякими редакторами. IDE от Jetbrains лучше будут выдавать подсказки. И даже простые редакторы кода, например Atom, Sublime, VS Code начнут выдавать нормальные подсказки, переходить по определениям в коде, выдавать сигнатуру методов, и т.д.

    Минусы:
    - Нужно понять, как правильно подключать обычные js-библиотеки к проекту. В целом, это не сложно, но многие не осиливают.
    - Типы "существуют" только в compile-time. На выходе обычный JS со всей его динамической природой. Если код написан плохо (например, часто используется тип any), то typescript не поможет.

    А про отладку я уже говорил: с ней проблем нет. Просто нужно подключить вот эту штуку, и всё будет нормально. VS Code точно умеет подключаться к нодовскому (и хромовскому) дебагеру и будет прыгать по исходникам, а не по скомпилированной каше.
    Ответ написан
    Комментировать
  • Инджект сервиса в сервис в angular 2?

    @bromzh
    Drugs-driven development
    Нет, естественно надо указать только то, что будешь внедрять непосредственно в сам компонент. А можно даже не указывать ничего, если сервис ты регистрируешь глобально в функции bootstrap.

    Вообще логика такая: все сервисы, которые внедряются, должны каким-то образом быть зарегистрированы. Те сервисы, которые ты зарегистрировал глобально в функции bootstrap будут доступны глобально во всех компонентах. Их необязательно описывать в поле providers. Если сервисы не регистрируются глобально, то нужно регистрировать в компоненте. Причём сервисы будут доступны и в дочерних компонентах.
    Вообще, у каждого компонента свой инжектор зависимостей. Таким образом, для каждого компонента можно настроить провайдеры сервисов по-своему. Если сервис не зарегистрирован у компонента, то его ищут вверх по иерархии компонентов.
    Ответ написан
    4 комментария