Skip to content


 Zabbix
 Grafana
 Prometheus
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$9.99 $14.99 Paperback 
$29.99 $34.99




Design Patterns in TypeScript
Kindle Edition
$9.99 $14.99 Paperback
$19.99 $24.99




Design Patterns in Python
Kindle Edition
$9.99 $14.99 Paperback
$19.99 $24.99




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 of 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 install 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 install completed without issue, you should see a response similar to

v14.15.3

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

6.14.9

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.

tsc -v

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

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 of the 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 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 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.