An example app

In this lesson, we will complete a simple app using TypeScript. In subsequent lessons, we will add Babel, ESLint, and Webpack to this project.

Technical requirements

You will need the following installed on your computer for this lesson:

• Node.js and npm. You can download these from https:/​/​nodejs.​org/​en/​download/​. If you already have these installed, make sure that Node.js is at least version 8.2, and that npm is at least version 5.

• Code editor such as Visual Studio Code. This can be installed from https:/​/​code.​visualstudio.​com/​.

• The starter project which can be found here.

• After the starter project has been downloaded. Open it in a code editor and execute the following command in a Terminal window:

Copy
npm install

This will install the project dependency, which is TypeScript.

Understanding the project

• Open index.html from the dist folder.

The HTML contains a form with two number inputs; an Add submit button and a paragraph element.

The HTML references some JavaScript in a bundle.js file, which will execute some logic.

• Open index.ts, which is in the src folder.

This TypeScript code operates on the HTML form we have just seen. It contains an init function, which adds a submit event handler to the form. The submit handler adds the numbers from the two inputs and puts the result in a paragraph element.

Outputting JavaScript to a specific file

When index.ts is transpiled, it needs to be output to the dist folder in a bundle.js file. We can do this with a compiler option called outFile.

• Add outFile to tsconfig.json:

Copy
{
  "compilerOptions": {
    ...
    "outFile": "dist/bundle.js"
  },
  ...
}

• Run the TypeScript compiler:

Copy
npm run tsc

A bundle.js is created in the dist folder.

Summary

That completes this lesson.

We have used the outFile compiler option within TypeScript to transpile code to JavaScript and place it in a specific location with a particular name.

We will continue to use this project throughout this module, adding different tools into the mix. In the next lesson, we will switch to using Babel to transpile TypeScript to JavaScript.