Atom TypeScript

JavaScript developers can now just open a .ts file and start hacking away like they are used to. No grunt no Visual Studio. Just pure coding.

Installation

Install atom.
apm install atom-typescript (apm needs git in your path)
Fire up atom. Wait for the message: AtomTS: Dependencies installed correctly. Enjoy TypeScript ♥ It may take up to 5 minutes for this message to appear. Be patient!

Additional Notes: Some packages we love.

Reviews

Featured on the TypeScript home page under tools http://www.typescriptlang.org/ and demoed by Anders Hejlsberg.

"I was shocked at how good it felt to poke around on the compiler with it." Jonathan Turner
"And guess what, it worked perfectly. Like everything else! Faster than Visual Studio!" Daniel Earwicker
"It's a thing of beauty - they had me at 'Type information on hover'. Discovering tsconfig.json support as well was just an enormous bonus." John Reilly
"This may be your best option for editing TypeScript at the moment - very nice!" Rasmus Schultz

Add yours!

Features

Autocomplete
Live error analysis
Type information on hover
Compile on save
Project Context Support (tsconfig.json)
Project Build Support
package.json Support
React Support
Format code
Goto Declaration
Find References
Block comment and uncomment
Goto history (goto next/previous error in open files, goto next/previous build)
Auto indent for new lines
TypeScript context menu
Symbols in Project
Symbols in File
Rename refactoring
Quick Fix
Common Snippets
import / /// <reference relative path resolution
Output Toggle
AST visualizer
Dependency View
Sync

FAQ

Located online : https://github.com/TypeStrong/atom-typescript/blob/master/docs/faq.md

Feature Details

Auto Complete

Internally using AutoComplete+. Just start typing and hints will show up. Or you can explicitly trigger it using ctrl+space or cmd+space. Press tab to make a selection.

Type information on hover

Just hover

Compile on save

TypeScript files will be compiled on save. Different notifications are given if emit was successful or not. Configuration driven by tsconfig.json

Project Support

Supported via tsconfig.json (read more) which is going to be the defacto Project file format for the next versions of TypeScript.

It also supports filesGlob which will expand files for you based on minmatch|glob|regex (similar to grunt).

Project Build Support

Shortcut: F6. If there are any errors they are shown as well.

`package.json` Support

Where a sample package.json (anywhere next to or above a tsconfig.json) looks like:

{
    "name": "awesome",
    "main": "./dist/foo.js",
    "typescript": {
        "definition": "awesome.d.ts"
    }
}

And if you have declaration:true in your tsconfig.json then we would generate a awesome.d.ts file for you on build so that other TypeScript projects can do a simple require('awesome').

We have a sample NPM module : https://github.com/basarat/ts-npm-module and its usage is demoed in https://github.com/basarat/ts-npm-module-consume.

Notes:

Relative paths in definition are not supported. This is due to a limitation in how the TypeScript compiler does file lookup.
Other people will be able to do require('awesome') only if their IDE supports looking at node_modules like we do. Otherwise they can always explicitly /// <reference your awesome.d.ts that we generate to get the same effect.

React Support

Configuration tips

Specifically jsx support:

Have "jsx" : "react" in your tsconfig.compilerOptions.
Have *.tsx files included in your project e.g using filesGlob:

"filesGlob": [
    "./**/*.ts",
    "./**/*.tsx",
    "!node_modules/**/*.ts",
    "!node_modules/**/*.tsx"
],

Use the file extension .tsx.
tsd install react-jsx --save --resolve.

Html to TSX

Format Code

Shortcut : ctrl+alt+l or cmd+alt+l. Will format just the selection if you have something selected otherwise it will format the entire file.

Go to Declaration

Shortcut : F12. Will open the first declaration of the said item for now. (Note: some people call it Go to Definition)

Find References

Shortcut shift+F12. Also called find usages.

Block Comment and Uncomment

ctrl+/ or cmd+/. Does a block comment / uncomment of code.

Go to Next / Go to Previous

f8 and shift+f8 respectively. This will go to next/previous errors in open files OR build error OR references based on which tab you have selected.

Context menu

Quickly toggle the TypeScript panel OR select active TypeScript panel tab and other stuff using the context menu. ctrl+; or cmd+;.

Symbols View

Integrates with atom's symbols view (ctrl+r or cmd+r) to provide you with a list of searchable symbols in the current file.

Project Symbols View

Also called Go To Type in other IDEs. Integrates with atom's project level symbols (ctrl+shift+r or cmd+shift+r) to provide you with a list of searchable symbols in the entire typescript project.

Refactoring

Rename

f2 to initiate rename. enter to commit and esc to cancel.

Quick Fix

Press the TypeScript: Quick Fix shortcut alt+enter at an error location to trigger quick fixes. Select the quick fix you want and press enter to commit e.g

Add class members

More Quick fixes

We are actively adding quick fixes so go here for an up to date list.

tsconfig validation

We will validate it and help you to fix it :)

Snippets

Relative Paths

Relative paths have traditionally been a pain, not anymore. Use import or ref and press tab to trigger snippet.

ref

import

Note that within the path string you get autocomplete (ctrl+space/cmd+space) for all the files in the project by filename (works for both ref and import).

Output Toggle

ctrl+shift+m to toggle the output compiled JS file for a give TypeScript file. The keyboard shortcut is consistent with atom's markdown preview.

AST Visualizer

Command : Typescript: Ast. Useful when authoring new features.

Also command : TypeScript: Ast Full that includes the trivia (punctuation, comments etc. received from ts.Node.getChildren()) as well.

Dependency View

Command : Typescript: Dependency View. A dependency viewer for insight into the project if you use external modules. You can zoom, pan, drag points around and hover over nodes. (more details)

Sync

We try to keep as much of the stuff in sync while you edit code. However in dire circumstances:

a soft sync is done when you save a file ctrl+s and we will completely reprocess the active file. This might not fix stuff if the error is because of some other file on the file system.
ctrl+' or cmd+' : If you deleted files in the background or renamed them or jumped git branches or something weird just happened then sync. No need to restart your IDE :).

Contributing

Look at CONTRIBUTING.md for curiosity. We work hard to keep the code as approachable as possible and are highly keen on helping you help us.

Changelog

Breaking changes available online.

Donating

Support this project and others by basarat via gratipay.

agaricus/atom-typescript