Awesome Typescript Azure Functions: Part 1 — Project Setup

The first thing you will need to install is Azure functions core tools. It’s an NPM package which will install the required executables to build Azure Functions App.

Installation Guide.

Next, let’s create a demo app to work with using the following command.

func init DemoProject 

This command will create a new folder for you including:

• local.settings.json

This file is your project’s equivalent of environment variables. Use it to store all the application settings and connection strings.

Note that this file will not be used when you deploy the application to Azure.

Now, let’s create our first function.

func new --language JavaScript --template HttpTrigger --name HelloWorld

This command will create a new folder called HelloWorld which includes:

• index.js

This file includes the source code for the HelloWorld function

• function.json

The file also includes configuration for the HelloWorld function such as the trigger type, input and output bindings. You can find more details on this link.

The key thing to notice in that file is that it exports one function only.

By default, Azure functions runtime looks for the function code in a file called index.js then it executes the exported function.

If you are exporting more than one function, you will need to name your default function “index” or “run”. Alternatively, you can use the function.json to define an entry point.

npm init

Next let’s install install TypeScript:

npm install --save typescript

Afterwards, let’s generate TypeScript configuration file by running:

tsc --init

An optimal tsconfig file would look something like this:

Note that sourceMap should be set to true for easier debugging especially with VSCode.

Navigate to the HelloWorld function and create a new file index.ts. This file will export a function called index which takes context and request as arguments.

Azure function accepts .js files which means that the index.ts file will need to be compiled first by executing the following:

tsc

This will create:

1. index.js
2. index.map.js

And now your function is ready to be executed.

Finally, for an efficient development exprience, we will use nodemon. Nodemon will watch all the changes made and automatically compile TypeScript files to JavaScript.

npm install --save nodemon

Nodemon can be configured to watch for .ts files and run a command every time a file changes.

nodemon -e ts --exec tsc

That’s all it takes to have a TypeScript introduced into your Azure Functions codebase. In the next part, I will go through the process of setting a CI pipeline using VSTS for our HelloWorld Functions App.