Chapter 4: Practical Setting – Installing and Configuring TypeScript

In this chapter we will see how to install and configure TypeScript in our development environment.

To do this we will need node.js installed on our machine. You can download it from official website.

🔗 Do you like Techelopment? Check out the website for all the details!

1. TypeScript installation

TypeScript is installed via npm, the Node.js package manager.

Make sure you have Node.js installed (node -v and npm -v from terminal).

▶️ Install TypeScript globally:

npm install -g typescript

This command allows you to use tsc (TypeScript Compiler) from any folder.

Verify installation:

tsc -v
# Output: Versione di TypeScript, es. 5.3.x

2. First `.ts` file and compiling

Create a file called hello.ts with this content:

function greeting(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greeting("Alena"));

Compile the file with:

tsc hello.ts

You will get a hello.js file with the same typeless code (ready to run with Node.js or in the browser).

Run the code:

node hello.js

3. Initialize a TypeScript project

To work in a structured way, it is a good idea to create a project and configure it with a tsconfig.json file.

▶️ Create a folder and initialize the project:

mkdir my-project-ts
cd my-project-ts
npm init -y

▶️ Install TypeScript as a local dependency:

npm install --save-dev typescript

▶️ Create the tsconfig.json file:

npx tsc --init

This generates a configuration file with hundreds of options (but you can ignore most of them for now).

4. The `tsconfig.json` file: what is it for?

This is the heart of a TypeScript project setup.

Here is a basic example:

{
  "compilerOptions": {
    "target": "es6",              // Output JS version
    "module": "commonjs",         // Module system
    "strict": true,               // Enable all strict controls
    "outDir": "./dist",           // Where to put compiled JS files
    "rootDir": "./src",           // Where to look for TS files
    "esModuleInterop": true       // For compatibility with JS libraries
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

This configuration tells TypeScript to:

Read TS files from src folder
Compiling in dist/
Use ES6 as target of output
Apply strict type controls

5. Recommended project structure

mio-progetto-ts/
├── src/
│   └── index.ts
├── dist/
├── tsconfig.json
├── package.json

Create src/index.ts with some test code:

const sum = (a: number, b: number): number => a + b;
console.log(sum(2, 3));

Compile everything:

npx tsc

Check the contents of dist/index.js and run:

node dist/index.js

6. Compiling with `tsc --watch`

To avoid having to manually recompile every time:

npx tsc --watch

TypeScript will watch .ts files and will recompile them every time you save them.
Super convenient during development.

7. Integration with build tools (optional)

In more complex projects, TypeScript can be integrated with:

Webpack (with ts-loader)
Vite (supports TypeScript natively)
Babel (with preset for TS)
ts-node to run TS directly without compiling separately

Example of direct execution with ts-node:

npx ts-node src/index.ts

8. TypeScript and JavaScript libraries

When using JS libraries in TypeScript, you need type definitions.

For example, if you want to use Lodash:

npm install lodash
npm install --save-dev @types/lodash

This allows you to use Lodash with autocompletion and type checking.

In sintesi

TypeScript is installed with npm and it is used through tsc
.ts files must be compiled in .js
tsconfig.json helps you organize and customize the project
You can also start gradually in existing JavaScript projects.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog