SharePoint Designer 2013 Workflows and POST REST API


Following on from my last post of using GET REST API in workflows, this post will show how you can create an item in a list using the POST REST API.

Creating a list Item using REST API.

Using the same list as before, on my SharePoint site, I have a list. The list is nothing special, it’s just an example of some data.

Title: String
Person: User field
Colour: Choice field

You wouldn’t do this in real world scenario, but my demo will demonstrate when you run the workflow on any item, it will just create a new item in the list.

A better real world scenario might be when an item is added to this list, some of the information needs to be copied and created in another list, or when an item is changed a workflow fires to copy the information to another list similar to a history list.

Creating the workflow

In SharePoint Designer, I have gone to my list, and created a new workflow.

  • First, we need to add a Dictionary Item. This is so we can create a header for our HTTP Call. Type in “Dictionary
    and then in the options to choose from select Build Dictionary.

    Click on “this”.

    A dialog will appear, and it is here we need to add two headers.
Name Type Value
accept String application/json;odata=verbose
content-type String application/json;odata=verbose

Click on Variable:dictionary, and create a new variable called Headers.

  • We need to create another Dictionary now, this is to store the “type”. When you create an item with REST API, you need to provide the __metadata with the ListItemEntityType. Typically this item is SP.Data.[ListName]Item. However, to be absolutely sure, you can use this REST API call in the browser to find out.

     

    https://<tenant>/sites/<Site>/_api/web/lists/getbytitle('	<listTitle>')/ListItemEntityTypeFullName
    
Name Type Value
type String SP.Data.DemoListItem

  • One more dictionary needs to be created, this is the RequestContent for the POST Call.
Name Type Value
__metadata Dictionary Variable:EntityType
Title String New Item
Colour String Blue
PersonId String Current Item:Created By (return field as: User Id Number)

When you create this, ensure that __metadata has 2 underscores in front of it.
All fields are the internal names.

User fields all have an Id field with it, in my case the Person field has a PersonId field, it is this that I set with another User Id.

Choice fields just accept a valid string.

Taxonomy fields are a little different, see section below.

  • Now we can call a HTTP web service. Underneath the dictionary, start typing “http” and press enter to insert Call HTTP Web Service.
    Click on “this” to open up the dialog box, and then click on the … for the string builder dialog box.

    I like to use as much dynamic values as possible so my URL in here looks like the following:

    [%Workflow Context:Current Site URL%]/_api/web/lists/getbytitle('[%Workflow Context:List Name%]')/items
    

    Set the HTTP method to HTTP POST.

    After entering the URL and setting the Method, click the dropdown at the far right on the line in SPD and select properties. Set the RequestHeaders to the Dictionary Variable:Headers you made in the first step. Set the RequestContent to the dictionary Variable:NewItemMetadata. Set the ResponseContent to a new variable, and the ResponseStatusCode to a new variable. Click OK.

    The ResponseContent will be populated with the results, and the ResponseStatusCode will be populated with Created if successful, or a different value if something went wrong.

  • After the Web service call, I add an If Statement, to test that the variable responseCode equals to Created.
  • I log success to the history list.
  • In the else statement of if “responseCode equals Created” I grab the error message from the ResponseContent dictionary and output the value to an error message. Then I display the error message in the history list. To grab the error the dictionary path is error/message/value

  • Don’t forget to Transition to Stage “End of Workflow” at the end.

Publish your workflow.

When I run the workflow against any list item, after a moment a new entry is added to the list.

Updating Taxonomy/managed metadata column in POST REST API calls.

To be able to update a Taxonomy column in a list you would need to create the following 2 dictionary’s first, then assign 2nd dictionary to the column.

TaxonomyMetadata Dictionary

Name Type Value
type String SP.Taxonomy.TaxonomyFieldValue

TaxonomyValue Dictionary

Name Type Value
__metadata Dictionary TaxonomyMetadata Dictionary
Label String <Label value>
TermGuid String <TermGuid>
WssId String -1

<Label Value> – the actual value of the taxonomy term
<TermGuid> – The guid of the taxonomy term found in the termstore.
The WssId can always be -1 as SharePoint can work that out itself, but it requires a value.

PostRequestContent

Name Type Value
__metadata Dictionary Variable:EntityType
Title String New Item
<TaxonomyColumnInternalName> Dictionary Variable:TaxonomyValue Dictionary

It is the final dictionary above that you would set in the web service call as the RequestContent.

SharePoint Designer 2013 Workflows and GET REST API


SharePoint Workflows have been around for a long time, and with Microsoft flow now firmly taking hold the need for SharePoint workflows might be less. However, I recently had to work with SharePoint Workflows and learnt a few things around using REST API and I wanted to share my knowledge.

Reading a list/Item using REST API.

On my SharePoint site, I have a list. The list is nothing special, it’s just an example of some data.

Title: String
Person: User field
Colour: Choice field

All I’m going to do in the workflow, is when it is run, it will grab the items in the list, and then display the results in the history list. The point of this demo is to show how to make REST API calls and grab/loop through data.

Creating the workflow

In SharePoint Designer, I have gone to my list, and created a new workflow.

  • First, we need to add a Dictionary Item. This is so we can create a header for our HTTP Call. Type in “Dictionary
    and then in the options to choose from select Build Dictionary.

    Click on “this”.

    A dialog will appear, and it is here we need to add two headers.
Name Type Value
accept String application/json;odata=verbose
content-type String application/json;odata=verbose

Click on Variable:dictionary, and create a new variable called Headers.

Because SPD is a pain, it has already created a variable called dictionary, if you click on Local Variables from the ribbon, you can delete this variable. This will ensure you keep only the variables you are using within your workflow and save confusion later. Always give your variables sensible names, just as if you were writing code.

  • Now we can call a HTTP web service. Underneath the dictionary, start typing “http” and press enter to insert Call HTTP Web Service.
    Click on “this” to open up the dialog box, and then click on the … for the string builder dialog box.

    I like to use as much dynamic values as possible so my URL in here looks like the following:

    [%Workflow Context:Current Site URL%]/_api/web/lists/getbytitle('[%Workflow Context:List Name%]')/items?$select=Title,Colour,Person/Title,Person/Name,Person/EMail&$expand=Person
    

    In the above API call I’m bringing back additional information about the Person from the person column. See at the end of this post about bringing back other information on a person column.

    After entering the URL, click the dropdown at the far right on the line in SPD and select properties. Set the RequestHeaders to the Dictionary you made in the first step. Set the ResponseContent to a new variable, and the ResponseStatusCode to a new variable. Click OK.

    The ResponseContent will be populated with the results, and the ResponseStatusCode will be populated with OK if successful, or a different value if something went wrong.

  • After the Web service call, I add an If Statement, to test that the variable responseCode equals to OK.
  • Now we want to grab the results. So now we will grab a dictionary item. Type “Get” and press enter to insert Get an Item from a Dictionary.
    Click “item by name or path” and type “d/results”
    Click “dictionary” and select “ResponseContent”
    Click “item” and create a new variable. This variable is a dictionary too that will contain the individual items. I’ve called mine DemoList.
  • We need to count the number of items in the new dictionary variable. I do this to ensure that we have returned items.
    Type “Count” and press enter to insert count items in a dictionary.

    Click “dictionary” and select variable “DemoList”.
    Can leave output Variable to count.

  • Put another If statement, and check that Count is greater than 0.
  • We now need to create a variable that will be our indexloop.
  • Add a loop with a condition. (Alternatively, we could have skipped the last step and added a “loop n times” instead).
    Set the condition to read. “The contents of this loop will run repeatedly while: Variable: indexloop is less than Variable: count

  • Now I’m going to get the values of Title, Colour, Person/Title and Person/Name from the DemoList dictionary.
    Type “Get” and press enter to insert Get an Item from a Dictionary
    Click “item by name or path” and type “([%Variable: indexloop%)/Title”

    Click “dictionary” and select “DemoList”
    Click “item” and create a new variable.

    Repeat this for all the parameters.

  • Still inside the loop underneath gathering the parameters we need to raise the index variable by one.
    Type “Calc” then press enter to insert Do Calculations
    Click first “value” and select the Variable: “indexloop”

    Click second “value” and set to 1.

    Set the output to a number variable. I called mine NewIndex

  • Now you need to set the variable NewIndex to indexloop.
  • Lastly, for demo purpose, I’m logging the results I’ve got to the history list. This logging to history lists is still within the loop.
    Type “Log” then press Enter to insert log to History List.
    Then I’m just logging out the variables I’ve captured.
  • Don’t forget to Transition to Stage “End of Workflow” at the end.

Publish your workflow.

When I run the workflow against any list item I see the following results in my History List.

Bringing back additional Person Data in REST API calls.

To bring back a person column data (or a lookup column), you need to expand it in a REST API call, you also need to include the values you want to bring back from the expanded column. A list of all possible values you can bring back for a user column can be found if you type the following in a browser (after already signing into SharePoint that is).

https://<tenant>/sites/<site>/_api/web/lists/getbytitle('<ListTitle>')/items(1)/<UserFieldInternalNameColumn>

*I’m using XV – XML Viewer chrome extension for the layout.

Hide your documents from Delve


Delve is a powerful tool to see and discover information that is likely to be interesting to you. You only see content that you have access to. The powerful search behind Delve uses the Microsoft Graph.

You can access Delve from the Waffle inside your Office 365, or by going directly to the URL https://delve.office.com and signing in with your 365 account.

Now you or someone else will only see a document if they have access to it. However, there might be a reason that you don’t want it to show up in Delve at all. To prevent a document showing up in delve you can create a HideFromDelve column of the type Yes/No in the library the document is in. The column creates a new crawled property within search schema called ows_HideFromDelve. This is automatically mapped to the HideFromDelve managed property. Set the column value to Yes for the document you do not wish to see in Delve.

Set the default value to No otherwise every document you create within the library will not show up in Delve (Unless this is the desire outcome).

SharePoint Online site keeps refreshing on Microsoft Edge


A weird thing started happening on my Microsoft SharePoint site yesterday. Every time I hit a page/site the browser continuously refreshed over and over. I had no problems if I did this in Chrome, or even Internet Explorer, only in Microsoft Edge. Originally I thought it was a problem with the site, because if I went to a different tenant I didn’t encounter the same issue.

So, I then booted up another pc that had Microsoft Edge on it, and viewed my site expecting it to refresh over and over, but it didn’t. Therefore, it seemed to be a problem with my Edge explorer.

I first tried to clear all settings. Clicking on the 3 ellipses and then select Settings > Clear browsing data. I ticked everything to be cleared, and then clicked Clear. Unfortunately, this didn’t work for me, and made my Edge explorer crash on opening.

Extreme measures were required. I needed to complete reset Microsoft Edge. Now if you are following these steps, I must warn you, you might lose your favourites, history and settings. I recommend that you create a full backup or create a system restore point. Although I didn’t bother with a system restore or backup. My favourites were still there afterwards, I’m not sure if this is a syncing thing between my devices though, as I’ve just noticed that my favourites are the same on two machines.

Fixing Microsoft Edge

  • Close all open Microsoft Edge browsers.
  • Open file explorer and navigate to the following location (You will need to show hidden files):
    • C:\users\<YourUserName>\AppData\Local\Packages
  • The folder called Microsoft.MicrosoftEdge_8wekyb3d8bbwe first right click it and select Properties, and remove the check from the Read-Only option, click Apply and then OK
  • Now try and delete the folder. If you get Access Denied prompts, just select Continue. Any files you cannot delete just skip for now.
  • Go inside the Microsoft.MicrosoftEdge_8wekyb3d8bbwe folder and try deleting any remaining folders, you might be not able to delete the AC folder.
  • Restart your computer.
  • Now we are going to obtain the Microsoft Edge package and reregister it. Open Windows PowerShell by right clicking it
    and Run as administrator
  • Type the following to get to your user cd c:\Users\<YourUserName> press enter.
  • Now type
Get-AppXPackage -AllUsers -Name Microsoft.MicrosoftEdge | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register "$($_.InstallLocation)\AppXManifest.xml" -Verbose}
  • If successfully you will not see any red message in the powershell window, just a yellow one saying operation complete for C:\Windows\SystemApps\Micorosft.MirosoftEdge.8wekyb3d8bbwe\AppXManifest.xml”
  • Reboot your machine on more time. Afterwards Microsoft Edge will be restored and I found that I didn’t have a refreshing issue with my SharePoint online site anymore.

TypeScript error in Visual Studio – Cannot find module, problem with the tsconfig.json file


As much as I like to write blogs, I also like to follow and work through other people’s blogs, especially if they are step by step instructions similar to the way I think. This one particular blog was showing how to create a simple Angular Hello World app. I followed the blog to the letter and when I tried to build the app I kept getting the following error messages

  • Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.
  • Cannot find module ‘@angular/core’
  • Cannot compile module unless the ‘—module’ flag is provided with a valid module type. Consider setting the ‘module’ compiler option in a ‘tsconfig.json’ file.

typescripterrormessage

This makes no sense, as in my tsconfig.json file I had everything setup correctly. I had set experimentalDecorators to true, so I shouldn’t have received the first error message. Couldn’t work out why it couldn’t find @angular/core as I had used the npm package manager to install it, and in my tsconfig.json file I had set the module to ‘commonjs’. I checked on other websites that I had set up my tsconfig.json file correctly.

{
compilerOptions: {
declaration: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
lib: [
"es2015",
"dom"
],
module: "commonjs",
moduleResolution: "node",
noImplicitAny: true,
removeComments: false,
sourceMap: true,
suppressImplicitAnyIndexErrors: true,
target: "es5",
typeRoots: [
"../../node_modules/@types/"
]
},
compileOnSave: true,
exclude: [
"node_modules/*",
"**/*-aot.ts"
]
}

It seems if you download TypeScript 2.0 for Visual Studio 2015 you will not be able to use a tsconfig.json file. If you are working with CommonJS module system, Visual Studio will ignore the tsconfig.json file, even though putting the tsconfig.json file within the project, Visual Studio prevents the use of the TypeScript build section of the project properties.

typescriptdisabled

 

The tsconfig.json file is required in Visual Studio Code, but it doesn’t seem to be required for Visual Studio. To fix your error messages, first, remove the tsconfig.json file from your project. This then makes the Typescript build on the properties page enabled. I switched the Module system to CommonJS and ECMAScript version to ECMAScript 6. This got rid of my bottom two errors, however I was still getting the message:

Experimental support for decorators is a feature that is subject to change in future release. Set the ‘experimentalDecorators’ option to remove this warning.

To fix this error:

  • Unload the project from your solution – right click the project and select Unload Project
  • Once you have unloaded the project, you can right click it again, and then edit the project file.
  • Add the following to both PropertyGroup where the condition is for debug or Release. (<PropertyGroup Condition=” ‘$(Configuration)|$(Platform)’ == ‘Debug|AnyCPU’ “> or  <PropertyGroup Condition=” ‘$(Configuration)|$(Platform)’ == ‘Release|AnyCPU’ “> )
        <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
        <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    

  • Save your changes, then right click the project and Reload Project

Your errors should now be gone, and you can continue to build your project.

Reference

https://www.infopulse.com/blog/using-angular-2-in-visual-studio-2015-tutorial/ – The blog post that helped me!

Ensuring Visual Studio 2015 is using the latest NodeJS and NPM version


When Visual Studio 2015 uses NodeJS and NPM it uses the version local to itself, which as I discovered is annoying if:

  1. You didn’t know this
  2. Thought your PC was up to date after installing the latest NodeJS and NPM globally.

First lets ensure you have installed the latest nodejs and npm globally.

Install / Update NodeJS globally.

  • Using your browser, navigate to https://nodejs.org and download the current version of NodeJs.
  • Once you have downloaded NodeJs, ou can run the installer and work your way through the wizard.
  • Once installed, you can open up a command prompt. Node.js command prompt is also available.

  • Open up the node.js command prompt and type node -v to get the node version. Should match the version you downloaded from the website.

Installing / Update NPM globally.

  • Open the Node.js command prompt
  • Type the following
npm install npm@latest -g
  • Then type npm -v to get the npm version number.

Extensions for Visual Studio 2015

I recommend getting the following extensions for Visual Studio

Click download in both links and install the extensions into Visual Studio.

After you have installed the “NPM Task Runner”, you might need to make it visible in your Visual Studio. To do this, select View > Other Windows > Task Runner Explorer or press Ctrl + Alt + Bkspace



After you have installed the “Package Installer”, when you right click on your project you will see a new link under Add
called Quick Install Package…

When clicked, you can select and install a package from the following package managers


We will use these extensions in a moment.

Checking Visual Studio Version and Updating.

We are going to create a project, and add a package using the Quick Install Package, this will create us a package.json file. We add some commands to the Scripts section, and run them in the task runner.

  • Create yourself a blank web project.
  • Right click
    the project and select Quick Install Package…
  • Select NPM and type TypeScript in the next box, can leave Latest Version and click Install.

  • After you have clicked install you should see a package.json file, which doesn’t have much in it.
{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^2.1.5"
  }
}
  • Update the json file to include two scripts, getNPMVersion, getNodeVersion and updateNPMVersion.
{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^2.1.5"
  },
  "scripts": {
    "getNpmVersion": "npm -v",
    "getNodeVersion": "node -v",
    "updateNPM": "npm install npm@latest"
  }
} 
  • After you have saved the json file, in the Task Runner Explorer window, click the refresh button. You should see your three scripts available to you.

  • Right click on getNpmVersion
    and click Run. The result will display in the Task Runner Explorer console window. You will note that this version is different to the version number you got at the start of this blog post through the Node.js command prompt window.
  • To Update NPM, right click on updateNPM and click Run. After it has completed, run getNpmVersion again. You should find that the version now matches the version you got earlier.
  • Right click on getNodeVersion and click Run. My version is v5.4.1
  • There doesn’t seem to be a command to update the Nodejs in visual studio. However, we can make it use the global version of Nodejs.
  • In Visual Studio click on Tools > Options. Inside Options, select Projects and Solutions > External Web Tools.
  • Add the NodeJS path. Mine is “C:\Program Files\nodejs”. Then move this to the top.

  • Go back to the Task Runner and run the command getNodeVersion you should now see the version matches the version you got earlier in the Node.js command window.

You should now be up to date.

Getting Started with TypeScript


What is TypeScript?

TypeScript works on any browser, any host, any operating system. TypeScript isn’t really a new language. It is an open source project, maintained by Microsoft, configurable to JavaScript version. (ES3, ES6, ES7). It is described as

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” – Typescriptlang.org

It adds typing (e.g., String, Boolean, Integers) which for a developer is great because:

  • Allows tooling to autocomplete using intellisense
  • Mistakes in code can be spotted instantly
  • No worries of accidently converting a number into a string, as you might with JavaScript.
  • Supports Standard JavaScript code as well as TypeScript, so you can work with both together.
  • Allow encapsulation through classes and modules
  • Supports contructors, properties and functions
  • Defines Interfaces
  • Saves developer time, and cuts down debugging code.

Installing a compiler

The compiler for TypeScript is called TSC, it works across platforms. It converts TypeScript to JavaScript as browsers do not understand TypeScript. A way to install tsc is as a node.js package with node npm command line.

First you need to install nodejs.

  • Using your browser, navigate to https://nodejs.org and download the current version of NodeJs. (I downloaded the version recommended for most users)
  • Once you have downloaded NodeJs, you can run the installer and work your way through the wizard.
  • Once installed, you can open up a command prompt. Node.js command prompt is also available.

Installing TypeScript Complier

Now you have Node.js installed you can install TypeScript through the node package manager (npm). From the Node.js command prompt, type

npm install -g typescript

Note: The -g flag means to install globally not locally to a folder so that typescript complier works everywhere.

To test that the complier has been installed and working properly, you can perform this quick test.

  • With the command prompt still open, go to a folder of your choice and then type:
    Copy con test.ts
    class myfirstTSClass{
    }
    
  • Press Ctrl + Z and the file is then saved. If you open the file called test.ts in notepad, you will see that a file has been created with the class inside.
  • To compile into JavaScript, type
    tsc test.ts
    
  • In your folder, you should now see a test.js. Open this file in notepad and you should see the following JavaScript.
    var myfirstTSClass = (function () {
        function myfirstTSClass() {
        }
    
        return myfirstTSClass;
    }());
    

Editor Choices

To work with TypeScript you have many different editors you can use for example:

I’m not going to go through how to set up all the different editors, but I will show how to set up Visual Studio and Visual Studio Code as these are the two environments that I typically find myself in when coding. If you head to the TypeScript website (https://typescriptlang.org and click Donwload, you can find information for the other editors there.

Setting Up Visual Studio for TypeScript

Visual Studio is actually really easy, as it is already built into Visual Studio 2015, however it is worth while heading to the TypeScript site and clicking Visual Studio 2015 link (as shown above) to ensure you have the latest version installed within Visual Studio. If you have Visual Studio 2013, you just need to head to the TypeScript site and click the Visual Studio 2013 link.

Install NodeJS for Visual Studio.

Although it’s not a requirement, I recommend installing NodeJS for Visual Studio here too. This will allow you to create NodeJS project within Visual Studio. When I was learning TypeScript, I didn’t always need to write JavaScript that ran in a browser, my hello world application just needed to run within a console window.

In your browser head to VisualStudio.com, on the menu bar, select Features > Application Development > Node.js. Then click the link to “Get Node.js Tools for Visual Studio”

Once downloaded, I then had new project templates available to me in Visual Studio.

Creating a TypeScript Hello World in Visual Studio 2015

  • Open up Visual Studio and create a new Project, select HTML Application with TypeScript, found under the TypeScript template. Click OK.
  • In Solution Explorer you should see a structure like mine. Before we do anything, click the Show All Files button.
  • By opening the app.ts file we can see an example TypeScript class written called Greeter, it displays the current time on the screen.
  • As soon as you hit the Save button, the TypeScript complier automatically runs and creates the corresponding JavaScript and map file. If you refresh the files showing in Solution Explorer, you can see the app.js and app.js.map file. (The JavaScript files are not automatically added to the project, which is why I said click “Show All Files” button).
  • If you open the app.js file, you can see the converted JavaScript.
  • Run the application and in the browser it will tell you the current date and time.

Visual Studio 2013

If you are using Visual Studio 2013, you can install Web Essentials (https://vswebessentials.com) which gives you a JavaScript preview window, to allow side by side TypeScript/JavaScript files.

Setting up Visual Studio Code for TypeScript

As long as you have gone through the steps of installing nodejs and the typescript complier, Visual Studio Code will be able to build TypeScript projects. Unlike Visual Studio 2015, Visual Studio Code requires a bit of configuration for a brand new project to ensure the TypeScript gets converted into JavaScript.

Creating a Hello World in Visual Studio Code

  • Using the command line create a new directory somewhere, and then type code [nameofdirectory] to load it up in VS Code.

    Alternatively using Windows Explorer, you can create the folder, and then right click the folder and select Open with code.

  • Once VS Code has opened, we will create a couple of folders. One called ts and one called js. You do this by clicking on the folder icon in the explorer view.
  • In the ts folder, create a file (pressing the New File button next to the New Folder Button in the explorer view) and call this file helloworld.ts
  • Write the following TypeScript within this file.
class HelloWorld{
      constructor(){
        let divLabel = document.getElementById("mylabel");
        divLabel.innerHTML += "Hello from Visual Studio Code";
    }
}

var helloworld = new HelloWorld();
  • Then outside any folder, create a new file called index.html and put the following HTML within the file.
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <h1>Hello World App</h1>
            <div id="mylabel"></div>
        </div>

       <script src="js/app.js"></script>
    </body>
</html>
  • Now if we try to build the project, either calling up the command box (Ctrl + Shift + P), typing Build
    and then select Tasks:Run Build Task or just using the shortcut to the run build tasks (Ctrl + Shift + B) you will see the following message appear at the top of your VS CODE.

  • Click Configure Task Runner and select TypeScript – Watch Mode. This will create a new folder called .vscode and a pre-completed file called tasks.json

  • The tasks.json file contains a json object that configures the TypeScript complier to run. We are going to change the args so that it compiles our TS folder. Change the line from:
    //From
    "args": ["-w", "-p", "."],
    
    //To
    "args":["-w", "-p", "ts/"],
    

    This will ensure that the TSC watches (-w) the project directory (-p) TS/

  • We are now going to create one more file called tsconfig.json
    and this is also going to be created in the TS folder. The presence of this file specifies the root files and the compiler options required to compile the project. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. In this folder put the following json information.
    {
        "compilerOptions": {
              "sourceMap": true,
                 "target": "es5",
                "outFile": "../js/app.js"
        }
    }
    

    The above ensures a sourcemap file is created so that debugging is available directly within TypeScript files instead of JavaScript files. It is also targeting the EcmaScript5 version of JavaScript, and that all files are compiled into one JavaScript file called app.js located in the JS folder.

  • Now if you run the build task (Ctrl + Shift + B) the project will compile and create two files within the js folder. (app.js and app.js.map).
  • Also note that when you make any changes to the helloworld.ts or any new ts files you might create within the ts directory, and save the file, because we created a watch build task, the app.js file is updated automatically.

Before we run this simple HelloWorldTS app, let me show you an extension that you should download and install in Visual Studio Code.

Installing “View In Browser” Extension

You only will need to do this once, not for each project you create.

  • Click the Extensions button and then type ‘view in browser’ in the search box. Once you have found the extension, click Install
  • Once installed you will need to Enable it. This will request for VS Code to be restarted. Click OK, to continue.

Running HelloWorldTS

With the View In Browser installed, any HTML page you go to in your project and press (Ctrl + F1), will open the page directly in the browser.

Debugging TS files

In this section I’m not going to go into explaining how the Visual Studio Code debugger works, however, I will show you that you can debug using the browser. As stated earlier, you can debug the actual TypeScript files because of the .map file. If you run your project within a browser like before then press F12 to open up the browsers developer tools. I’m using Microsoft Edge, if you are not able to see the .ts file, then press the Load Source map button. (Highlighted)

After you have set a break point, refresh the page, and you can see that you can step through the TS file by pressing F11.

Summary

In this blog post I have explained what TypeScript is, how you can set up TypeScript on your machine using Visual Studio 2013/2015 or Visual Studio Code. We have created 2 simple TypeScript applications, and briefly looked at debugging. This post hasn’t explained how you write TypeScript.