peterc
peterc

Reputation: 7843

Recommended way to add Typescript to an existing asp.net 4 Webforms project

I am working on quite an old asp.net 4.0 Webforms project in Visual Studio 2015.

I want to start using TypeScript instead of Javascript for some of the client side code. I have used TypeScript in other projects outside of Visual Studio (e.g. using Visual Studio Code, and the node tools such as npm, gulp etc)

Now, I am trying to see how to use the TypeScript in Visual Studio, and see quite a few conflicting posts, and various versions of TypeScript / VS referred to.

I have added a TypeScript file to VS, and VS reported it now supporting Typescript and added a few lines to the project file. A have also added the VS extension for Typescript (version 2)

I build my project and get the .js and .map files. The files are in CommonJS format so I need to either load these or convert using a some sort of bundling.

This is where I don't know where to go. Also, I have read conflicting reports on how to configure the Typescript (e.g whether or not Visual Studio will use a tsconfig.json file)

In non asp.net projects I have use gulp with the gulp-typescript browserify etc gulp plugins.

Do I do the same thing in my asp.net project, or is there some other way to bundle and convert the JS to browser usable code?

If I use the gulp method, I assume this then means I will now not be using the TS compiler installed via the Visual Studio plugin (so what is the point of this if it emits CommonJS formatted cod that I can't use in the browser?

Thanks in advance for any suggestions here!

Upvotes: 2

Views: 5488

Answers (1)

Sami
Sami

Reputation: 3800

Yes, Web forms can do TypeScript and Gulp. Below are some steps:

Configure npm Configuring Bower Configure Bootstrap and My CSS with Gulp Update the Master page Configure Gulp-Watch

A complete solution can be found here.

For TypeScript , Unless you have a .ts file created with "Add New Item" in your project, the option "TypeScriptCompile" on the "Build Action" of the file properties is not available and it raises an exception. After the first file is created, then you find this option and can manually set it to a .ts file.

The option "Typescript file" is not available in the "Add File" options unless you have a .ts file created with "Add New Item" in your project and you are in a "Scripts" folder (if you name differently the folder where you want to add this file, this option wont be available). Of course you can add a .ts file from "Add New Item".

Please read this SO thread Type Script Web Forms

Upvotes: 2

Related Questions