TypeScript for Beginners: A Practical Guide to Migrating a Basic Vanilla JavaScript Project into Type-Safe Code
Have you ever spent hours fixing a JavaScript app only to find out a variable had the data type? For example a function expected a number. Got a string causing unexpected behavior.
As JavaScript apps grow, keeping code quality good gets harder. This is where TypeScript helps. TypeScript is a superset of JavaScript that adds typing. It helps developers catch errors during development of after deployment.
In this guide you'll learn how to move a simple vanilla JavaScript project to TypeScript. You'll also learn how to set up your development environment define types avoid mistakes and slowly make your code type-safe.
## What Is TypeScript. Why Should You Use It?
TypeScript is a programming language made by Microsoft. It extends JavaScript by adding static types.
### Benefits of TypeScript
* Finds errors before runtime
* Makes code easier to read
* Improves suggestions in your code editor
* Makes changing code safer
* Helps teams work together better
* Improves long-term project maintenance
Lets look at a JavaScript example:
```javascript
function calculateTotal(price tax) {
return price + tax;
}
calculateTotal("100" 20);
```
Output:
```javascript
"10020"
```
The result is wrong because JavaScript combines strings.
With TypeScript:
```typescript
function calculateTotal(price: number, tax: number): number {
return price + tax;
}
calculateTotal("100" 20);
```
TypeScript immediately reports:
```text
Argument of type 'string' is not assignable to parameter of type 'number'
```
The bug is caught before the code runs.
## Setting Up TypeScript in an Existing JavaScript Project
Lets say you have a project structure:
```text
project/
├── index.html
├── app.js
├── utils.js
└── styles.css
```
### Step 1: Initialize npm
If your project doesn't use npm yet:
```bash
npm init -y
```
### Step 2: Install TypeScript
```bash
npm install typescript --save-dev
```
Check installation:
```bash
npx tsc --version
```
### Step 3: Create a TypeScript Configuration File
Generate a default configuration:
```bash
npx tsc --init
```
This creates:
```json
{
"compilerOptions": {
"target": "es6"
"module": "commonjs"
": true
"outDir": "./dist"
}
}
```
Important settings:
| Option | Purpose |
| ------ | -------------------------------- |
target | JavaScript version output |
| module | Module system |
| strict | Enables strict type checking |
| outDir | Output folder for compiled files
## Converting JavaScript Files to TypeScript
Rename your files:
```text
app.js → app.ts
utils.js → utils.ts
```
Your project now looks like:
```text
project/
├── src/
│ ├── app.ts
│ └── utils.ts
├── dist/
└── tsconfig.json
```
## Adding Types to Variables
JavaScript:
```javascript
let username = "John";
let age = 25;
```
TypeScript:
```typescript
let username: string = "John";
let age: number = 25;
```
### Common Primitive Types
```typescript
let name: string = "Alice";
let age: number = 30;
let active: boolean = true;
```
### Arrays
```typescript
let scores: number[] = [90 85 95];
```
```Typescript
let scores: Array<number> = [90 85 95];
```
## Typing Functions Correctly
One of the wins from using TypeScript is typing function parameters and return values.
JavaScript:
```javascript
function greet(name) {
return "Hello " + name;
}
```
TypeScript:
```typescript
function greet(name: string): string {
return `Hello ${name}`;
}
```
parameters:
```typescript
function multiply(a: number, b: number): number {
return a * b;
}
```
Optional parameters:
```typescript
function createUser(
name: string,
age?: number
): string {
return name;
}
```
## Working with Objects and Interfaces
Large JavaScript projects often use complex objects.
JavaScript:
```javascript
const user = {
id: 1
name: "Sarah"
email: "sarah@example.com"
};
```
TypeScript Interface:
```typescript
interface User {
id: number;
name: string;
email: string;
}
```
Usage:
```typescript
const user: User = {
id: 1
name: "Sarah"
email: "sarah@example.com"
};
```
### Why Interfaces Matter
Interfaces:
* Make code documentation better
* Reduce errors
* Enable object structures
* Improve team collaboration
## Handling DOM Elements Safely
Vanilla JavaScript often interacts with the DOM.
JavaScript:
```javascript
const button = document.getElementById("submit");
button.addEventListener("click" () => {
console.log("Clicked");
});
```
TypeScript may show:
```text
Object is possibly 'null'
```
version:
```typescript
const button = document.getElementById("submit");
if (button) {
button.addEventListener("click" () => {
console.log("Clicked");
});
}
```
Or:
```typescript
const button = document.getElementById(
"submit"
) as HTMLButtonElement;
```
## Migrating Modules
JavaScript:
```javascript
export function add(a, b) {
return a + b;
}
```
TypeScript:
```typescript
export function add(
a: number,
b: number
): number {
return a + b;
}
```
Import:
```typescript
import { add } from "./utils";
```
TypeScript works well with modern ES modules.
## Using TypeScripts Strict Mode
One of the valuable features during migration is strict mode.
Inside `tsconfig.json`:
```json
{
"compilerOptions": {
"strict":
}
}
```
Strict mode checks for:
* Null references
* Undefined values
* Incorrect assignments
* Missing properties
* Unsafe function calls
Although strict mode may initially generate many errors fixing them makes your code much better.
## Common Migration Mistakes to Avoid
### 1. Using `any`
Bad:
```typescript
let data: any;
```
Good:
```typescript
let data: string;
```
Using `any` too much removes TypeScripts benefits.
### 2. Migrating Everything at
Take it slow.
Recommended order:
1. Utility functions
2. Business logic
3. API calls
4. UI components
### 3. Ignoring Compiler Warnings
Every TypeScript warning is a bug.
Take warnings seriously. Fix them early.
### 4. Skipping Interface Definitions
Avoid:
```typescript
const user: any = {};
```
Prefer:
```typescript
interface User {
id: number;
name: string;
}
```
## Real-World Migration Example
Original JavaScript:
```javascript
function getDiscount(price, percentage) {
return price. (Price * percentage) / 100;
}
```
TypeScript Version:
```typescript
function getDiscount(
price: number,
percentage: number
): number {
return price. (Price * percentage) / 100;
}
```
The discount formula is:
Discounted\ Price = Price. \Frac{Price \times Percentage}{100}
Benefits:
* Prevents inputs
* Improves autocomplete
* Documents expected values
* Simplifies maintenance
## Recommended Tools, for TypeScript Development
### Visual Studio Code
Features:
* code completion
* Built-in TypeScript support
* Error highlighting
### ESLint
Helps enforce coding standards and detect issues early.
### Prettier
Automatically formats TypeScript code consistently.
### TypeScript Playground
Useful for testing code bits before putting them into action.
---
## Easy Wins for New TypeScript Users
If you are just beginning to switch today:
### Win #1
Turn on mode.
```json
{
": true
}
```
### Win #2
Type all function inputs.
### Win #3
Make interfaces for objects.
### Win #4
Swap out any` types.
### Win #5
Move utility files first.
These changes can really improve dependability.
---
##
Switching a JavaScript project to TypeScript is a great move for your code. TypeScript helps find bugs makes developers more productive improves code docs and makes apps easier to grow.
The best way is to migrate bit by bit. Start by installing TypeScript turning on mode converting utility functions defining interfaces and slowly adding type safety to your project. Over time you will see errors when the app runs, better support, from tools and more confidence when changing code.
Have you started switching a JavaScript project to TypeScript? Share your problem or success story in the comments below and don't forget to share this guide with fellow developers who are ready to write safer more maintainable code.
No comments:
Post a Comment