В посте про компиляцию TypeScript я не стал писать про компиляцию модулей. И как видите код примеров не содержит импортов. Я думаю, что на эту хитрость пошел не только я, но и писатели руководства по TypeScript. С модулями все становится интереснее, особенно для человека не имевшего дела с Javscript модулями. Давайте попытаемся заюзать модули. Установим RxJS:

npm install rxjs

Скопируем пример greeter.ts:

import { Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

Observable.of(1,2,3).map(x => x + '!!!').forEach((x) => console.log(x)); // etc

И скопилируем:

$ node_modules/.bin/tsc greeter.ts 
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.

Это можно поправить установив rxjs-compat:

npm install rxjs-compat

Но дальше летят еще странные ошибки:

$ node_modules/.bin/tsc greeter.ts 
node_modules/rxjs/internal/Observable.d.ts(83,59): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
node_modules/rxjs/internal/types.d.ts(34,84): error TS2304: Cannot find name 'Iterable'.
node_modules/rxjs/internal/types.d.ts(38,6): error TS2304: Cannot find name 'Symbol'.

Их я поправил с помощью google:

npm i --save-dev @types/bluebird @types/core-js@0.9.36

Отлично компилируется в greeter.js:

"use strict";
exports.__esModule = true;
var Observable_1 = require("rxjs/Observable");
require("rxjs/add/observable/of");
require("rxjs/add/operator/map");
Observable_1.Observable.of(1, 2, 3).map(function (x) { return x + '!!!'; }).forEach(function (x) { return console.log(x); });

И это работает в NodeJS:

$ node greeter.js
1!!!
2!!!
3!!!

Но мне хочется засунуть это в браузер. А там нет require. И на помощь приходит Browserify:

npm install --save-dev browserify
node_modules/.bin/browserify greeter.js -o bundle.js

И на выходе я получаю bundle.js, который могу вставить в свой index.html:

<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="bundle.js"></script>
</body>
</html>

Viola!

  • Не раскрыта тема динамической загрузки модулей
  • И совсем не понятно почему выбран модуль RxJS

Однако, я надеюсь, это не просто так.