typescript - 使用 Visual Studio Code 设置打字稿的问题

Question

背景

我是 nodejs/typescript/VisualStudio Code 的新手，并试图使用 express & sequelize-typescript 创建一个小项目。我用 Visual Studio（不是代码）开始了这个项目，但是遇到了很多错误错误或没有出​​现错误的问题，所以我切换到了 Visual Studio Code。我不再确定 Visual Studio（非代码）是否自行安装了 nodejs 或/以及我是否安装了一个额外的。但我知道我在 PATH 变量中有一个 npm。

ts-nameof

然后在这个项目中，我需要做一个查询来使用 order by，所以不是硬编码列名或使用安全字符串名称（我讨厌字符串！）我发现了 ts-nameof。

所以我按照说明进行操作：

• npm i ttypescript -D
• 在 tsconfig.json 中添加插件 compilerOptions
• 添加配置“typescript.tsdk”

当事情变得疯狂时

• ttypescript 不会安装，因为我没有 typescript（嗯？）所以让我们安装它：npm i typescript
• 现在让我们使用 nameof() 方法！Hum Visual Studio Code 告诉我它找不到它。所以我加了

“node_modules/ts-nameof/ts-nameof.d.ts”

在 tsconfig.json“文件”属性中。是的，它有效！

• 不要让我们运行任务“tsc：watch - tsconfig.json” - 是的，它编译！

ReferenceError: nameof 未定义

但运行时不喜欢它......

• 在查看终端时，它仍然使用 tsc 而不是 tscc，所以据我了解，我必须配置 tasks.json，所以让我们开始吧！Visual Studio 确实使用 build/watch 为我生成了一个基本文件。我刚刚添加了命令/类型属性。（参考文件见文末）

其他用户的奖励：

• 如果您看到错误

  终端进程以退出代码终止：2

可能是因为您使用的是仅适用于 linux/osx 的 nodes_modules/npm/ttsc（我不知道它是否可以在带有 linux 嵌入式设备的 Windows 10 上运行）

• 还安装 ttypescript global 可能不是一个好主意，因为它会将其安装在您的用户目录中，并且您不能在 tasks.json 中使用 %AppData%，因此您必须使用完整路径，例如 C:\Users\0xcdcdcdcd \AppData\漫游...

对你不利的任务

• 让我们通过运行“node_modules.bin\ttsc.cmd”任务来编译一次——终于！

顺便说一句：我对这个文件还有其他问题，请参阅 tasks.json 注释的底部...

• 现在让我们为每个任务添加标签 - 现在我可以看到这两个任务而不是唯一的“node_modules.bin\ttsc.cmd”。什么，它现在正在使用 tsc ！？

问题/问题

• 在做这一切的同时，我试图用谷歌搜索我的许多问题，但没有成功。我有点担心我遇到的所有问题，为什么我找不到任何东西？好吧，也许任何人都没有使用 ttypescript，但是我对 tasks.json 的所有问题......？

我在使用 Visual Studio（不是代码）搜索 typescript/nodejs 时遇到问题，因为每个人都在使用 Visual Studio 代码......所以我这边肯定有问题。

• 也许使用 ts-nameof 以外的东西（这导致我使用 ttypescript）是一个更好的主意？如果这不是一个好的选择，你会推荐我什么。

• 我仍然需要弄清楚如何配置“监视”任务运行以及如何在 tasks.json 中有 2 个任务......

• 继续阅读我遇到的其他问题，例如“typescript.tsdk”或“problemMatchers”选项。

文件

.vscode/tasks.json：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "windows": {
        "command": "node_modules\\.bin\\ttsc.cmd",
        "type": "shell"
    },
    "tasks": [
        {
            //"label": "ttsc: watch",
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ]
        },
        {
            //"label": "ttsc: build",
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ]
        }
    ],
    "problemMatchers": [
        "$tsc"
    ]
}

Visual Studio Code 似乎与这个文件无关，从文档中我应该能够在“任务”对象中使用命令/类型（我认为是“windows”），它不会让我离开。

此外，当使用此文件运行我的任务时，Visual Studio Code 会询问我问题匹配器并将此属性添加到 tasks.json 的根目录中。

编辑：我也尝试在任何地方填充命令/类型属性（在根目录中，在我的所有任务中，在“窗口”中（在根目录和我的所有任务中）。

.vscode/settings.json（工作区）

{
    "files.exclude": {
        "node_modules": true,

        // visual studio project
        "obj": true,
        "bin": true
    },

    // ts-nameof
    "typescript.tsdk": "node_modules/ttypescript/lib"
}

我确实在用户设置中添加了“typescript.tsdk”以防万一。但我可以在这个领域写任何东西，没关系我永远不会出错。

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "sourceMap": true,
    "noImplicitAny": true,
    "outDir": "dist",
    "baseUrl": "./dist/",
    "plugins": [{ "transform": "ts-nameof", "type": "raw" }],

    // for sequelize-typescript models
    "experimentalDecorators": true,
    // for sequelize-typescript
    "emitDecoratorMetadata": true
  },
  // Also part of experimentalDecorators
  "include": [
    "."
  ],
  "exclude": [
    "node_modules",

    // VisualStudio project
    "obj",
    "bin"
  ],
  "files": [ "node_modules/ts-nameof/ts-nameof.d.ts" ]
}

标签： typescriptvisual-studio-codevscode-settings

Answer 1

I still have no clue of what going on but the tasks.json syntax I read about seem to be the basic one and languages extend it hence why type could by typescript and contains a property like tsconfig. Unfortunately I didn't find the syntax for typescript.

I end up creating the shell tasks like so :

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "ttsc: watch",
            "type": "shell",
            "windows": {
                "command": "node_modules\\.bin\\ttsc.cmd",
                "args": [
                    "--watch", "-p", "tsconfig.json"
                ],
            },
            "problemMatcher": [
                "$tsc-watch"
            ]
        },
        {
            "label": "ttsc: build",
            "type": "shell",
            "windows": {
                "command": "node_modules\\.bin\\ttsc.cmd",
                "args": [
                    "-p", "tsconfig.json"
                ],
            },
            "problemMatcher": [
                "$tsc"
            ]
        }
    ]
}