带有 TypeScript 的 Nodejs 给出了奇怪的错误

Question

我正在使用 TypeScript 1.5.0-beta，我正在使用 Visual Studio Code 使用 Anders Hejlsberg 在构建时展示的示例创建一个简单的节点服务器。

///<reference path="typings/node/node.d.ts"/>

import { createServer } from "http"

export function simpleServer(port: number, message: string)
{
  createServer((req, res) =>
  {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
  }).listen(port, '127.0.0.1');

  console.log('Server running at http://127.0.0.1:1337/');
}

我有三个问题

1) 使用此代码，每当我尝试使用 Visual Studio Code 或命令 $ tsc server -m commonjs 构建 ts 文件时，它都会不断给出类似这样的奇怪错误

error TS1008: Unexpected token; 'module
, class, interface, enum, import or statement' expected

2) 它还尝试构建我正在引用的 node.d.ts 文件并提供额外的“：”预期错误消息。

3) 这更像是一个 Visual Studio Code 问题。我们如何让 VS Code 构建项目/文件夹中的所有 ts 文件并生成 js 文件。 我按照 VS Code 的打字稿设置说明进行操作，但我仍然必须单独构建每个 ts 文件以生成 js 代码。

我知道 grunt 是一种方法，但据我所知，VS Code 应该能够像 Visual Studio 那样在文件夹中构建所有 ts 文件。如果我错了，请纠正我。

谢谢。

Answer 1

我无法帮助您解决 #3，因为我还没有完全尝试过 VS Code。但是，在 #1 和 #2 上，您需要做几件事：

A.) 在 Typescript 编译器上启用 CommonJS 模块类型。在 Visual Studio 中，您可以通过转到 Project --> Properties --> Typescript Build，并将“Module system”更改为“CommonJS”来完成此操作。在命令提示符下，您可以通过将参数“-module commonjs”传递给 tsc.exe 来执行此操作。抱歉，我不知道如何在 VS Code 中实现这一点。

B.) 我认为示例代码应该是这样的。我不确定 Anders 是否会在会议上对未来的语法进行预览，但以下内容应该对你有用：

///<reference path="typings/node/node.d.ts"/>

import Http = require('http')

export function simpleServer(port: number, message: string)
{
    Http.createServer((req, res) =>
    {
        res.writeHead(200, { 'Content-Type': 'text/plain' });
        res.end('Hello World\n');
    }).listen(port, '127.0.0.1');

    console.log('Server running at http://127.0.0.1:1337/');
}

Answer 2

1 - 模块错误

这将在您移至下面#3 下的 tsconfig.json 时解决

2 - 参考错误：

引用的语法应该是

import http = require('http');

3 - 自动编译ts文件到js

1. 使用您的设置配置 tsconfig.json 文件
2. （可选）在 Visual Studio Code 中开启自动保存功能
3. 在 Visual Studio Code 中配置任务
4. 在 TypeScript 编译器中使用监视功能

这里是 tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "target": "ES5",
        "sourceMap": true,
        "outDir": "../dist"
    }
}

这是一个已定义的任务 .settings/tasks.json --p 指定要通过 tsconfig.json 进行编译 --w 指定要在保存文件时重新编译 可以参考编译选项here

{
    "version": "0.1.0",
    // The command is tsc.
    "command": "tsc",
    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",
    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },
    // args is the HelloWorld program to compile.
    "args": ["--p", "./PATH-TO-TSCONFIG-FOLDER", "--w"],
    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

Node + TypeScript = 太棒了！

Answer 3

好的，我终于能够弄清楚发生了什么。由于我安装了 Visual Studio 2013 和 TypeScript 1.4，它在 C:/Program Files (x86)/Microsft SDKs/TypeScript/1.0 下创建了文件。因此，每次我使用 tsc 命令时，它总是默认为 1.0.3.0 版本，它适用于 TypeScript 1.4 而不是 1.5.0-beta。当我通过节点安装 TypeScript 1.5.0-beta 时，它在 C:\Users\Krishna V\AppData\Roaming\npm\tsc

下创建了新版本的文件

因此，对于#1，为了修复编译版本问题，我更改了 task.json 文件以使用命令和 Windows 选项的完整路径。所以，它看起来像这样

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "C:\\Users\\Krishna^ V\\AppData\\Roaming\\npm\\tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "C:\\Users\\Krishna^ V\\AppData\\Roaming\\npm\\tsc"
    },

    // args is the HelloWorld program to compile.
    "args": [],

    "isShellCommand": true,

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

对于#2，Node.d.ts 与 TypeScript 1.5.0-beta 不同步似乎是一个已知问题，并且在 git 中为此打开的 react.d.ts 已经存在类似问题。

对于 #3，tsconfig.json 仅适用于 TypeScript 版本 1.5.0-beta，并且由于 tsc 使用了错误的版本，因此它从未使用 tsconfig。现在它使用了正确的版本，它使用了 tsconfig，因此它构建了 tsconfig 中提到的所有文件。例如，其中任何一个（带有 ES5 和 ES6 的）

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true,
        "removeComments": true
    },
    "files": [
        "server.ts","config.ts","models/user.ts"
    ]
}

OR 

{
    "compilerOptions": {
        "target": "ES6",
        "sourceMap": true,
        "removeComments": true
    },
    "filesGlob": [
        "./**/*.ts"
    ]
}

在这种情况下，它将编译第一个选项中提到的三个文件或选项2中的所有ts文件。