将 node_module 包含在 Typescript 项目中答案

【问题标题】：node_module inclusion in a Typescript project将 node_module 包含在 Typescript 项目中
【发布时间】：2017-03-13 16:09:23
【问题描述】：

我对 javascript 框架配置相对较新，我正在尝试配置我使用 gulp、typescript 和 babel 编写的库的编译/转译。我遇到的问题在于包含外部库。我的项目旨在使用 MathJS、RequireJS、RXJS 和 JQuery。

在编译期间，我收到以下错误： Compilation errors

完成编译/转译后，我会引用我的入口点 (/services/bid-manager.service.js)，当我尝试加载文件时，我收到以下错误： Runtime (Chrome conosole) errors

我当前的设置如下所示：

package.json

{
  "name": "bid-manager-service",
  "version": "0.0.1",
  "description": "Service for calculating bids for PVBid",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "private",
    "pvbid",
    "bid",
    "manager"
  ],
  "author": "Michael J. Miller",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.1.1",
    "mathjs": "^3.6.0",
    "requirejs": "^2.3.2",
    "rxjs": "^5.0.0-rc.1"
  },
  "devDependencies": {
    "babel-polyfill": "^6.16.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-sourcemaps": "^2.2.0",
    "gulp-typescript": "^3.1.2",
    "typescript": "^2.0.6"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "./dist",
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var ts = require('gulp-typescript');
var babel = require('gulp-babel');

var tsProject = ts.createProject('./tsconfig.json');

gulp.task('default', function() {
    return gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject()))
        .pipe(babel())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('release'));
});

我的入口点的前几行，我得到了错误：

打字稿：

import { AsyncSubject } from 'rxjs/AsyncSubject';
import { Observable }   from 'rxjs/Observable';

转译的 Javascript：

"use strict";

var AsyncSubject_1 = require('rxjs/AsyncSubject');
var bid_update_service_1 = require('./bid-update.service');
var bid_factory_1 = require('../factories/bid.factory');

提前感谢您的帮助！

【问题讨论】：

标签： javascript node.js typescript configuration gulp

【解决方案1】：

当我第一次将 typescript 集成到我的项目时，这个错误让我很沮丧，但这是由于你没有为 TS 包括正确的类型（类型定义文件 file.d.ts）。

要解释 TS 是 JS 的超集，因为它是一个超集，它要求您定义允许 TS '了解'您用于创建 typescript 编译时错误的包的包。例如，这是一个非常基本的例子；如果你有 let foo: string 并且你传入一个数字而不是 foo = 1，那么当 gulp 尝试编译 TS 时你会得到一个错误。您将在编译时收到的错误是类型定义文件用于为非类型化 JS 文件提供“类型”的内容。

注意：即使您收到这些错误，该文件也应该编译为 JS，并且只要您没有错误，您的文件应该可以与您的构建一起使用。尽管如果您继续使用 ts 输入错误，最好只使用 JS

如果您还没有这样做，您应该关注并熟悉Typings Doc。在您的计算机上全局安装类型，然后通过查找您需要的类型来定义您需要的类型。

例如，您将安装以下内容：

# Install typings library using npm    
npm install typings -g 

# Search the typings repositories for the one you want
# rxjs = your module 
typings search rxjs

# Choose from the ones that are available and replace dt~mocha below
# dt~ = the source usually either dt or npm 
typings install dt~rxjs--global --save

以下内容应该已经创建了一个 typings.json 和 typings 文件夹，其中包含您在首次安装时下载的信息/文件。

关于键入定义文件我要注意的一点是，并非所有 js 库都可用。因此，您将需要：

完全重写你要TS的JS文件
等到其他人发布您想要的软件包
如果您愿意通过为您需要的模块创建类型定义文件 (d.ts) 来为类型社区做出贡献，我相信如果它尚不可用，许多人会很感激。

【讨论】：