DEV Community

0xkoji
0xkoji

Posted on

Create devenv with Node + Typescript + yarn

To be honest, I don't like javascript, but there is no choice since I need to work on frontend with reactjs lol.

As many of you know, recently using Typescript is very popular/general. When I started using that, I felt kind of stressful, but now kind of understand why we need to use Typescript instead of pure js.

Now, basically I'm trying to use Typescript when I need to write js for something.

Today, I will leave a basic enviroment for nodejs with Typescript here.
In this case, I'm using yarn because yarn is faster than npm 😂

package.json

{
  "name": "ntenv",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch-ts": "tsc -w",
    "start": "node build/dist/server.js",
    "build": "tsc -p tsconfig.json",
    "dev": "concurrently \"npm run watch-ts\" \"npm start\"",
    "clear": "rm -rf build/dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^4.1.0",
    "express": "^4.16.4"
  },
  "devDependencies": {
    "@types/express": "^4.16.1",
    "@types/node": "^11.11.3",
    "ts-loader": "^5.3.3",
    "tslint": "^5.14.0",
    "tslint-loader": "^3.5.4",
    "typescript": "^3.3.3333"
  }
}

Enter fullscreen mode Exit fullscreen mode

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es2017",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "sourceMap": true,
    "rootDir": "src",
    "outDir": "build/dist",
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,
    "paths": {
      "~src/*": [
        "src/*"
      ],
    },
    "strict": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "build",
  ]
}
Enter fullscreen mode Exit fullscreen mode

tslint.json

{
    "extends": [
        "tslint:latest",
        "tslint-eslint-rules",
        "tslint-config-prettier"
    ],
    "linterOptions": {
        "exclude": ["node_modules/**/*.ts"]
    },
    "defaultSeverity": "warning",
    "jsRules": {},
    "rules": {
        "await-promise": true,
        "cyclomatic-complexity": [true, 15],
        "interface-name": [true, "never-prefix"],
        "interface-over-type-literal": false,
        "match-default-export-name": true,
        "member-access": [true, "no-public"],
        "member-ordering": [true],
        "no-boolean-literal-compare": true,
        "no-inferred-empty-object-type": true,
        "no-floating-promises": true,
        "no-implicit-dependencies": [true, "dev", ["~src"]],
        "no-inferrable-types": [true, "ignore-params", "ignore-properties"],
        "no-submodule-imports": false,
        "no-unnecessary-callback-wrapper": true,
        "no-unnecessary-type-assertion": true,
        "no-console": [false],
        "no-void-expression": [true, "ignore-arrow-function-shorthand"],
        "object-literal-shorthand": false,
        "object-literal-sort-keys": false,
        "prefer-conditional-expression": false,
        "promise-function-async": true,
        "triple-equals": [true, "allow-undefined-check", "allow-null-check"],
        "max-classes-per-file": [true, 1],
        "ordered-imports": false
    },
    "rulesDirectory": []
}

Enter fullscreen mode Exit fullscreen mode

server.ts

import e from "express";

const app = e();
const PORT = 3000;
app.get('/', (req: e.Request, res:e.Response )=> {
    return res.send ("Hello I like Typescript!!!");
});


app.listen(PORT, ()=>{
    console.log(`server is running and using port: ${PORT}`);
});


export default app;
Enter fullscreen mode Exit fullscreen mode

Run server.js

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

Then, access to localhost:3000. You will see the following.
server.js

Top comments (0)