Vue.Js 2.0 + TypeScript 2.0 + VS2015

[+Red King Subscriber²]

I do not use node or anything that complicated - before hand I just used boostrap and jquery. It is just that the code is getting to complicated.

 

Objective,

Setup project to easy develop a simple single page application using vuejs library (seems simple compared to angular - only one file).

 

Current setup,

1. ASP.MET MVC 4 Project (.NET 4.5.2)
2. TypeScript 2.0 installed (before today I was on 1.8) and configured in the csproj file (JSON configuration errored out when trying to publish - granted might be fixed in 2.0?)
3. Typings for bootstrap, jquery, and a few others installed via NuGet
4. TypeScript code goes to /src/ and outputs JS to /Scripts/
5. Definition files (d.ts) files go to /Scripts/typings/
6. vue and other libraries references in script tag in _Layout.cshtml

Here is the configuration file,

    <TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptTarget>ES6</TypeScriptTarget>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptOutDir>./Scripts</TypeScriptOutDir>
    <TypeScriptNoEmitOnError>true</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptNoImplicitAny>true</TypeScriptNoImplicitAny>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
    <TypeScriptModuleKind>CommonJs</TypeScriptModuleKind>

I actually need ES5 but...

 

Issue,

vue.TypeScript.DefinatelyTyped is outdated so I decided to see if there are newer definitions somewhere

So I used node package manager to pull down vue and found some seemingly up to date ones in /node_modules/vue/types and copied them to my project

 

These ones are a lot better. They are more complete and more complex. Intellisense by TS provider for VS15 does a much better job here.

There is one snag though - they are in a module. So the only way to use them in the TypeScript file is via import statement.

They don't work like the stuff in the /typings/ folder which just work implicitly or with a comment import.

 

TypeScript transpiles the import statement - doesn't get rid of it. Depending on the settings of the csproj file it is either an "import" statement or a "require" statement.

So obviously I am doing something wrong here - d.ts files do not have definitons.

 

I also need to the e6-promise package if I am going to target ES5, right?

 

How would you get TS type checking to work for this JS library in VS2015?

[pqt]

I don't work with TypeScript enough to know the answer to this (sorry) but one thing you should look at if you haven't already is Yarn for package management. It's a product of Facebook and a much better approach to package managing.

 

Best of luck with your project though and good call with Vue, I use it daily and I absolutely love it.