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. 解决在HTTPS页面里嵌套HTTP页面浏览器block的问题

    问题描述: 浏览器默认是不允许在HTTPS里面引用HTTP页面的,ie下面会弹出提示框提示是否显示不安全的内容,一般都会弹出提示框,用户确认后才会继续加载,但是chrome下面直接被block掉,只在 ...

  2. hbase rowkey设计的注意事项

    充分利用有序性 1.1 如果要scan操作,且不是很频繁,可以利用rowkey的有序性将需要一起扫描的数据放到一起.例如直接用时间戳.这样就可以按时间scan了.这个只要是简单的全表扫描都行. 1.2 ...

  3. bzoj 3043: IncDec Sequence 模拟

    3043: IncDec Sequence Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 248  Solved: 139[Submit][Statu ...

  4. 快速搭建Web服务器软件PHP+Apache+MySQL

    搭建网站或者博客,需要一个合适的 Web 服务器.除了如下能在购买的虚拟空间上进行操作外,我们也可以在自己的电脑上搞定,因为可以用来方便快捷地测试网站或者博客主题,无论是 Wordpress.Joom ...

  5. 四种必须知道的Android屏幕自适应解决方案

    一.细说layout_weight     目前最为推荐的Android多屏幕自适应解决方案.     该属性的作用是决定控件在其父布局中的显示权重,一般用于线性布局中.其值越小,则对应的layout ...

  6. 【HDOJ】1597 find the nth digit

    二分. #include <stdio.h> #include <math.h> int main() { int case_n; double n, tmp, l, r; i ...

  7. Android 写文件到手机

    1)// 在手机中创建文件 FileOutputStream phone_outStream =this.openFileOutput("1.txt", Context.MODE_ ...

  8. createElement

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. win7怎么调屏幕自动休眠时间

    win7怎么调屏幕自动休眠时间 2013-03-28 17:13匿名 | 分类:Windows | 浏览1327次 我也不知道怎么说 我的电脑的问题就是 电脑放那不动过2,3分钟屏幕就暗了 要是不动过 ...

  10. HDOJ --- 1160

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...