TypeScript - lesson 2 | HackIndia Skills

Key point

One clean rule

Set up TypeScript as a project tool, not a global shortcut. Keep it in devDependencies, commit the config, and run it through npm scripts.

This makes your repo work on your laptop, your teammate’s laptop, and a recruiter’s machine.

What setup means

TypeScript needs two things: the TypeScript package and a tsconfig.json file. The package gives you the compiler. The config tells it what files to read and how strict to be.

In this lesson, you will not convert every file yet. You will prepare the project so later lessons can add types safely.

Your to-do

Install TypeScript

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open your project folder in VS Code or your terminal.
Run npm init -y if the project does not already have a package.json.
Install TypeScript as a development dependency.
Check that npx tsc works from the project.
Commit package.json and package-lock.json after install.

0 of 5 done

npm init -y
npm install --save-dev typescript
npx tsc --version

Example

Small tsconfig

Create tsconfig.json at the project root. This is a safe starting point for a small app.

It checks your source files, writes build output to dist, and avoids checking installed packages.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "Bundler",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "noEmitOnError": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

Tip

Start with src

Put your app code inside a src folder. Keep generated files in dist. This gives your repo a clean shape that is easy to inspect.

If your app already has files in the root, move one small file into src first. Do not reorganise everything five minutes before a hackathon demo.

Example

Add scripts

Your README should later show the same commands you use locally. Add scripts now so type-checking is one command.

For a basic TypeScript project, typecheck checks only. build checks and writes JavaScript into dist.

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

Common mistake

Avoid global installs

Do not depend on npm install -g typescript for your project. It may work on your laptop and fail for someone else.

Use npm install --save-dev typescript and run npx tsc or npm run typecheck. That proves the repo carries its own setup.