DEV Community

luiz tanure
luiz tanure

Posted on • Originally published at letanure.dev

TypeScript for JavaScript Developers – Getting Started

#typescript #javascript #tutorial

Note: This article was originally published on February 14, 2018. Some information may be outdated.

TypeScript is a typed superset of JavaScript that compiles down to plain JS.

By 2018 it was no longer niche: major frameworks (Angular, Nest, Ionic) adopted it, and surveys showed rising usage.

Install the compiler 

npm install --save-dev typescript
npx tsc --init
Enter fullscreen mode Exit fullscreen mode

tsconfig.json controls compiler options.

Basic types 

let age: number = 30;
let name: string = 'Luiz';
let isActive: boolean = true;
let tags: string[] = ['css', 'html'];
Enter fullscreen mode Exit fullscreen mode

The compiler flags type mismatches before code runs.

Interfaces 

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

function greet(u: User) {
  return `Hi ${u.name}`;
}
Enter fullscreen mode Exit fullscreen mode

Interfaces describe shapes of objects for safer contracts.

Classes with access modifiers 

class Counter {
  private count = 0;

  inc(): number {
    return ++this.count;
  }
}
Enter fullscreen mode Exit fullscreen mode

private and public make intent clear, unlike plain JS objects.

Enums 

enum Status { Open, Closed, Pending }
const ticket = { status: Status.Open };
Enter fullscreen mode Exit fullscreen mode

Compile to JavaScript 

npx tsc
Enter fullscreen mode Exit fullscreen mode

The compiler emits *.js files matching the input structure.

Integrating with Webpack 

npm install --save-dev ts-loader
Enter fullscreen mode Exit fullscreen mode

webpack.config.js

module.exports = {
  module: {
    rules: [{ test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ }]
  },
  resolve: { extensions: ['.ts', '.js'] }
};
Enter fullscreen mode Exit fullscreen mode

Benefits in large codebases

  • Early error detection reduces runtime bugs.
  • IDE tooling: autocomplete, inline docs, safe refactor.
  • Self‑documenting code thanks to explicit types.
  • Gradual adoption: rename files to .ts one at a time, use // @ts-check in JS.

TypeScript lets teams scale JavaScript projects confidently while still shipping standard JS to the browser.

Top comments (0)