Development Environment Setup
|Dev Env Setup|
So, to get started, install Node.js first.
Open a browser and visit https://nodejs.org/en/download/
I am using Windows 10 64-bit, so I will use the 64-bit WIndows Installer (.msi). Be sure to use the correct installer for your operating system.
After the install has finished, depending on your operating system, whether Windows, Linux or Mac OSX, open a terminal/bash/cmd or PowerShell prompt.
If the install completed without issue, you should see a response similar to
All the code written in the course should work for versions of Node.js above v10.
Node.js also comes with another program called NPM. We will use NPM to install the TypeScript compiler (TSC).
Check that NPM exists and works, by typing
Output should be a version number and not an error. E.g.,
Now that Node.js and NPM work, we can install the TypeScript compiler (TSC) globally on our system.
npm install -g typescript
And then verify that the install is successful by checking the version number.
If you are using PowerShell, you may see an error concerning execution policy.
tsc.ps1 cannot be loaded because running scripts is disabled on this system
You have several options, such as run your commands using the classic Windows CMD prompt, Git Bash or use the
tsc.cmd option instead.
When I was writing the code in the course, I was using Visual Studio Code and executing TSC using PowerShell in the VSCODE integrated terminal.
I recommend to use VSCode, it is free and provides many useful features when coding.
Download VSCode from https://code.visualstudio.com/
When running PowerShell in the VSCode integrated terminal, you may also see the execution policy error.
You can use
tsc.cmd in place of
You can even use a different terminal prompt in the VScode integrated terminal such as the classic Windows CMD, Git Bash and there are many others that you may want to set up.
All the code examples in the course can be viewed from my GitHub repository at https://github.com/Sean-Bradley/Design-Patterns-In-TypeScript
If you have Git installed, you can download a copy locally using the command
git clone https://github.com/Sean-Bradley/Design-Patterns-In-TypeScript.git
You can install Git for Windows from https://gitforwindows.org/.
Linux will normally have git preinstalled.
you can download a zip of all the code, using the link
wget on Linux
wget https://sbcode.net/typescript/zips/Design-Patterns-In-TypeScript.zip sudo apt install unzip unzip Design-Patterns-In-TypeScript.zip cd Design-Patterns-In-TypeScript/
After extracting the zip, go to where you extracted it, and in the main folder where
package.json exists, run
npm install to setup the project.
You can then experiment with the code at your own pace and try out different variations.
If you would rather build the project manually and type the code from the book or webpages, then follow these further instructions.
On my system, I have created a working folder on one of my spare drives,
E:\, and then created a new folder in it named
Design-Patterns-In-TypeScript, and then
cd into it. You can use a different folder name and drive if you prefer.
C:\> e: E:\> mkdir Design-Patterns-In-TypeScript E:\> cd .\Design-Patterns-In-TypeScript
Design-Patterns-In-TypeScript folder is now also known as your projects root folder.
Throughout the documentation I will also refer to the project root folder as
Now while in your projects root folder, create two extra sub folders named
mkdir src mkdir dist
so that your folder structure appears as below.
|-- Design-Patterns-In-TypeScript |-- dist |-- src
npm init, accept all defaults by pressing enter/return for each question.
This would have created a new file in your project root named
Now since we are writing TypeScript that will use some of the inbuilt Node.js functionality, we will need to also install the Node.js types.
npm install --save @types/node
This will add a new dependency to your existing
package.json for the Node.js types that some of the example code in the course will directly reference.
Your folder structure should now match
|-- Design-Patterns-In-TypeScript |-- dist |-- node_modules |-- @types |-- node (A folder including many *.d.ts files) |-- src package.json package-lock.json
The basic project setup is now complete.
As each design pattern is introduced, it will be within its own sub folder named after the design pattern.
So, for example, all the TypeScript source code for the Factory pattern, will be in the
./src/factory folder, and when
We will type the TypeScript source code in the
./dist/* folder equivalent hierarchy.
Remember that if all the manual setup of the project becomes over whelming, there is the official GitHub project that you can refer to at https://github.com/Sean-Bradley/Design-Patterns-In-TypeScript.