Introduction
- As we all know JS is a type of
[dynamic type](https://en.wikipedia.org/wiki/Programming_language#Static_versus_dynamic_typing)
. - Typescript makes it possible to read and code JS as
static type
instead ofdynamic type
. - This article focuses on installing a project with typescript.
Let’s start
- Initializing an Npm project
- Let’s quickly create the NodeJS project:1234$ <span class="token function">mkdir</span> node_project$ <span class="token function">cd</span> node_project$ <span class="token function">npm</span> init -y
- Installing Dependencies
- We have initialized the project. The next section needs to install the dependent packages to be able to run
typescript
123<span class="token function">npm</span> i -D typescript<span class="token function">npm</span> i -D tslint - The
-D
option stands for:--save-dev
. - Next install the
express
framework:123<span class="token function">npm</span> i express -S<span class="token function">npm</span> i @types/express -D - The second command is on Express Express settings. We need this package because TypeScript and Express are separate packages, so there’s no way for
Typescript
know the types ofclasss
in Express.
- Configuring TypeScript
- Typescript uses the
tsconfig.json
file to configure the compiler for the project. So we initialize thetsconfig.json
filetsconfig.json
same level as thepackage.json
file with the following content:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token punctuation">{</span> <span class="token property">"compilerOptions"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"module"</span> <span class="token operator">:</span> <span class="token string">"commonjs"</span> <span class="token punctuation">,</span> <span class="token property">"esModuleInterop"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"target"</span> <span class="token operator">:</span> <span class="token string">"es6"</span> <span class="token punctuation">,</span> <span class="token property">"moduleResolution"</span> <span class="token operator">:</span> <span class="token string">"node"</span> <span class="token punctuation">,</span> <span class="token property">"sourceMap"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"outDir"</span> <span class="token operator">:</span> <span class="token string">"dist"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"lib"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"es2015"</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
- Let’s take a look at some of these options and what they do:
module
: Specifies the module initialization method. Node usingcommonjs
.target
: Level of output (here is es6)moduleResolution
: helps the compiler figure out where theimport
will reference. Thenode
value -> mimics thenode
‘s module resolution mechanism.outDir
: Where to save the.js
file after being compiled. We save in thedist
folder.
- Note : You can do this automatically with the command:
tsc --init
- Next we will configure Typescript linting for the project. Run the following command to initialize
tslint.json
file:
1 2 | ./node_modules/.bin/tslint --init |
- Open the
tslint.json
file and add theno-console
astslint.json
:
1 2 3 4 5 6 7 8 9 10 | <span class="token punctuation">{</span> <span class="token property">"defaultSeverity"</span> <span class="token operator">:</span> <span class="token string">"error"</span> <span class="token punctuation">,</span> <span class="token property">"extends"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"tslint:recommended"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"jsRules"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"rules"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"no-console"</span> <span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"rulesDirectory"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
- By default, Typescript linter will block the
console
, we need to add the same rule as above.
- Updating the Package.json file
- Let’s create the
start
script to help us compile theTypescript
codeTypescript
a.js
file and run them. Updatepackage.json
file as below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token punctuation">{</span> <span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"node_project"</span> <span class="token punctuation">,</span> <span class="token property">"version"</span> <span class="token operator">:</span> <span class="token string">"1.0.0"</span> <span class="token punctuation">,</span> <span class="token property">"description"</span> <span class="token operator">:</span> <span class="token string">""</span> <span class="token punctuation">,</span> <span class="token property">"main"</span> <span class="token operator">:</span> <span class="token string">"dist/app.js"</span> <span class="token punctuation">,</span> <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"test"</span> <span class="token operator">:</span> <span class="token string">"echo "Error: no test specified" && exit 1"</span> <span class="token punctuation">,</span> <span class="token property">"start"</span> <span class="token operator">:</span> <span class="token string">"tsc && node dist/app.js"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"keywords"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"author"</span> <span class="token operator">:</span> <span class="token string">""</span> <span class="token punctuation">,</span> <span class="token property">"license"</span> <span class="token operator">:</span> <span class="token string">"ISC"</span> <span class="token punctuation">,</span> <span class="token property">"devDependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"@types/express"</span> <span class="token operator">:</span> <span class="token string">"^4.17.2"</span> <span class="token punctuation">,</span> <span class="token property">"tslint"</span> <span class="token operator">:</span> <span class="token string">"^5.20.1"</span> <span class="token punctuation">,</span> <span class="token property">"typescript"</span> <span class="token operator">:</span> <span class="token string">"^3.7.4"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"dependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"express"</span> <span class="token operator">:</span> <span class="token string">"^4.17.1"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- We have updated the
main
path. And create astart
script: starttsc
first and then run thenode
command. This allows us to precompile and run the result after compiling with thenode
.
- Setting up the folder structure
- We will create the
src
folder at the same level as thepackage.json
file and create anapp.ts
file inside it asapp.ts
:
1 2 3 4 | mkdir src cd src touch app.ts |
- By this time you should have the following directory structure:
1 2 3 4 5 6 7 8 9 10 | . ├── package.json ├── package-lock.json ├── src │ └── app.ts ├── tsconfig.json └── tslint.json 1 directory, 5 files |
- Create and running a basic Express Server
- We have configured Typescript and Typescript linter, next we will build Node Express Server. With the content in the
app.ts
file as below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">import</span> express <span class="token keyword">from</span> <span class="token string">"express"</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> port <span class="token operator">=</span> <span class="token number">3000</span> <span class="token punctuation">;</span> app <span class="token punctuation">.</span> <span class="token keyword">get</span> <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> req <span class="token punctuation">,</span> res <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> res <span class="token punctuation">.</span> <span class="token function">send</span> <span class="token punctuation">(</span> <span class="token string">"The sedulous hyena ate the antelope!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> app <span class="token punctuation">.</span> <span class="token function">listen</span> <span class="token punctuation">(</span> port <span class="token punctuation">,</span> err <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> err <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> err <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`server is listening on </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> port <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- The code above creates a simple Node server listening on port 3000. Let’s run the application with the following command.
1 2 | npm start |
- When the command completes, you should see the server message running on port 3000:
1 2 3 4 | > tsc && node dist/app.js server is listening on 3000 |
- And the directory structure will look like this (the dist folder is “pretty” out with the files inside):
1 2 3 4 5 6 7 8 9 10 11 12 13 | . ├── dist │ ├── app.js │ └── app.js.map ├── package.json ├── package-lock.json ├── src │ └── app.ts ├── tsconfig.json └── tslint.json 2 directories, 7 files |
- You can also access local with the link:
localhost:3000
.
1 2 3 | curl localhost:3000 The sedulous hyena ate the antelope! |
- If you want, you can also open the
dist/app.js
file to see the translated version ofTypescript
code. - Nice So we have successfully setup the Node project using Typescript!
Conclusion
- Thank you for watching here and wish you:
Happy coding with Typescript