Typescript in Atom

Introduction

Starting a new project can sometimes be tedious, and sometimes there are so many things to configure that a good tutorial can really help. I developed a few small projects of my own in Atom Typescript and found a configuration that works for me. So in this article, I'll show you one way of doing things and hope it will help you start working on your projects much faster.

Prerequisites

• Node.js
• Atom
• Typings

IDE

So let's start with the IDE configuration and plugins.

There are plenty of good IDEs out there, after a little research, I chose to develop in Atom because of the large number of plugins available for it and the fact that it's free.

Plugins

There are lots of available plugins out there, you can search for them and install them, I will concentrate on the plugins to help you develop in Typescript. You can find and install the plugins inside the Atom settings in the "Packages" tab.

• atom-typescript: This plugin is basically the holy grail for typescript, it compiles it, arranges the files, allows intellisense and lots of other goodies. This is a must have plugin if you want to work in Typescript
• tree-ignore: This plugin allows you to hide not necessary files from the tree view. Since you will work in Typescript and transpile in to JavaScript, for each file there will be at least 2 files, the *.ts file and the .js file (there can also be mapping and *.d.ts files as well). The tree will be full of files you don't really use and it will be a pain in the eyes to search for the needed files. This plugin will help you hide the unneeded files. I will show you how to configure it later.

Configure the Environment

package.json

There are lots of tutorials on creating the package.json file, you can search for them, I will show the basic one here.

Open the git bash, navigate to your project folder and run the npm init command. The setup will guide you through the minimum needed configurations.

tsconfig.json

This file will basically contain all the needed configuration for atom-typescript.

Open the project folder in the Atom. Press the Ctrl/Command + Shift + P (Windows/Mac) and type "tsconfig". You should see the command "Typescript: Create Tsconfig.json Project file". Press enter. (If it does nothing, add an empty "something.ts" file to the project and try again, after the tsconfig.json is created, you can delete the file)

Open the tsconfig.json file, you can see the structure, it's quite straight forward, there are lots of available configurations that are available on the atom-typescript git page and here is the configuration file I decided to work with after a few projects:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": false,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowUnreachableCode": false
  },
  "filesGlob": [
    "**/*.ts",
    "**/*.tsx",
    "!node_modules/**"
  ],
  "exclude": [
    "src/**/*.d.ts",
    "index.d.ts",
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
  ],
  "compileOnSave": true,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false,
    "formatOnSave": true
  },
  "formatCodeOptions": {
    "indentSize": 2,
    "tabSize": 2,
    "insertSpaceAfterCommaDelimiter": true,
    "insertSpaceAfterSemicolonInForStatements": true,
    "insertSpaceBeforeAndAfterBinaryOperators": true,
    "insertSpaceAfterKeywordsInControlFlowStatements": true,
    "insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
    "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
    "placeOpenBraceOnNewLineForFunctions": false,
    "placeOpenBraceOnNewLineForControlBlocks": false
  }
}

A few things to notice here:

• compilerOptions.target - You can change to whatever ES version you want
• compilerOptions.module - I have chosen to use CommonJS but feel free to chose others from the available ones in the atom-typescript documentation.
• compileOnSave/buildOnSave options
• atom.formatOnSave option
• formattingOptions

You can see all the options and many more here.

.atomignore

As I said before, the tree-ignore plugin allows you to hide files that are not needed from the tree view.

To configure which files to ignore, just add an .atomignore file inside your project folder and write the file patterns you want to ignore, you can modify the file whenever you like and add/remove whatever you want.

Here is an example of what I usually put inside the file:

.git
index.js
index.d.ts
src/*/*/*.js
src/*/*/*.d.ts
src/*/*.js
src/*/*.d.ts
src/*.js
src/*.d.ts

As you can see, I have all my source files inside the src directory. The one issue I found with the plugin is that it does not allow you to configure deep folder patterns so you can see multiple depths patterns for the src directory.

.npmignore

If you plan to publish your project on npm, you should consider adding the .npmignore file to make the package as small as possible without any files that are not needed.

Here is an example of what I usually add to the file:

.atomignore
node_modules
tests
typings
tsconfig.json
typings.json
*.ts
!*.d.ts
.npmignore
*.test.js
*.test.d.ts

.gitignore

If you work with GIT and for some reason you don't want some of the files to be committed, you can ignore them using the .gitignore file. I usually don't add it because I want all my projects to be saved (even the node_modules. There are many articles which debate whether you should do it or not, you can do whatever you want).

Basic Files and Folders

Add an empty index.ts file and press F6 to compile.

Add a src folder or any other name you are used to, this is where I put all the source files.

Tests

In the past, I used to create a different folder to contain all my tests but then I came across an article which suggested to put the test files near the source files which makes it easier to find them and saves the double managing of the folder structures for the source and the test folder trees, but again, you can do whatever you like.

So if for example, you add a file: src\someClass.ts, the test file for that file will be: src\someClass.test.ts

You can see that in the .npmignore, I ignore all the files that match the "*.test.ts" pattern.

I write the tests in mocha + sinon + chai so I will show you the configurations for this, if you use some other test frameworks, you can apply the principles I show here to your framework.

You will see the typings ambient installations because when I wrote the article, the d.ts files weren't available in the Typings repository and only in the DefinitelyTyped.

Install Mocha

npm install -g mocha
<s>typings install mocha --save-dev --ambient</s> (typings 0.x)
typings install dt~mocha --global --save-dev

I install it globally for easy access.

You can find the documentation on the official Mocka page.

Update the package.json file scripts with test script:

"scripts": {
    "test": "mocha -c -b src/**/*.test.js"
}

The script runs all the test files inside the src folder. If you manage your test files inside a "test" folder, just change the src to test.

The -c stands for color, so the test output will be more readable and the -b stands for break of first failed test, because I want to fail fast and fix the failing test and move to the next one. You can add/remove the flags as you wish using the documentation.

To run the tests you can open the git bash in the project folder and run the next command:

npm test

Install Sinon

npm install sinon --save-dev
<s>typings install sinon --save-dev --ambient</s> (typings 0.x)
typings install sinon --save-dev

You can find the documentation on the official Sinon page.

Install Chai

npm install chai --save-dev
<s>typings install chai --save-dev --ambient</s> (typings 0.x)
typings install chai --save-dev

You can find the documentation on the official Chai page.

After running all the scripts, you will notice a few things happened:

• Your package.json file now has a devDependencies section.
• A typings.json file was added with the typings ambientDevDependencies.
• A typings folder was added to the project containing the d.ts files for Chai, Sinon and Mocha.

That's It

Now all you need to do is just write your code.

When you need a d.ts file, just search the typings repository with:

typings search something

If you don't find it there, search the ambient repository:

typings search something --abmient

After you find it, install just replacing the search keyword with install keyword.

For compiling the Typescript files, use F6.

Examples

Here is a project that is configured this way:

• https://github.com/slavik57/eyepatch

Here are some projects that are configured the same way except the tests are in a different folder:

• https://github.com/slavik57/moqjs
• https://github.com/slavik57/promise-sync

Enjoy!