如何使用多个tsconfig文件？

时间：2016-06-01 22:42:37

标签： typescript visual-studio-code tsconfig

我正在使用Visual Studio Code并且有一个相当常见的项目结构：

public static class M2SA : InterviewQuestion

这两个tsconfig文件有不同的设置（例如├── client/ │ ├── tsconfig.json ├── shared/ ├── server/ │ ├── tsconfig.json ├── project.json 目标ES5下的那个，client/目标ES6下的那个。

问题是我希望共享目录包含在两个项目中。我无法使用tsconfig执行此操作，因为server/选项不允许我包含比tsconfig.json更高的目录中的文件夹，并使用exclude我必须不断保留列表文件是最新的，因为它不支持globs。

请注意，我可以通过将共享文件夹添加到tsc中来编译，我想要的是Visual Studio Code IDE识别智能感知的共享代码等。

是等待filesGlob的唯一选择吗？

6 个答案:

答案 0 :(得分：9)

我在这里回答：tsconfig extension answer

答案的要点：

您可以通过扩展基本tsconfig.json文件来完成此操作：

tsconfig extension

只是不排除基础tsconfig.json中的目录，打字稿应该能够解决你的打字（使用node_modules / @ types或者typings模块知道这是真的）

例如：

CONFIGS / base.json：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

tsconfig.json：

{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

tsconfig.nostrictnull.json：

{
   "extends": "./tsconfig",
   "compilerOptions": {
     "strictNullChecks": false
   }
}

答案 1 :(得分：4)

对根使用单个tsconfig.json。然后将其扩展到每个项目（后端tsconfig.server.json，前端tsconfig.webpack.json）。

  • 根tsconfig.json include: ['src']以确保在IDE中对所有文件进行类型检查
  • 后端tsconfig.server.json exclude: ['src/app']前端文件
  • 前端：tsconfig.webpack.json exclude: ['src/backend']后端文件

文件夹结构

├── src/
│   ├── app/    < Frontend
│   ├── server/ < Backend
│   ├── common/ < Shared
├── tsconfig.json
├── tsconfig.server.json
├── tsconfig.webpack.json

配置文件

tsconfig.json 

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "src"
  ]
}

tsconfig.server.json 

{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/app"
  ]
}

tsconfig.webpack.json 

{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/server"
  ]
}

更多

Example lesson

答案 2 :(得分：0)

  

是等待filesGlob的唯一选择吗？

最佳选择：

  • 只需使用一个tsconfig.json并且仅使用捆绑（使用类似webpack的内容）client中的文件（webpack将获取对共享的引用）。

这是我在这里使用的工作流程https://github.com/alm-tools/alm（单个tsconfig.json https://github.com/alm-tools/alm/blob/master/src/tsconfig.json）

此工作流程也包含在alm设计文档中：https://basarat.gitbooks.io/alm/content/contributing/

答案 3 :(得分：0)

VSCode的新版本支持Typescript 2，添加此项后，使用include选项在tsconfig.json中添加了对globs的支持。见http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

答案 4 :(得分：0)

正如其他人所提到的，如果前端和后端具有不同的类型，则现有的答案无法解决问题-几乎在每种情况下，因为前端代码支持dom而后端代码不支持

。

拥有最高级别的tsconfig.json意味着dom代码会在前端代码中显示为错误（如果dom是lib），或者dom代码会显示为允许在后端代码中使用（如果省略了dom）。

这是一个可行的解决方案：

文件夹结构

我们的项目通常是“默认情况下是后端”，带有用于前端代码的特定文件夹。

├── src/
│   ├── frontend/ < Frontend
│   │     ├── `tsconfig.json` (extends frontend framework defaults, eg Svelte)
│   ├── http/ < Backend
│   ├── events/ < Backend
├── tsconfig.json `tsconfig.json` (backend tsconfig)

后端tsconfig.json

这通常很小。我们使用jest进行测试，并使用es2019 JS stdlib。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "outDir": "dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["es2019"],    
    "types": ["jest"],
  },
  "exclude": [
    "node_modules",
    "public/*",
    "src/frontend/*"
  ],
  "include": ["src/**/*"]
}

前端tsconfig.json

这是针对Svelte的，但在较旧的框架中也可以类似地工作。前端具有不同的类型，因为它支持.svelte文件和dom 

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    // Default included above is es2017
    "target": "es2019",
  },
  "lib": ["es2019", "dom"],
}

前端特定工具

使汇总使用单独的tsconfig文件：


export default {
  input: ...
  output: ...
  plugins: [
    ...
    typescript({
      tsconfig: "src/frontend/tsconfig.json",
      sourceMap: isDevelopment,
      inlineSources: isDevelopment,
    }),
    ...
  ],
   ...
};

答案 5 :(得分：-1)

作为另一个变体，将npm与下次运行绑定

<div class="row">
  <div id="middlecolumn" align="center">
    <table class="table">
      <thead>
        <tr>

          <th id="tabletext">
            <?php echo $lang['send']; ?>
          </th>
          <th id="tabletext">
            <?php echo $lang['receive']; ?>
          </th>
          <th id="tabletext">
            <?php echo $lang['amount']; ?>
          </th>
          <th id="tabletext">
            <?php echo $lang['exchange_id']; ?>
          </th>
          <th id="tabletext">
            <?php echo $lang['status']; ?>
          </th>
          <th id="tabletext">
            <?php echo $lang['date_time']; ?>
          </th>

        </tr>
      </thead>
      <tbody>
        <?php
                                            $query = $db->query("SELECT * FROM bit_exchanges ORDER BY id DESC LIMIT 5000"); 
                                            if($query->num_rows>0) {
                                                while($row = $query->fetch_assoc()) {
                                                    ?>
          <tr>
            <td id="tabletext"><img src="<?php echo gatewayicon(gatewayinfo($row['gateway_send']," name ")); ?>" width="20px" height="20">
              <?php echo gatewayinfo($row['gateway_send'],"name"); ?>
            </td>
            <td id="tabletext"><img src="<?php echo gatewayicon(gatewayinfo($row['gateway_receive']," name ")); ?>" width="20px" height="20">
              <?php echo gatewayinfo($row['gateway_receive'],"name"); ?>
            </td>
            <td id="tabletext">
              <?php echo $row['amount_send']; ?>
              <?php echo gatewayinfo($row['gateway_send'],"currency"); ?>
            </td>
            <td id="tabletext">
              <?php echo cropexchangeid($row['exchange_id'],8); ?>
            </td>
            <td id="tabletext">
              <?php 
                                        if($row['status'] == "1") {
                                            echo '<span class="label label-warning"><i class="fa fa-clock-o"></i> '.$lang[status_1].'</span>';
                                        } elseif($row['status'] == "2") {
                                            echo '<span class="label label-warning"><i class="fa fa-clock-o"></i> '.$lang[status_2].'</span>';
                                        } elseif($row['status'] == "3") {
                                            echo '<span class="label label-info"><i class="fa fa-clock-o"></i> '.$lang[status_3].'</span>';
                                        } elseif($row['status'] == "4") {
                                            echo '<span class="label label-success"><i class="fa fa-check"></i> '.$lang[status_4].'</span>';
                                        } elseif($row['status'] == "5") {
                                            echo '<span class="label label-danger"><i class="fa fa-times"></i> '.$lang[status_5].'</span>';
                                        } elseif($row['status'] == "6") {
                                            echo '<span class="label label-danger"><i class="fa fa-times"></i> '.$lang[status_6].'</span>';
                                        } elseif($row['status'] == "7") {
                                            echo '<span class="label label-danger"><i class="fa fa-times"></i> '.$lang[status_7].'</span>';
                                        } else {
                                            echo '<span class="label label-default">'.$lang[status_unknown].'</span>';
                                        }
                                        ?>
            </td>
            <td id="tabletext">
              <?php echo date("d/m/Y H:i:s",$row['created']) ?>
            </td>
          </tr>
          <?php
                                                }
                                            } else {
                                                echo '<tr><td colspan="5">'.$lang[still_no_exchanges].'</td></tr>';
                                            }
                                            ?>
      </tbody>
    </table>
  </div>
相关问题
最新问题