DEV Community

0xkoji
0xkoji

Posted on

1 1

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

nextjs tutorial video

๐Ÿ“บ Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series ๐Ÿ‘€

Watch the Youtube series

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay