TypeScript Tips for JavaScript Developers: Writing Safer Code with Confidence

~ 1 min read

frontend javascript typescript web development

TypeScript can feel intimidating at first, but once you understand the basics, it opens the door to safer and more maintainable code. This article walks through the essential features every JavaScript developer should know.

Why TypeScript?

  • Adds static typing to JavaScript
  • Catches errors at compile time
  • Improves code readability and tooling support

Type Annotations

let age: number = 25
let name: string = 'Alice'
let isLoggedIn: boolean = true

Interfaces

Use interfaces to define object shapes:

interface User {
    id: number
    name: string
    email?: string // optional
}

const user: User = {
    id: 1,
    name: 'Dave'
}

Functions with Types

function greet(name: string): string {
    return `Hello, ${name}`
}

Generics

Create reusable types:

function identity<T>(arg: T): T {
    return arg
}

const num = identity<number>(5)
const str = identity<string>('hello')

Type Assertions

const input = document.querySelector('input') as HTMLInputElement
console.log(input.value)

Enums

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let dir: Direction = Direction.Left;

tsconfig.json Basics

{
    "compilerOptions": {
        "target": "ES6",
            "module": "commonjs",
            "strict": true,
            "esModuleInterop": true
    }
}

Tooling

Use VSCode with the official TypeScript extension. Enable strict mode for the best safety.

TypeScript bridges the gap between dynamic flexibility and static safety. Once you start typing your JavaScript, you’ll notice fewer bugs and better collaboration across your team. Start small, and gradually refactor your existing JS code to TS with confidence.

all posts →