Getting Started with TypeScript: A Beginner’s Tutorial for Building Your First Web App
Learn how to build your first web app using TypeScript with this beginner-friendly tutorial. Understand TypeScript basics, setup, and build a simple interactive web app step-by-step.
TypeScript is a powerful, statically typed superset of JavaScript that compiles to plain JavaScript. It helps catch errors early and makes your code more maintainable. In this tutorial, we'll guide you through the basics of TypeScript and build a simple interactive web app using TypeScript.
### Step 1: Setting Up Your Environment First, make sure you have Node.js installed. Then, install TypeScript globally using npm.
npm install -g typescriptCreate a new folder for your project and navigate into it. Initialize a new Node.js project and install a simple HTTP server to serve your app locally.
mkdir my-first-ts-app
cd my-first-ts-app
npm init -y
npm install lite-server --save-devNext, create a `tsconfig.json` file to configure the TypeScript compiler by running:
tsc --initThis creates a config file with many options. The default settings are fine for this tutorial.
### Step 2: Writing Your First TypeScript Code Create a folder named `src`. Inside it, create a file `index.ts`.
function greet(name: string): string {
return `Hello, ${name}! Welcome to TypeScript.`;
}
const userName = 'Friend';
console.log(greet(userName));This simple function takes a string `name` and returns a greeting. The type annotations (`: string`) help TypeScript catch errors before running the code.
### Step 3: Compiling TypeScript Run the command below to compile your TypeScript file into JavaScript:
tscThis generates `index.js` in the same directory. You can run this JavaScript file using Node.js:
node src/index.jsYou should see the greeting printed in your terminal.
### Step 4: Creating a Simple Web App Now, let's create an interactive web page. Create an `index.html` file in the root folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First TypeScript App</title>
</head>
<body>
<h1>Greeting App</h1>
<input type="text" id="nameInput" placeholder="Enter your name" />
<button id="greetBtn">Greet Me</button>
<p id="greeting"></p>
<script src="dist/index.js"></script>
</body>
</html>Update your TypeScript code in `src/index.ts` to handle user input and update the page dynamically:
function greet(name: string): string {
return `Hello, ${name}! Welcome to TypeScript.`;
}
const button = document.getElementById('greetBtn') as HTMLButtonElement;
const input = document.getElementById('nameInput') as HTMLInputElement;
const greeting = document.getElementById('greeting') as HTMLParagraphElement;
button.addEventListener('click', () => {
const name = input.value.trim();
if(name) {
greeting.textContent = greet(name);
} else {
greeting.textContent = 'Please enter your name.';
}
});### Step 5: Compiling and Running the App Modify your `tsconfig.json` to output compiled files to a `dist` folder. Find the line `"outDir": "./",` or add it inside `compilerOptions` as below:
{
"compilerOptions": {
"outDir": "./dist",
"target": "es5",
"module": "commonjs",
"strict": true
}
}Now compile your app again:
tscFinally, start your local server:
npx lite-serverYour browser should open `index.html`. Enter a name and click "Greet Me" to see your TypeScript-powered web app in action!
### Conclusion You’ve just built your first web app using TypeScript! This tutorial introduced how to write typed code, compile it, and interact with the browser. As you continue learning, explore interfaces, classes, and advanced TypeScript features to build powerful applications. Happy coding!