结合ASP.NET v5使用TypeScript


与ASP.NET v5一起使用TypeScript需要你用特定的方式来设置你的工程。
更多关于ASP.NET v5的详细信息请查看ASP.NET v5 文档
在Visual Studio的工程里支持当前的tsconfig.json还在开发之中,可以在这里查看进度#3983

工程设置

我们就以在Visual Studio 2015里创建一个空的ASP.NET v5工程开始,如果你对ASP.NET v5还不熟悉,可以查看这个教程

新创建一个空的工程

然后在工程根目录下添加一个scripts目录。
这就是我们将要添加TypeScript文件和tsconfig.json文件来设置编译选项的地方。
请注意目录名和路径都必须这样才能正常工作。
添加tsconfig.json文件,右键点击scripts目录,选择AddNew Item
Client-side下,你能够找到它,如下所示。

在 Visual Studio 里添加'tsconfig.json'文件

A project in Visual Studio's Solution Explorer

最后我们还要将下面的选项添加到tsconfig.json文件的"compilerOptions"节点里,让编译器输出重定向到wwwroot文件夹:

"outDir": "../wwwroot/"

下面是配置好tsconfig.json后可能的样子

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "../wwwroot"
    }
}

现在如果我们构建这个工程,你就会注意到app.jsapp.js.map文件被创建在wwwroot目录里。

构建后的文件

工程与虚拟工程

当添加了一个tsconfig.json文件,你要明白很重要的一点是我们创建了一个虚拟TypeScript工程,在包含tsconfig.json文件的目录下。
被当作这个虚拟工程一部分的TypeScript文件是不会在保存的时候编译的。
在包含tsconfig.json文件的目录外层里存在的TypeScript文件不会被当作虚拟工程的一部分。
下图中,可以见到这个虚拟工程,在红色矩形里。

A virtual project in Visual Studio's Solution Explorer

保存时编译

想要启用ASP.NET v5项目的保存时编译功能,你必须为不是虚拟TypeScript工程一部分的TypeScript文件启用保存时编译功能。
如果工程里存在tsconfig.json文件,那么模块类型选项的设置会被忽略。

Compile on Save

Js中文网 – ts中文手册,JavaScript 教程, www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界