如何使用 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 文件夹中来解决.这将导致新的错误，因为这些文件中定义的路径现在已更改.您需要像这样编辑应用程序、子路由器和用户导入:import {Users} from '../../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 将抛出诸如 Type 'Response' is notassignable to type '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 只是更新你的 package.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.

完成后，应该解决您的吞咽错误(其中 20 个).但是仍然存在一些由重复签名引起的错误.同样，在 TypeScript 2.0+ 中事情发生了变化，现在有一种简化的方式来获取和使用声明文件.这是关于如何使用@types 功能的答案:How我应该将 @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 抛出多个重复标识符

I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers

显然，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

您甚至可能希望通过附加 -g 来全局安装 typescript.此外，除非您从 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 或编辑typings 文件夹中的index.d.ts 并删除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屋！