Last active
November 21, 2018 06:50
-
-
Save wardenlym/d54c15786b8d5585eab388a5b4bf6815 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In a new folder, enter and accept all the defaults: | |
npm init | |
Let us install the development dependencies: | |
npm install -D typescript | |
npm install -D tslint | |
npm install -D nodemon | |
In this simple example, we will implement a simple Express application; so we install the dependencies: | |
npm install express | |
npm install @types/express | |
We create the TypeScript configuration; based on the TypeScript Node Starter project (explained there). | |
or | |
npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom | |
tsconfig.json | |
``` | |
{ | |
"compilerOptions": { | |
"module": "commonjs", | |
"esModuleInterop": true, | |
"target": "es6", | |
"noImplicitAny": true, | |
"moduleResolution": "node", | |
"sourceMap": true, | |
"outDir": "dist", | |
"baseUrl": ".", | |
"paths": { | |
"*": [ | |
"node_modules/*", | |
"src/types/*" | |
] | |
}, | |
"lib": [ | |
"es2015" | |
] | |
}, | |
"include": [ | |
"src/**/*" | |
] | |
} | |
``` | |
Observations: | |
The lib entry is not in the TypeScript Node Starter version | |
The code in this article runs without adding it | |
Went ahead and added it because I immediately had issues using configuration without it on other projects (including the GraphQL project) | |
The lib configuration is List of library files to be included in the compilation; Adding es2015, then allows TypeScript to fully support ES2015. I assumed it already did. | |
We create the TSLint configuration using the command: | |
./node_modules/.bin/tslint --init | |
and we add the three rules, interface-name, no-console, and quotemark (self-explanatory). | |
tslint.json | |
``` | |
{ | |
"defaultSeverity": "error", | |
"extends": [ | |
"tslint:recommended" | |
], | |
"jsRules": {}, | |
"rules": { | |
"interface-name": [false], | |
"no-console": [false], | |
"quotemark": [true, "single"] | |
}, | |
"rulesDirectory": [] | |
} | |
``` | |
We update the main and scripts sections of package.json: | |
package.json | |
``` | |
{ | |
"name": "hello-nodejs-typescript", | |
"version": "1.0.0", | |
"description": "", | |
"main": "dist/server.js", | |
"scripts": { | |
"build-ts": "tsc", | |
"start": "npm run serve", | |
"serve": "node dist/server.js", | |
"watch-node": "nodemon dist/server.js", | |
"watch-ts": "tsc -w" | |
}, | |
"author": "", | |
"license": "ISC", | |
"devDependencies": { | |
"nodemon": "^1.18.3", | |
"tslint": "^5.11.0", | |
"typescript": "^3.0.1" | |
}, | |
"dependencies": { | |
"@types/express": "^4.16.0", | |
"express": "^4.16.3" | |
} | |
} | |
``` | |
Observations: | |
During development, we use both npm run watch-ts (recompiles application on source changes) and npm run watch-node (restarts application on recompilation) | |
npm run build-ts only compiles the application | |
npm run serve (npm run start) only starts the application | |
With this in place we can create our Hello World Express application; the only change is we use import instead of require. | |
src / server.ts | |
To develop, we run: | |
npm run watch-ts | |
and in a separate terminal we run: | |
npm run watch-node | |
and then opening the url http://localhost:3000/ in a browser we can see the output of the application. | |
If we update the server.js source, the application is recompiled and restarted; reloading the browser will reflect the change. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment