Using TypeScript when installing packages from npm often requires you to install related definition files. This lesson shows you how to use typings to install es6-shim then how to configure SystemJS to load from node_modules.

Install:

npm install --save rxjs

Import:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';

But you will find errors, the reason for that rxjs include es6, but our target is es5.

So, install:

typings install es6-shim --save -ambient

Include:

<script>
System.config({
packages: {
"dist": {
"defaultExtension": "js",
"main": "main"
},
"rxjs": {
"defaultExtension": "js"
}
},
map: {
"lodash": "https://npmcdn.com/lodash@4.13.1",
"rxjs": "node_modules"
}
}); System.import("dist")
</script>

Then you can start using rxjs;

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval'; Observable.interval(1000)
.subscribe( x => console.log(x))

[TypeScript] Using Typings and Loading From node_modules的更多相关文章

  1. [TypeScript] Using Lodash in TypeScript with Typings and SystemJS

    One of the most confusing parts of getting started with TypeScript is figuring out how to use all th ...

  2. 在 Typescript 2.0 中使用 @types 类型定义

    在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经 ...

  3. Nodejs生态圈的TypeScript+React

    基于Nodejs生态圈的TypeScript+React开发入门教程   基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程 ...

  4. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  5. TypeScript 素描 - 模块解析、声明合并

    模块解析 模块解析有两种方式 相对方式  也就是以/或 ./或-/开头的,比如import jq  from "/jq" 非相对方式  比如 import model  from ...

  6. 搭建typescript开发环境最详细的全过程

    搭建typescript开发示例https://github.com/Microsoft/TypeScriptSamples typescript案例https://www.tslang.cn/sam ...

  7. 在微信小程序开发中使用Typescript

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Type ...

  8. Angular2 从0到1 (一)

    史上最简单Angular2教程,大叔都学会了 作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:An ...

  9. Angular2学习

    1.新建项目 2.新建Model public class TodoItem { public int Id { get; set; } public string Key { get; set; } ...

随机推荐

  1. Docker系列

    Docker学习系列(五):Dockerfile文件 什么是Dockerfile? 它是一个名称为Dockerfile的文件 它是一个脚本文件,由一系列命令和参数构成 Dockerfile是自动构建d ...

  2. NET SqlClient

    NET SqlClient的使用与常见问题 阅读目录 一.简介 二.使用ADO.NET 三.常见问题 回到目录 一.简介 在很多要求性能的项目中,我们都要使用传统的ADO.NET的方式来完成我们日常的 ...

  3. 将UIImage保存到iOS照片库和对应程序沙盒中-b

    1.保存到iOS照片库需要引入QuartzCore.framework框架,具体代码如下:.h文件#import <QuartzCore/QuartzCore.h>UIImageView ...

  4. C语言可变参数在宏定义中的应用

    在C语言的标准库中,printf.scanf.sscanf.sprintf.sscanf这些标准库的输入输出函数,参数都是可变的.在调试程序时,我们可能希望定义一个参数可变的输出函数来记录日志,那么用 ...

  5. BZOJ 1629: [Usaco2007 Demo]Cow Acrobats

    Description Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away a ...

  6. 通过live555实现H264 RTSP直播

    http://blog.csdn.net/firehood_/article/details/16844397

  7. Visual Studio 2015 Update 1 成功安装后运行 “出现未能正确加载[XXXX]包,此问题可能是由配置更改或安装另一个扩展导致的。” 可能的解决方法

    作死装Visual Studio 2015 update 1.安装过程中虽然波澜不惊,但是安装之后运行回报未能正确安装[XXXX]包.找了半天,在stackoverflow中找到了相关的问题,在问题描 ...

  8. 【HDOJ】1031 Design T-Shirt

    qsort直接排序. #include <stdio.h> #include <string.h> #include <stdlib.h> #define MAXN ...

  9. word在线编辑\生成图片(包含截图与合并)

    1.业务原因 word编辑后的文章复制到html编辑器(fck等)会发生排版错乱的情况,于是混沌了.需要有一个新的方法来终结,于是产生了word能不能在线编辑,后台保存,前台显示灯一系列问题. 2.首 ...

  10. Discuz! x 2.5-3.0 beta 存储型跨站漏洞

    漏洞版本: Discuz x 2.5 - 3.0 漏洞描述: Discuz! 已拥有11年以上的应用历史和200多万网站用户案例 是全球成熟度最高.覆盖率最大的论坛软件系统之一,淘帖处发表评论,直接插 ...