如何将纯JS导入TypeScript(没有打字)

Question

我们在Webpack中有一个使用带有ts-loader的TypeScript的项目,对于我们现在使用的大多数东西,在Definitely Types(via typings)中有类型定义,但不是我们现在想要使用的那个:redux-auth.

起初我没有module在tsconfig.json中定义并通过它导入它

import { EmailSignInForm } from "redux-auth/bootstrap-theme"

结果Cannot find module.然后我们读到使用CommonJS表示法可能有所帮助,但它没有,因为TS不知道导入的模块(Property 'EmailSignInForm' does not exist on type '{}')的成员.使用相对路径也没有任何用处.

另外我在这篇关于TS 1.8的文章中读到它现在应该支持普通的JS文件,但是没有详细解释如何.allowJs已启用.

如何导入该模块？谢谢!

这是我们的webpack.config.js:

var webpack = require('webpack');
var fail = require('webpack-fail-plugin');

module.exports = {
  entry: './static/files/app/main.tsx',

  output: {
    path: './static/files/',
    filename: 'bundle.js',
    sourceMapFilename: '[file].map'
  },

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ]
  },

  devtool: 'source-map',

  plugins: [
    fail,
    new webpack.ProvidePlugin({
      //Promise: 'exports?global.Promise!es6-shim',
      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    })
  ]
};

我们的tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "allowJs": true,
    "noEmitOnError": true
  },
  "files": [
    "typings/browser.d.ts"
  ],
  "exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
  ]
}

("module": "commonjs"暂时测试CommonJS表示法)

更新:

好的,所以如果我declare var require: any使用相对路径require()我可以导入它,虽然我怀疑这是预期的方式.好玩,现在我从Webpack收到这条消息:

WARNING in ./~/encoding/lib/iconv-loader.js
Critical dependencies:
9:12-34 the request of a dependency is an expression
 @ ./~/encoding/lib/iconv-loader.js 9:12-34

ERROR in ./~/iconv-lite/encodings/tables/gb18030-ranges.json
Module parse failed: ./node_modules/iconv-lite/encodings/tables/gb18030-ranges.json Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.

Answer 1

# declarations.d.ts
declare module '*';

# someFile.ts
import * as $ from 'jquery';
import * as _ from 'lodash';

如果你有一个模块的类型，代码完成应该可以工作，编译器会假设你知道你在做什么。我认为 ts loader 也应该尊重这一点。请测试并告诉我。