Setting a TypeScript Compiler Project

TypeScript is not just a standalone compiler. It provides the Compiler API and the Language Service API so that you can create your own TypeScript tools leveraging all the powerful features of TypeScript compiler.

This article will show you how to setup a project using the compiler API of the latest TypeScript compiler.

Add src/tsconfig.json

To create a TypeScript project, the first thing we need to do is to create a file named tsconfig.json. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "target": "ES5",
        "out": "../build/tsstyle.js",
        "sourceMap": true
    },
    "files": [
        "tsstyle.ts"
    ]
}

Add package.json

Then add the project name, version, description and dependencies to package.json file. The following package.json gets the latest version of TypeScript from the GitHub repo. It also adds gulp as a dependency as we will use gulp as our build system.

{
  "name": "tsstyle",
  "version": "0.1.0",
  "description": "tsstyle",
  "dependencies": {
    "gulp": "^3.9.0"
  },
  "devDependencies": {
    "gulp-typescript": "*",
    "typescript": "Microsoft/TypeScript"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kwang Yul Seo"
}

Add gulpfile.js

The next thing we need to do is to create a build script. Setup gulpfile.ts as in the following to use the build settings of tsconfig.json we created above.

var gulp = require('gulp');
var ts = require('gulp-typescript');

var tsProject = ts.createProject('src/tsconfig.json', 
    { typescript: require('typescript') });

gulp.task('default', function() {
    var tsResult = tsProject.src()
        .pipe(ts(tsProject));

    return tsResult.js.pipe(gulp.dest('built/local'));
});

{ typescript: require('typescript') } makes sure that we use the latest version of TypeScript from the GitHub repo instead of the TypeScript compiler bundled with gulp.

Add type definitions

Use tsd to add type definitions.

tsd query node --action install

Implementation: src/tsstyle.ts

Add references to type definition files and import typescript module. Start implementing the code. Refer to Traversing the AST with a little linter for details.

/// <reference path="../typings/node/node.d.ts" />
/// <reference path="../node_modules/typescript/bin/typescript.d.ts" />

import {readFileSync} from "fs";
import * as ts from "typescript";

/// Code here

Visual Studio Code Integration

Add the following tasks.json file to .settings directory. When you run build task, VS Code will run gulp.

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            // Make this the default build command.
            "isBuildCommand": true,
            // Show the output window only if unrecognized errors occur.
            "showOutput": "silent",
            // use the standard tsc problem matcher to find compile problems
            // in the output.
            "problemMatcher": "$tsc"
        }
    ]
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s