How to start a TypeScript project from scratch

Starting a TypeScript project from scratch involves several steps, including setting up the environment, initializing the project, and configuring TypeScript. Here’s a step-by-step guide to help you get started:

1. Install Node.js and npm

Before you start, make sure you have Node.js and npm (Node Package Manager) installed on your system. You can check if they are installed by running the following commands in your terminal:

node -v
npm -v

If not, download and install Node.js from the official website. npm comes bundled with Node.js.

2. Set Up a New Directory for Your Project

Create a new directory for your TypeScript project and navigate into it:

mkdir my-typescript-project
cd my-typescript-project

3. Initialize the Project

Use npm to initialize a new project. This will generate a package.json file:

npm init -y

This will set up a basic package.json file with default values. You can manually edit this file later.

4. Install TypeScript

Next, install TypeScript as a development dependency:

npm install typescript --save-dev

This will install TypeScript locally in your project.

5. Create a TypeScript Configuration File

Generate a tsconfig.json file, which will be used to configure the TypeScript compiler:

npx tsc --init

This will create a tsconfig.json file with default options. You can customize it according to your project’s needs. Some common options to adjust:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

• target: Specifies the JavaScript version to compile to (e.g., ES5, ES6).
• module: Defines the module system (e.g., CommonJS for Node.js projects).
• outDir: Specifies where the compiled JavaScript files should go.
• rootDir: The folder that contains your TypeScript source files.
• strict: Enables strict type-checking options.

6. Create a src Directory

Create a folder for your TypeScript source files:

mkdir src

7. Write a TypeScript File

Create a simple TypeScript file in the src directory, for example, index.ts:

// src/index.ts
const greeting: string = "Hello, TypeScript!";
console.log(greeting);

8. Compile TypeScript to JavaScript

To compile your TypeScript code into JavaScript, run:

npx tsc

This will compile the TypeScript files in your src folder and output JavaScript files in the dist folder (as specified in tsconfig.json).

9. Run the Compiled JavaScript

Run the generated JavaScript file with Node.js:

node dist/index.js

10. Automate Compilation (Optional)

You can add a script in your package.json to compile TypeScript easily:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

Now, you can compile TypeScript and run the project with:

npm run build
npm start

11. Optional: Install ts-node for Development

For quicker development, you can install ts-node, which allows you to run TypeScript files directly without compiling them:

npm install ts-node --save-dev

Then, you can run your TypeScript files directly using:

npx ts-node src/index.ts

12. Optional: Install ESLint for Linting

You can install ESLint to ensure your code follows best practices:

npm install eslint --save-dev
npx eslint --init

You can configure it to work with TypeScript during the setup.

Summary

1. Install Node.js and npm.
2. Create a project directory and initialize it with npm init.
3. Install TypeScript as a development dependency.
4. Configure TypeScript using tsconfig.json.
5. Write TypeScript code in the src directory.
6. Compile TypeScript to JavaScript using npx tsc.
7. Run the JavaScript output with Node.js.

Feature photo by Mohammad Rahmani on Unsplash