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" } ] }