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.
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.
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
Configure the Environment
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.
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:
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.
You can see all the options and many more here.
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:
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.
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:
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.
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
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:
"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.
-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 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.
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
- A typings.json file was added with the typings
- A typings folder was added to the project containing the d.ts files for
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
For compiling the Typescript files, use F6.
Here is a project that is configured this way:
Here are some projects that are configured the same way except the tests are in a different folder: