Skip to content

Development Environment Setup

Video Lecture

Section Video Links
Dev Env Setup Development Environment Setup Development Environment Setup 
Course Code Course Code Course Code 

Overview

All the examples in this course will be run using the Node.js runtime. All the code is written in TypeScript first and then converted into JavaScript that the Node.js runtime will further interpret and execute.

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 installation has finished, depending on your operating system, whether Windows, Linux or Mac OSX, open a terminal/bash/cmd or PowerShell prompt and type,

node -v

If the installation completed without issue, you should see a response similar to

v16.13.2

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

npm -v

Output should be a version number and not an error. E.g.,

8.11.10

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 installation is successful by checking the version number.

tsc -v

Output should be a version number and not an error. E.g.,

4.7.2

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.

tsc.cmd -v

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 tsc.

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.

Course Code

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.

Or,

you can download a zip of all the code, using the link

https://sbcode.net/typescript/zips/Design-Patterns-In-TypeScript.zip

or using 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 set up 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

The 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 src and dist

mkdir src
mkdir dist

So that your folder structure appears as below.

|-- Design-Patterns-In-TypeScript
    |-- dist
    |-- src

Then type npm init, accept all defaults by pressing enter/return for each question.

npm init

This would have created a new file in your project root named package.json.

Now since we are writing TypeScript that will use some inbuilt Node.js functionality, we will need to also install the Node.js types.

So, run

npm install --save @types/node

This will add a new dependency to your existing package.json for the Node.js types that some 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 tsc compiles the code, it will create the JavaScript equivalent versions of it in the ./dist/factory folder.

We will type the TypeScript source code in the ./src/* folder hierarchy and the Node.js runtime will execute the outputted JavaScript that TSC saved 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.

SBCODE Editor (SBEDIT)

Many of the code examples on this website are also demonstrated using the SBCODE Editor (SBEDIT).

SBEDIT is able to compile TypeScript code in the browser.

This allows you to quickly experiment and share with ideas, without the need to open an IDE on your desktop to the same thing.

You can also make custom edits to any of the examples, and share them with your friends and colleagues.

Remember though, that while using an online IDE is great for prototyping and sharing, it has its limitations compared to using a desktop IDE. It is not as versatile, especially in terms of intellisense, loading type declaration files and real-time type checking.

Example,

<>

In order to compile/transpile TypeScript in the browser at runtime, SBEDIT relies on the specific text/typescript library which was written for the purpose.

Note that compiling/transpiling TypeScript using a well configured desktop IDE, as shown in the course, will always produce a better result. And if building websites is your end goal, then also using a build tool to bundle your code is advisable.

More sophisticated bundling tools are discussed in my Threejs and React Three Fiber courses.