IDE Support page

Learn about TypeScript configurations and IDES good for TypeScript Development.

Overview

In this section we'll learn about TypeScript configuration options to help us optimize our workflow, and look at IDEs that have great TypeScript support for building TypeScript projects.

For the exercise, we will learn how to import and export functions between modules.

Configuring TypeScript

We're able to configure how our projects use TypeScript from selecting which files to compile to removing comments from those files. This is done through the creation of a tsconfig.json file.

tsconfig.json

Customize the TypeScript compiling and linting options by creating a tsconfig.json file in the root directory of your TypeScript project. The following config will

  • specify ECMAScript target version as 'es5'
  • specify module code generation (from 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015' or 'esnext')
  • generate source map files
  • remove comments from compiled code

The following is just example config code. Don't add this to your project or the tests for the TypeScript exercises in this training will fail.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "removeComments": true
    }
}

Full configuration options are available here: http://json.schemastore.org/tsconfig

Linting

We can also configure linting options to catch bugs and help enforce uniform styling. The following options will warn on unused local variables and parameters, and expressions or declarations implying 'any'.

{
    "compilerOptions": {
        ...
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitAny": true
        ...
    }
}

IDEs

Integrated Development Environments have come a long way in supporting modern web development. With little to no configuration IDEs offer built-in debugging, Git integration, command line usage, and robust packages for additional add-ons.

Visual Studio Code

VS Code is Microsoft's modern take on an IDE for app development (P.S. TypeScript is a Microsoft Open Source project). VS Code has built in TypeScript support for syntax highlighting, IntelliSense code completion, and linting.

Visual Studio Code screenshot

Atom

Atom is another good modern IDE that easily supports and aids in TypeScript development with the installation of the atom-typeScript plugin.

Atom screenshot

Webstorm

Webstorm is a platform by JetBrains that is loved for its great code refactoring assistance and version control integration, but it does require a paid subscription.

Webstorm screenshot

Exercise: Exporting and Importing

The Problem

In this exercise, we will:

  • Update 1-ide-greeter.ts to export the greeter function as the default export. 1-ide-greeter.ts currently looks like:
    function greeter(person: string) {
      return "Hello, " + person;
    }
    
  • Update 1-ide-hello-earth.ts, to import and use greeter. 1-ide-hello-earth.ts currently looks like:
    document.body.innerHTML = greeter("Earth");
    
  • Compile 1-ide-hello-earth.ts to JavaScript so we can run it.

What You Need to Know

  • Export a default value like:
    const value:string = "My Value";
    export default value;
    
  • Import a default value like:
    import value from "./value-exporter";
    

Verify Your Solution

✏️ Run the following to verify your solution works:

npm run 1-ide

The Solution

Click to see the solution ✏️ Update 1-ide-greeter.ts to:

function greeter(person: string) {
    return "Hello, " + person;
}

export default greeter;

✏️ Update 1-ide-hello-earth.ts to:

import greeter from './1-ide-greeter';

document.body.innerHTML = greeter("Earth");

✏️ Compile 1-ide-hello-earth.ts with:

tsc 1-ide-hello-earth.ts

Things to Explore

  • Hover over greeter, what does your IDE show?
  • Pass a number to greeter, what does your IDE show?