What is TypeScript?
TypeScript is a tool made by Microsoft that helps you write better JavaScript code. Think of it like a spell-checker for your code. It adds types to JavaScript, which means you can catch mistakes before running your program. It’s like having a safety net.
TypeScript turns into plain JavaScript so it works everywhere JavaScript does, like in web browsers and on servers.
If you already know JavaScript, TypeScript will make your life easier. Even if you're new to coding, it helps you write cleaner and easier-to-understand code.
Why Learn TypeScript?
Here’s why learning TypeScript is worth your time:
Easier to Read: Types help make your code easier to understand.
Fewer Errors: TypeScript warns you about mistakes while you're still writing your code.
Better Maintenance: It's easier to update and improve your code without breaking things.
Popular: Big companies and frameworks like Angular use TypeScript.
Setting Up TypeScript
Before we build something fun, let’s set up the tools.
Step 1: Install Node.js
Go to https://nodejs.org and download Node.js. It comes with a tool called npm to manage software packages.
Step 2: Set Up a Project Folder
Open your terminal and create a folder:
mkdir my-typescript-app
cd my-typescript-app
Step 3: Initialize the Project
Create a setup file by running:
npm init -y
Step 4: Install TypeScript
Add TypeScript to your project:
npm install typescript --save-dev
Step 5: Create a TypeScript Config File
Run this command to set up how TypeScript should work:
npx tsc --init
This makes a file called tsconfig.json.
Building a Simple Web Application
We’ll create a simple to-do list app.
Step 1: Create Files
Make the following files:
my-typescript-app/
|-- index.html
|-- style.css
|-- src/
|-- app.ts
Step 2: Write HTML
In index.html, paste this:
Step 3: Add Some Styling
In style.css, paste this:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f9f9f9;
}
#app {
width: 300px;
text-align: center;
}
input {
width: 80%;
padding: 8px;
margin-bottom: 10px;
}
button {
padding: 8px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #e0e0e0;
padding: 8px;
margin: 5px 0;
}
Step 4: Write TypeScript Code
In src/app.ts, paste this:
interface Todo {
text: string;
done: boolean;
}
const todoInput = document.getElementById('todo-input') as HTMLInputElement;
const addButton = document.getElementById('add-todo') as HTMLButtonElement;
const todoList = document.getElementById('todo-list') as HTMLUListElement;
const todos: Todo[] = [];
function addTodo(): void {
const text = todoInput.value.trim();
if (text === '') return;
const newTodo: Todo = { text, done: false };
todos.push(newTodo);
renderTodos();
todoInput.value = '';
}
function renderTodos(): void {
todoList.innerHTML = '';
todos.forEach((todo, index) => {
const li = document.createElement('li');
li.textContent = todo.text;
li.addEventListener('click', () => toggleTodo(index));
if (todo.done) li.style.textDecoration = 'line-through';
todoList.appendChild(li);
});
}
function toggleTodo(index: number): void {
todos[index].done = !todos[index].done;
renderTodos();
}
addButton.addEventListener('click', addTodo);
Step 5: Compile TypeScript to JavaScript
Run this command to turn your TypeScript code into JavaScript:
> npx tsc
This creates dist/app.js.
Step 6: Open the Application
Open index.html in your browser. You now have a simple to-do app where you can add and cross out tasks.
Conclusion
Congratulations! You just built a simple web app using TypeScript. You learned how TypeScript helps catch mistakes and makes your code easier to maintain.
Next steps? Try exploring advanced features like generics, decorators, or using TypeScript with React or Angular.
Happy coding!
Just like how neon signs can light up a space and create a modern vibe, TypeScript can brighten your coding journey by making your development process more vibrant and structured.
Top comments (0)