javascript - 如何配置 Typescript 使其 "knows about"我的 SystemJS 路径？

Question

目前我必须使用相对路径导入模块:

import {UserService} from "../../../services/user-service";

但是，我宁愿配置 SystemJS，以便解析从应用程序的根目录开始，除非模块路径以 ./ 开头，然后我可以执行此操作(services 位于根目录):

import {UserService} from "services/user-service";

如果我想从当前位置导入文件:

import {Something} from "./something";

我可以使用 SystemJS 配置第一部分:

System.config({
    defaultJSExtensions: true,
    transpiler: false,
    paths: {
        "*": "dist/*",
        "services": "dist/services/*",
        "models": "dist/models/*",
        "github:*": "jspm_packages/github/*",
        "npm:*": "jspm_packages/npm/*"
    },
    // ...
}

但是...

1. 我不确定如何让 Typescript 知道我的 SystemJS.paths 配置，并且
2. 我不知道如何将 SystemJS 配置为“默认从根目录加载内容”。

Answer 1

一种解决方案是在 SystemJs 中配置一个包并为 typescript 添加路径映射。

您可以通过在 services 目录下添加一个 index.ts 文件来完成此操作，例如:

export { UserService } from './user-service';
export { OrderService } from './order-service';
...

将以下内容添加到您的 SystemJs 配置中(请参阅: SytemJS config-api ):

SystemJS.config({
  ...
  packages: {
    "services": {
      "main": "index.ts"
    }
  }
});

将此添加到 tsconfig.json(参见:Typescript module resolution):

{
  "compilerOptions": {
  {
    ...
    "moduleResolution": "Node",
    "baseUrl": ".",
    "paths": {
      "services": [ "services" ]
    }
  }
}

现在您可以导入如下文件:

import { UserService } from 'services';

这将在 Visual Studio 中提供智能感知并允许在浏览器中加载模块。