如何在 VScode 中设置打字稿？答案

【问题标题】：How to setup typescript in VScode?如何在 VScode 中设置打字稿？
【发布时间】：2017-02-18 07:46:28
【问题描述】：

我只关注 VS Code 打字稿配置。

https://code.visualstudio.com/Docs/languages/typescript

我已经设置了我的 tsconfig.json 像

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

和我的任务运行器

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "always",
    "problemMatcher": "$tsc"
}

我的 ts 代码

class StartUp {
    public static main(): number {
        console.log('Helle Workd');
        return 5;
    }
}
console.log('test');

StartUp.main();

由于某种原因，当我按 cmd + shift + B（构建）时，我在输出窗口中看不到任何输出。我确实看到了类似的错误

hello.ts(8,1): error TS2304: Cannot find name 'ddd'.

如果我在代码中随机添加 ddd 字符串。

有人可以帮我解决这个问题吗？非常感谢！

【问题讨论】：

生成的文件正常吗？也许你可以运行“tsc -p”。在控制台中。如果没有错误，该命令将不会输出任何内容。

标签： javascript typescript compiler-errors visual-studio-code

【解决方案1】：

命令“tsc -p”。如果编译没有错误并且生成所有已编译的 JavaScript/SourceMap 文件，则不会输出任何内容，因此您在 VSCode 的输出窗口中看不到任何内容。只需在控制台中键入并运行命令即可。

您可以添加选项“--diagnostics”以使命令输出一些信息。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", ".", "--diagnostics"],
    "problemMatcher": "$tsc"
}

输出：

Files:            2
Lines:        18225
Nodes:        73338
Identifiers:  24828
Symbols:      18969
Types:         4609
Memory used: 62579K
I/O read:     0.00s
I/O write:    0.01s
Parse time:   0.24s
Bind time:    0.12s
Check time:   0.54s
Emit time:    0.06s
Total time:   0.96s

另见http://www.typescriptlang.org/docs/handbook/compiler-options.html中的所有选项

【讨论】：

【解决方案2】：

设置应用结构设置基本 html npm 初始化——是的 npm install lite-server --save-dev npm install --save-dev typescript @types/node @types/jasmine @types/core-js 将脚本精简版添加到 package.json 中的脚本创建一个应用文件夹添加 app.js 创建 tsconfig.json 添加以下选项

{
 "compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"lib": ["es2015", "dom"]
 }
}

将以下内容添加到 package.json 文件中

{


"name": "Angular2",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": 
{

    "start": "concurrently \"npm run tsc:w\" \"npm run lite\"",

    "lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},

    "keywords": [],
"author": "",
 "license": "ISC",
 "devDependencies": 
{

    "@types/core-js": "^0.9.43",

    "@types/jasmine": "^2.8.2",

    "@types/node": "^8.0.53",

    "concurrently": "^3.5.1",

    "lite-server": "^2.3.0",

    "typescript": "^2.6.1"
  },


  "dependencies": 
{

    "types": "^0.1.1"

}

}

【讨论】：