Опциональные параметры и свойства TypeScript 2.0

В TypeScript 2.0 наконец-то появились опциональные (необязательные) параметры для функций и типов/интерфейсов. Что же это значит?

Это значит, что если мы укажем какое-нибудь свойство при определении типа/интерфейса или параметр функции как необязательное, оно по-умолчанию будет инициализировано значением undefined. То есть формально, даже если мы его не указали в классе или объекте, то оно там будет, независимо от того, хотим мы этого или нет, только оно будет равно undefined (стандартное поведение в JavaScript).

Читать далее

strictNullChecks опция TypeScript 2.0

С версии 2.0 нам доступна новая опция TypeScript − −strictNullChecks.

Данная опция включает строгий режим проверки на null. Если этот режим включен, то мы больше не можем присваивать null или undefinded переменным любого типа. Более того, значением переменной по-умолчанию при объявлении не становится undefined . Она просто остается не инициализированной.  Появились два новых типа null и undefined . Теперь, если мы хотим, чтобы переменная, допустим, типа number могла принимать значение null , то нужно явно это ей сообщить, добавив null в перечень возможных типов этой переменной.

Попытка использования не инициализированной переменной :


let a: number;

a; // ошибка, попытка использовать не инициализированную переменную

Попытка присвоить null переменной типа number :


let a: number = 2; // всё хорошо
a = null; // ошибка, не поддерживаемый тип переменной

// теперь нужно так
let b: number | null; // либо number | null | undefined , если мы хотим добавить поддержку undefined
let b = 2; // всё хорошо
let b = null; // всё хорошо

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

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

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

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

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

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

Первым делом создадим проект, для этого зайдите в консоль и выполните следующие команды:


mkdir myproject

cd myproject

mkdir src

mkdir dist

Читать далее

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

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

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

Читать далее

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-странице.

Читать далее