Tuesday, October 10, 2017

Creating SharePoint App/Addin with TypeScript

Typescript language provides strong types, interfaces, and extensible classes that bring common object oriented programming concepts and techniques into JavaScript development.

The TypeScript compiler produces a JavaScript file from a source file with a .ts extension.

Here i am starting with a very simple Sharepoint App. It's just a concept which will help to how to run your app with Typescript. No any Typescript code is involved in this.

1. Create a New Sharepoint App using visual studio ("Hello User Name App")

2. Go to the Solution Explorer Select the app solution, Do the right click on it and Select Unload       Project. Once the project is unloaded do the right click again and click on Edit Project

3. Add the below lines bofore closing of </Project> tag and Save it.

<PropertyGroup>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />

4. Reload the Project by doing the Right click on it.

5. Now you need to install "sharePoint.Typescript.DefinitelyTyped" and "jquery.Typescript.DefinitelyTyped". For this do the right click on the solution and Select "Manage NuGet Packages..". In the NuGet Window search for the sharePoint.Typescript.DefinitelyTyped, jquery.Typescript.DefinitelyTyped and install it.

6. Now we have all the prereqisite added with the project.

7. Expand the Solution and go in Script folder. Rename App.js with some other name and add App.ts. Copy all the script from App.js and paste it into App.ts.

8.Add these line on the App.ts file
///<reference path="typings/sharepoint/SharePoint.d.ts" />
///<reference path="typings/jquery/jquery.d.ts" />

9. Build the Project

10. Click on Show All files from the Solution Explorer. You will get App.js and App.js.map. Just include them.

11. Deploy the App

No comments:

Post a Comment