TypeScript Typings

TypeScript Typings

Я уже рассказывал в одном из уроков о декларативных файлах TypeScript .d.ts . Во многих библиотеках, эти декларативные файлы находятся в их npm пакетах. В этом случае компилятор TypeScript их без труда найдёт и правильно скомпилирует проект. Но не во всех JavaScript библиотечных npm пакетах находятся файлы .d.ts . В этом случае нам нужно подключить эти файлы самостоятельно. Читать далее «TypeScript Typings»

Конфигурирование Angular2 + Webpack

Angular2 + Webpack

В данном уроке я хотел бы поделиться своим опытом конфигурирования Webpack для работы с Angular2 . Если вы ещё не знакомы с Webpack, то Webpack — это сборщик для JavaScript проектов. То есть он собирает ваш JavaScript код из всех ваших файлов в один (или несколько). Он также позволяет подключать файлы между собой как nodejs модули, а также поддерживает динамическую загрузку файлов и многое другое. На самом деле о Webpack можно много и долго писать, но это не тема данного урока. Подробнее о Webpack вы можете прочитать на официальном сайте, но, если у вас нет времени, то не отчаивайтесь, в данном уроке мы соберём рабочую конфигурацию Webpack + Angular2, а если что-то будет непонятно, то вы всегда можете зайти в документацию Webpack.
Читать далее «Конфигурирование Angular2 + Webpack»

TypeScript + Gulp быстрый старт, часть 2

В предыдущем уроке мы разобрали как иcпользовать gulp в связке с TypeScript. В этом уроке мы разберём сборку нашего TypeScript проекта в один JavaScript файл и подключим его на web-страницу. Для этого мы будем использовать Browserify . Browserify позволяет нам  объединить нашу сборку в один JavaScript файл, не меняя структуру проекта и не изменяя наш commonJs способ подключения модулей. Иными словами, исходники не изменятся, мы поменяем лишь задачу gulp .
Читать далее «TypeScript + Gulp быстрый старт, часть 2»

Конфигурационный файл tsconfig.json

tsconfig.json — файл настроек проекта TypeScript. Он содержит в себе пути к файлам и опции, необходимые TypeScript, чтобы успешно скомпилировать проект.

Если TypeScript находит файл tsconfig.json , то он считает директорию, в которой находится этот файл корневой директорией TypeScript проекта.

Читать далее «Конфигурационный файл tsconfig.json»

TypeScript быстрый старт

  1. Установите инструменты и компилятор TypeScript. Для этого откройте вашу любимую консольную утилиту ( я лично предпочитаю conemu ) и выполните там следующую команду.
    
    npm install -g typescript
    
    
  2. Создайте ваш проект. Для этого создайте на компьютере папку и назовите её, например, typescript-project . Далее создайте файл в этом проекте, назовите его index.ts , и отредактируйте его в вашем любимом редакторе или IDE. Добавьте в него следующий код:
    
    var user = "Anatoly";
    function hello(person){
    
        return 'Hello, ' + person;
    
    }
    document.body.innerHTML = hello(user);
    
    
  3. Скомпилируйте ваш файл. Для этого перейдите в консоли в папку с проектом и наберите команду
    
    tsc index.ts
    
    
  4. В результате вы получите скомпилированный файл index.js , который уже можно подключить к html-странице.

Читать далее «TypeScript быстрый старт»

Пространства имён / Namespaces в TypeScript

Классы и интерфейсы помогают в разработке больших и расширяемых приложений, описывая как использовать программный компонент, абстрагируясь от конкретной реализации. TypeScript обеспечивает соблюдение правил видимости private и protected членов классов только на этапе разработки программы, но не на этапе её выполнения, так как на этапе выполнения это уже JavaScript, a в JavaScript все свойства доступны.

Читать далее «Пространства имён / Namespaces в TypeScript»

Дженерики / Generic types в TypeScript

Дженерики (generic type) используются для получения точной информации о поведении JavaScript библиотек. Дженерики могут передавать информацию о типе из нашего клиентского кода в JavaScript библиотеку и оттуда назад в наш клиентский код.

Для примера рассмотрим описание типа Array, которое находится в декларативном файле lib.d.ts :


interface Array<T> {

    reverse(): T[];
    sort(compareFn?: (a: T, b: T) => number): T[];

    //...
}

Читать далее «Дженерики / Generic types в TypeScript»