如何使用vs2017rc创建aurelia typescript项目 [英] How to create aurelia typescript project with vs2017rc

问题描述

我是aurelia的新手，我需要创建一个框架的原型项目。一开始，我计划使用skeleton-typescript-aspnetcore骨架，但是当我尝试使用vs2017rc时，我发现它使用.csproj作为默认格式（而vs2015是project.json / .xproj），我想我们应该遵循vs2017因为我们将在启动后升级我们的IDE。

I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.

vs2017有一个升级.xproj项目的向导，但升级后（skeleton-typescript-aspnetcore），我前面还有很多错误......

The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...

我也试过aurelia-cli，但似乎还没有支持vs2017，有没有人可以给出一个指南来创建原型项目？我将集成一些插件，如上面提到的骨架，如gulp，karma，breeze ......

I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...

提前谢谢。

推荐答案

由于Visual Studio 2017刚推出，我想我会回答我是如何解决这个问题的，因为使用skeleton-typescript-aspnetcore时仍有很多错误。

Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".

使用 https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 作为起点，这些是让它运行的步骤：

Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:

当您第一次运行项目时，您会收到错误，抱怨/ test /中的某些文件不在rootDir下。在你的tsconfig.json中，rootDir被定义为src /，这可以通过在src文件夹中移动你的测试文件夹来解决。这将导致新错误，因为这些文件中定义的路径现在已更改。您需要编辑app，child-router和用户导入，如下所示：
从'../../ users'导入{Users}; IntelliSense应该帮助你。

When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this: import {Users} from '../../users'; IntelliSense should help you out here.

命令 gulp test 在更改为新路径之前也不会运行，你可以更改karma.conf.js中的路径：

The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:

files: [
  'src/test/unit/setup.ts',
  'src/test/unit/*.ts'
],

接下来，文件users.ts将抛出错误，如类型'响应'不能分配给'any []'。您需要告诉TypeScript您要声明的内容如下： public users：Object = []; 或者只是： public users = {};

Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};

最后一个问题是，在撰写本文时，您将会遇到很多重复的标识符错误似乎来自TypeScript版本2.2.1带来的变化。我不知道具体打破了什么，但我知道之前的2.1.5版本仍然有效。所以你需要做的是在你的src / skeleton目录中运行 npm install typescript@2.1.5 --save ，--save只是为了更新你的包。 json文件，如果你愿意，也可以在以后自己完成。

The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript@2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.

完成后你应该解决你的gulp错误（其中20个） 。但是仍然存在由重复签名引起的一些错误。同样，在TypeScript 2.0+中已经发生了变化，现在有一种获取和使用声明文件的简化方法。以下是关于如何使用@types功能的答案：如何使用我应该将@types与TypeScript 2一起使用，但要保持简短和甜蜜，您必须转到tsconfig.json文件并明确告知在哪里可以找到@ types / node文件夹。它看起来像这样：

After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the @types feature: How should I use @types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the @types/node folder. It would look something like this:

"compilerOptions": {
...
"typeRoots": [
   "node_modules/@types"
],
"types": [ "node" ]
...
},

希望这会有所帮助，通过这些更改，项目现在应该构建并正确启动。

Hope this helps, with these changes the project should now build and launch correctly.

编辑：
我最近在构建项目时遇到了一些问题。我再次获得了很多重复的标识符......但是我在SO上遇到了这个答案： TypeScript会抛出多个重复的标识符

显然，TypeScript最新版附带了开箱即用的提取定义，因此我能够运行命令从链接中的答案：

Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:

npm uninstall @types/whatwg-fetch

从typescript 2.1.5升级到最新版本：

And upgrading from typescript 2.1.5 to latest:

npm install typescript --save

您甚至可能希望通过追加<$ c来全局安装打字稿$ C> -g 。
除非你从 typings.json globalDependencies注释掉/删除url和whatwg-fetch以防止它重新创建，否则这将继续存在问题：

You might even want to install typescript globally by appending -g. Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:

 "globalDependencies": {
    //"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
    //"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
  }

然后你可以删除typings文件夹，再次运行 typings install 或编辑索引。 d.ts在typings文件夹中并删除whatwg-fetch和url的引用路径。
希望这可以帮助那些即使在修复之后也可能遇到同样问题的人。

Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url. Hope this helps someone who might've encountered the same problems even after "fixing" it.

这篇关于如何使用vs2017rc创建aurelia typescript项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！