业力，打字稿定义文件未加载答案

【问题标题】：Karma, Typescript definition file not loading业力，打字稿定义文件未加载
【发布时间】：2018-02-04 08:21:38
【问题描述】：

我正在使用 karma、webpack 和 typescript 设置开发环境，但是我遇到了 karma 没有在测试中应用自定义定义文件的问题。

这是我的项目文件结构：

// file structure
project/
    config/
        karma.conf.js
    tests/
        test-files.ts 
        ...        
    src/
        tsdefinitions.d.ts
        other-ts-files.ts
        ...
    tsconfig.json

这里是与 webpack 和 typescript 相关的 karma 配置部分

webpack: {
  devtool: 'eval-source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [{
      test: /\.tsx?$/,
      loader: 'awesome-typescript-loader'
    }]
  }
},
webpackMiddleware: {stats: 'errors-only'},
mime: {'text/x-typescript': ['ts','tsx']},
basePath: '../',
files: [{
  pattern: './test/**/*.ts',
  watched: false
}],
preprocessors: {
  './test/**/*.ts': ['webpack', 'sourcemap']
}

最后是 tsconfig.json

{
  "compilerOptions": {
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "module": "commonjs",
    "target": "es2015",
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"]
    },
    "exclude": ["node_modules"],
    "files": [
      "src/**/*.ts"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
    "useCache": false,
    "useBabel": true,
    "babelOptions": {
      "presets": [
        "es2015",
        "stage-0"
      ]
    }
  }
}

我正在像这样运行业力测试

./node_modules/.bin/karma start ./config/karma.conf.js

现在，当我使用 karma 构建项目文件时，一切正常，它们构建时没有错误。

但是当我运行测试构建时，会出现很多缺失 tsdefinitions.d.ts 文件中声明的窗口界面属性的错误。

【问题讨论】：

我也遇到了同样的问题，在网上搜索了2个小时都没成功，请问您找到解决方案了吗？
我当前使用的解决方法是在通过karma 使用时将awesome-typescript-loader 设置为transpileOnly。
你在用atl提供的paths插件吗？
我对 karma + typescript + webpack 中的自定义类型声明没有任何问题。你能给出一个缺少的声明接口的示例吗？
隐藏的依赖项出现了哪些错误？如果您缺少 windows 文件，这可能是一个更容易找到并可能解决问题的问题。

标签： typescript webpack karma-runner tsconfig

【解决方案1】：

我已经能够通过将我的类型与我的源文件放在一个单独的文件夹中来实现这一点，并使用typeRoots 字段将其包含在tsconfig.json 中。

我的tsconfig.json：

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "./@types"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/**/*.test.ts"
  ]
}

karma.config.js：

const webpackConfig = require("./webpack.test");

module.exports = function(config) {
  config.set({
    basePath: "",
    frameworks: ["mocha", "chai"],
    plugins: [
      "karma-chai",
      "karma-chrome-launcher",
      "karma-mocha",
      "karma-mocha-reporter",
      "karma-sourcemap-loader",
      "karma-webpack"
    ],
    files: [
      "src/**/*.test.ts"
    ],
    exclude: [],
    webpack: webpackConfig,
    preprocessors: {
      "**/*.ts": ["webpack", "sourcemap"]
    },
    mime: { "text/x-typescript": ["ts", "tsx"] },
   ...
  });
};

现在我可以为没有任何类型的模块定义类型，例如：
@types/universal-url/index.d.ts:

declare module 'universal-url' {
  export {URL, URLSearchParams} from 'whatwg-url' 

  export function shim(): void
}

还有我的src/utils/parseUrl.ts 文件：

import { URL } from 'universal-url'

export function parseUrl(url: string) {
  return new URL(url)
}

同样，关键是tsconfig.json 的 typeRoots 字段。这是文档：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

【讨论】：