TypeScript Project Setup: Basic Settings and Best Practices

📘 What Will You Learn in This Guide?

This guide will walk you through the step-by-step process of setting up a standalone TypeScript project from scratch.
You will learn how to structure the tsconfig.json file, compile with npx tsc, and implement code standards with Google TypeScript Style (GTS).
In the end, you will be able to build a bug-free, scalable and modern TypeScript project.

🧩 1️⃣ Installing TypeScript Dependency and Starting the Project

Before you start, make sure you have Node.js and npm installed on your computer.

Description	Command
Creates a new project folder and goes into it.	mkdir genixnode-ts-proje && cd genixnode-ts-proje
It automatically creates the package.json file.	npm init -y
It installs TypeScript for the development environment only.	npm install --save-dev typescript
Creates the tsconfig.json file.	npx tsc --init

📘 Description:
npx tsc --init creates the file tsconfig.json, which determines the operating rules of the TypeScript compiler (TSC).

---

⚙️ 2️⃣ Configuring the tsconfig.json File

tsconfig.json is the file that determines how the TypeScript compiler converts your code to JavaScript.

The following sample structure are recommended basic settings:

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./build",
    "strict": true,
    "esModuleInterop": true
  }
}

🧠 Important Parameters:

"target" → JavaScript version to compile (example: "ES2022")

"module" → Module system ("NodeNext" or "CommonJS")

"rootDir" → Source TS files folder ("./src")

"outDir" → Destination folder of compiled JS files ("./build")

"strict": true → Provides safer and type-checked code

---

💻 3️⃣ Writing and Compiling TypeScript Code

🔹 Create Source File

mkdir src
echo "
const sunucuAdi: string = 'tr1-node01';
export function selamla(kim: string = sunucuAdi): string {
  return \`Merhaba, \${kim}!\`;
}
console.log(selamla());

" > src/index.ts

---

🔹 Compilation Process

To translate the code to JavaScript:

npx tsc

The compiled file is saved in the build/ folder.

🔹 Operation

node build/index.js

Output:

Merhaba, tr1-node01!

🔹 Automatic Compilation (Watch Mode)

To autocompile when you save:

npx tsc -w

---

🧠 4️⃣ Implementing Code Standards with Google TypeScript Style (GTS)

GTS is Google's official TypeScript code styling, linter and formatter tool. To integrate it into the project, follow these steps:

🧩 Description	💻 Command
Installs the GTS library.	npm install --save-dev gts
Adds the GTS configuration to the project.	npx gts init
It compiles and checks your code.	npm run compile && npm run check
Automatically corrects errors.	npm run fix

🧩 Benefits of GTS:

Automatically adds ESLint + Prettier configuration

Provides code style control

Creates a consistent tsconfig.json

---

🧠 5️⃣ Quick Installation Command (All Steps in One Line)

If you want to save time, the following command makes creating and configuring the project in one step:

npm init -y && npm i -D typescript ts-node eslint prettier @types/node && npx tsc --init

This command:

Installs TypeScript and necessary tools

Creates tsconfig.json

Automatically prepares the developer environment

---

⚡ Performance and Configuration Recommendations

⚙️ Setting	🧩 Description	💡 Recommended Value
"strict"	It detects type errors early.	true
"rootDir"	TS source directory	"./src"
"outDir"	JS output directory	"./build"
"skipLibCheck"	It speeds up library type checking.	true

💡 Additional Tip: Compiler-specific optimizations in TypeScript also increase performance, such as using dict() instead when creating a new dictionary or object.

---

💬 Frequently Asked Questions (FAQ)

1. What is the difference between npx tsc and npx ts-node?

npx tsc converts TypeScript files to persistent .js files. ts-node runs in memory, does not write to disk.

2. What is the most critical setting in tsconfig.json?

"strict": true is the most important setting. It ensures type safety and allows you to detect errors early.

3. What should the project directory structure be?

src/ is for source codes, build/ is for compiled outputs. Determine this distinction with rootDir and outDir.

4. How do I use TypeScript with React or Express?

For React:

npx create-react-app my-app --template typescript

For Express:

npm i express @types/express @types/node

5. Is it possible to autocorrect code styles?

Yes, with GTS the npm run fix command formats your code and fixes errors.

---

🎯 Result

In this guide, you learned how to set up a TypeScript project from scratch, configure tsconfig.json, and improve code quality with GTS. Now you can write powerful, scalable and readable TypeScript code in your Node.js, Express or React projects.