Getting Started with TypeScript | TypeScript Tuesdays ep.1

Note that if using something like CRA or Vite, a lot of this is done for us. This demonstrates full control and setup over a project without any tooling. Note that to get expected behaviors of advanced tooling like Vite or CRA, etc. it is expected you know more about the TSConfig options, web-pack, build tooling etc.

Tsconfig Documentation

Step 1 - Initialize a TypeScript Project

tsc --init

In the tsconfig.json, uncomment outDir and rootDir and set them to the appropriate directories we want our compiler to compile code in and then output it to
- rootDir - Specify the root folder within your source files. Typically we do this in a /src folder and put all source code inside that. Therefore
  - set rootDir to ‘./src’
- outDir - Specify an output folder for all emitted files. Typically we set this up to be ./build or ./dist. Therefore,
  - set outDir to ‘./build’ or ‘./dist’

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./build",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "skipLibCheck": true
  }
}

By default this file will have every possible configuration key/value in the file. I removed all the ones I did not need and used this basic configuration. I am still learning about TSConfig and I found that there are some good articles on Google that mention popular TSConfig setups.

Step 2 - Install Required Base Dependencies (Environment agnostic)

npm i -D nodemon
npm i dotenv
npm i concurrently
npm i typescript
npm i @types/node

Note the @types dependency. Many npm modules / libraries need types installed to work with TS. In our case, we install the nodejs types to get nice type checking however we will also need it for other libraries. Be sure if an error shows up for any library you install mentioning something about “no configuration" or "types missing”, etc. this means we need a @types file. By convention, for every library we install, we should go to npm website and see if it uses TS. If so, we need to install types. We also can wait til build time and see if the error of missing types shows up or not.

Also note the comments in the json file. Please remove these before attempting to run the project as comments are not allowed in JSON

Step 3 - Setup scripts to compile, run and watch for changes

Setup script to compile in watch mode a TS project (configure rootDir and outDir in tsconfig so tsc knows where to look)
Setup script to actually run the compiled JS file in the outDir (build folder)
Setup a start script to run both concurrently so we get auto compilation and code running with Nodemon in real-time

{
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start:build": "tsc -w", #compiles the code and watches for changes via the -w (Watch) flag
    "start:run": "nodemon build/index.js", # Runs the compiled / built code
    "start": "concurrently npm:start:*" # Runs both compilation and code execution scripts concurrently to get real-time updates / not need to restart server on changes, etc
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^18.7.16",
    "concurrently": "^7.4.0",
    "dotenv": "^16.0.2",
    "typescript": "^4.8.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.19"
  }
}

Note the use of nodemon and concurrently. These are npm modules needed to be installed immediately before attempting to run this code. Else, only the code will be compiled and ran, but nothing will show up.

Step 3 - Properly Organize the Codebase for proper configuration and expected behavior

Now that we have established the base-line configuration for a new TypeScript project, we need to properly organize our codebase to enable all this to work and run our code properly. Below is a screenshot of the typical flow of a TS app

Note that if you build a web server with express, nodejs and ts using above configuration, the only thing missing from here is the code to startup a basic app on port 3000 in the index.ts file but also the express dependency. If you plan to make an express app with TS, just run npm install express and you are then solid!

And that's it! You now should be able to run the project and see the console log in the terminal. Remember, this is just a basic setup to get you going. Lookout for future articles from me in the future for Express app setup, TS / React setup etc. but also leverage Youtube, other lovely Hashnode articles and more to really get your feet wet.

Tanner Barcelos