Before we can set up a TypeScript project, we first ensure that Node.js and NPM are installed. Head over to the node.js download page and select the relevant package and follow the on-screen instructions.
To test that NPM is working, open up your terminal and type npm.
You should get something like this.
Once you have installed VS Code, create a folder somewhere easily accessible, in my case I called it typescript-test-setup and open it in VS Code. Take note that the folder name is all lowercase with dashes instead of spaces, this will become apparent in a moment if it isn’t already.
Your folder is visible in VS Code on the left-hand side where the red circle is, and if you hover over it you will see some icons appear, the first one is to create a new file and the second to create a new folder.
Create a new file called app.ts and another called index.html.
In your index.html file just add a typical HTML5 boilerplate with a script tag just before the closing body tag.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TypeScript Test Setup</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="app.js"></script>
</body>
</html>Our script tag is pointing to app.js which at this point doesn’t exist, but it will once we compile our TypeScript.
Building our Package Manager
The best way to handle projects using TypeScript is to use a package manager such as NPM. This allows us to keep track of dependencies, automate the process of compiling TypeScript to JavaScript and run our project in a virtual environment with lite server.
Inside VS Code hit shift + cmd + c to bring up the terminal (the advantage to opening it from VS Code is that it opens inside the folder rather than your system, so there is no need to waste time changing directories) and type npm init.
The first thing you will be prompted to type is the name of the project. The defaults are shown in brackets (ref *1). The defaults should be perfectly fine for most projects, just fill out the author, description and change the entry point to your primary JS file which for us will be app.js.
After running through all the necessary setup parameters, you will be informed that you are about to write to package.json (ref *2) and it will show you what you are about to write (ref *3). If it looks correct, hit enter once more.
In VS Code you should now see your package.json file.
Testing Our Package
You can check if your package is working by typing npm test in your terminal. If it is successful, you will see your test message.
npm test is intended to test a script or scripts and not a string, but for now, we will use a string because we don’t have any scripts to test.Adding Dependencies
Now that we have our basic package initialized, we need to add some dependencies or more specifically dev dependencies. A package has two types of dependencies, those used in production like jQuery and those use in development like TypeScript.
We will install the following as dev dependencies:
concurrently– as the name suggests, it allows us to run multiple commands concurrently.typescript– can’t start a TypeScript project without this.lite-server– lightweight development only node server refreshes when making changes to HTML and JavaScript and injects CSS changes using sockets.
To install a dependency, use the install command.
For dependencies
npm install <package> --saveFor dev dependencies
npm install <package> --save-devYou can install multiple dependencies by separating your packages with a space. To install our dev dependencies, run the following command in your terminal.
npm install concurrently typescript lite-server --save-devNow if you look at your package.json file you should see your dev dependencies.
{
"name": "typescript-test-setup",
"version": "1.0.0",
"description": "My test setup of a TypeScript Project",
"main": "app.js",
"scripts": {
"test": "we are live!"
},
"author": "Matthew Horne",
"license": "ISC",
"devDependencies": {
"concurrently": "^3.5.0",
"lite-server": "^2.3.0",
"typescript": "^2.4.1"
}
}So far so good, our package is coming together, but it won’t compile TypeScript just yet, for that we need to generate a tsconfig.json file and then define some additional commands in the scripts object for our project.
So before we move on to configuring our scripts, run the following command.
tsc --initIf you get a message that says “Successfully created a tsconfig.json file.” then you should now see a tsconfig.json file in VS Code.
Setting up Our Scripts
Our script object currently has a test command which outputs when we use npm test. But we want to add some additional commands that define our TypeScript Compiler, TypeScript Compiler Watcher, lite server and a start command that concurrently runs lite server and watches for changes to TypeScript files to compile them and update our lite server in real-time which makes the development process so much sweeter.
So here is my updated package.json file with updated script commands.
{
"name": "typescript-test-setup",
"version": "1.0.0",
"description": "My test setup of a TypeScript Project",
"main": "app.js",
"scripts": {
"test": "we are live!",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrently "npm run tsc:w" "npm run lite" "
},
"author": "Matthew Horne",
"license": "ISC",
"devDependencies": {
"concurrently": "^3.5.0",
"lite-server": "^2.3.0",
"typescript": "^2.4.1"
}
}In our scripts object we defined our TypeScript compiler with "tsc": "tsc", and our TypeScript compiler in watch mode "tsc:w": "tsc -w", lite server as "lite": "lite-server" and finally our all-important start command.
"start": "concurrently "npm run tsc:w" "npm run lite" "Concurrently
This is where concurrently comes into it. Our start command will concurrently run the TypeScript Compiler (tsc) in watch mode (-w) as well as run our lite server.
After saving your package.json the last step is the start the project.
In your terminal type npm start and our start command defined in the script object will be executed.
If everything has been setup correctly you will see Watching files… and Chrome should have opened up our project in watch mode, and any TypeScript files in our project will compile to JavaScript which is why you will see an app.js file which previously wasn’t there, the compiler generated it.
The next step is to write something into our app.ts and we should see activity in our terminal which is the TypeScript Compiler Watcher and lite server doing there jobs.
Now when we make changes to app.ts and save it, the compiler will take our TypeScript and compile it to JavaScript which you can see in app.js and our lite server updates accordingly.
One of the advantages of NPM is that once you have a package.json setup, you can copy the package and run the npm install command to install all the dependencies and then run npm start and boom, you have your project setup ready to begin writing your code. Just don’t forget to initialize your tsconfig with tsc --init.
