Typescript Concurrent Compilation and Execution on Sublime Text 3
Tags: typescript, sublimetext3, productivity, webdev
Published: 2021-02-12 12:58:05

I recently started learning typescript, and on sublime text there is this awesome typescript [package](https://packagecontrol.io/packages/TypeScript) to help with errors, suggestions and also to compile (or is it transpile) my `.ts` files to `.js` but that was it, in other to run the javascript file you had to run its own build command. But as we went through the tutorials we came came to using 2 packages `nodemon & concurrently` to watch out typescript project and compile the files then run the javascript files for us, which is great right, but I liked how I could do all of this on sublime without needing the npm cli so I did some research and discovered I could do this on sublime. So lets get to it then.

##Installations
Here we'll install a couple of things that we'll be needing to pull this of.
1. typescript - `npm install -g typescript`[source](https://www.npmjs.com/package/typescript)
2. Sublime Text 3 (of course)
3. Typescript on sublime; [further instructions for installation](https://packagecontrol.io/packages/TypeScript)
4. Nodemon `npm i nodemon`, and 
5. Concurrently `npm i concurrently`

So once we have all on this installed in out local machine we can go ahead and set up our concurrent build setup.

##Step 1
Create the directory for you project. You can do this anywhere on your local machine, i'll be using my root directory.

##Step 2
We create two directories in our project folder `/src` and `/build`
*The `/src` would house our `.ts` files so that from there the build tool will find them all and 
*The `/build` would house our build `.js` files

##Step 3
We do a `npm init -y` to initialize our project.
![second-draft](https://dev-to-uploads.s3.amazonaws.com/i/5dhmi4y0g68z9w1omah9.gif)
 
##Step 4
We then create our `tsconfig.json` file using the `tsc --init` command, inside this config file we setup our configs for where the build tool will get our `.ts` files and where it'll save the `.js` files. 
find this snippet in your `tsconfig.json` file
```
...
    "outDir": "./",
    "rootDir": "./", 
...
```
and edit it thus
```
...
    "outDir": "./build",
    "rootDir": "./src", 
...
```
make sure they both correspond to the `./build ` and `./src` file created earlier.
![first-draft](https://dev-to-uploads.s3.amazonaws.com/i/sipznmkdmw6oi3s203nc.gif)
  
##Step 5
We install `nodemon` and `concurrently` using this command: `npm i nodemon concurrently`
##Step 6
We Edit the scripts in the `package.json` file to make our project use nodemon and concurrently by adding this:
```
...
"scripts": {
    "start:build": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"
  },
...
```
The `"start:build": "tsc -w"` is for when we want to run the tsc in watch mode, then the `"start:run": "nodemon build/index.js"` is to use nodemon to run our index.js file, and then finally `"start": "concurrently npm:start:*"` will run every script with `"start:*"` the `*` will make sure the `start:build` and `start:run` both run concurrently i.e. build then build continuously as you make changes to the files.
![third-draft](https://dev-to-uploads.s3.amazonaws.com/i/qyltljhaudsm0wjcvti6.gif)
 

##Step 6
Create a `test.ts` file to test the build on your npm command.
![fourth-draft](https://dev-to-uploads.s3.amazonaws.com/i/qf4xe501snj8ok677d6h.gif)
 

##Step 7
The main purpose of this article, actual implementation on sublime text 3.
To do this, we'll have to create a new build system in our sublime text. Go to `Tool>Build System>New Build System` then type this in there.
```
{
	"shell_cmd": "npm start",
	"windows": {
		"cmd": ["npm start"]
	}
}
```
Save it with any name say `Custom TS Build` Done.
![fifth-draft](https://dev-to-uploads.s3.amazonaws.com/i/2jpuwgyyg8dsvup7t6xn.gif)   

##Step 8
Lastly, we test it by selecting our custom build `Tool>Build System>Custom TS Build` by going to and using `ctrl+b` to build it then we see the output on the console.
![sixth-draft](https://dev-to-uploads.s3.amazonaws.com/i/udl6y2pg02igyzl5t85r.gif)

With that we come to the conclusion of this write up, if you have any questions or problems with it please hit the reply button and i'll help out any way i can.

###Resources
*Stackoverflow thread that showed me how to create a new build on sublime [link](https://stackoverflow.com/questions/42339683/typescript-compile-on-save-in-sublime-3)