Skip to content

Instantly share code, notes, and snippets.

@wardenlym
Last active November 21, 2018 06:50
Show Gist options
  • Save wardenlym/d54c15786b8d5585eab388a5b4bf6815 to your computer and use it in GitHub Desktop.
Save wardenlym/d54c15786b8d5585eab388a5b4bf6815 to your computer and use it in GitHub Desktop.
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