How to Use TypeScript – Beginner-Friendly TS Tutorial

TypeScript is rapidly gaining popularity as the go-to language for JavaScript developers who want to bring more robustness and maintainability to their code. As an experienced full-stack developer, I‘ve seen firsthand how TypeScript can help catch bugs early, improve code readability, and enhance the overall development experience.

In this beginner-friendly tutorial, we‘ll dive deep into what makes TypeScript so powerful and walk through everything you need to know to start using it in your own projects. Whether you‘re a front-end developer working with frameworks like React or Angular, or a back-end developer using Node.js, TypeScript has something to offer you.

Why TypeScript?

Before we jump into the specifics of using TypeScript, let‘s take a step back and examine why it‘s become so popular in recent years.

At its core, TypeScript is a superset of JavaScript that adds optional static typing. This means you can write TypeScript code almost exactly like you write JavaScript, but with the added benefit of type checking at compile time. The TypeScript compiler, tsc, analyzes your code and reports any type inconsistencies or potential bugs before the code ever runs.

This static typing is a game-changer for many developers. In plain JavaScript, it‘s all too easy to introduce subtle bugs by passing the wrong type of value to a function, or accessing a property on an undefined object. TypeScript catches these issues early, saving valuable debugging time.

But the benefits of TypeScript go beyond just catching bugs. By adding type annotations to your code, you‘re also creating a form of living documentation. Future developers (including your future self) can look at a function signature and immediately understand what types of arguments it accepts and what it returns. This makes code more self-describing and easier to reason about.

TypeScript‘s type system is also incredibly flexible. It supports all the basic JavaScript types like string, number, and boolean, but also allows you to define complex types using interfaces, unions, intersections, and more. You can gradually add types to an existing JavaScript codebase, or go full-in on type safety from the start of a project.

It‘s not just individual developers who are benefiting from TypeScript. Many major companies, including Microsoft, Airbnb, Slack, and Asana, are using TypeScript in production. The Angular framework is built with TypeScript, and the React and Vue communities have embraced TypeScript as well.

In terms of usage, TypeScript has seen explosive growth. According to the 2021 State of JS survey, 69% of respondents said they use TypeScript, up from just 21% in 2016. The DefinitelyTyped repository, which hosts type definitions for JavaScript libraries, now contains over 7,000 packages.

All this is to say, TypeScript is no longer a niche tool – it‘s quickly becoming a mainstream choice for JavaScript development. So let‘s dive into how you can start using it!

Setting Up a TypeScript Project

The first step to using TypeScript is to set up a project with the TypeScript compiler. This process is fairly straightforward, but let‘s walk through it step by step.

Installing TypeScript

First, make sure you have Node.js installed. TypeScript is distributed as an npm package, so you‘ll need Node and npm to install and use it.

To install TypeScript globally on your machine, run:

npm install -g typescript

This will make the tsc command available in your terminal.

Configuring a Project

Next, create a new directory for your project and open it in your terminal. Run this command to generate a tsconfig.json file:

tsc --init

This tsconfig.json file is where you configure how the TypeScript compiler behaves. The generated file comes with many options commented out; you can uncomment and modify these as needed.

Some key options to be aware of:

• target: This specifies the version of JavaScript to compile to. Common choices are "ES5" and "ES2015".
• module: This specifies the module system to use in the generated JavaScript. "CommonJS" is the typical choice for Node.js projects.
• strict: This enables a set of stricter type checking options. It‘s recommended to have this set to true for the best type safety.

Here‘s an example tsconfig.json with some common options set:

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

This configuration tells TypeScript to compile to ES2015-compatible JavaScript, use the CommonJS module system, enable strict type checking, and output the generated JavaScript to a dist directory. It also specifies that TypeScript should look for .ts files in the src directory.

Writing TypeScript Code

With your project set up, you‘re ready to start writing TypeScript code. Create a new file with a .ts extension in your src directory, like index.ts. You can now write TypeScript in this file, using all the type annotations and other features TypeScript provides.

Here‘s a simple example to get started:

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

console.log(greet(‘TypeScript‘));

This defines a greet function that accepts a string parameter and returns a string. The TypeScript compiler will enforce these types and report an error if you try to call greet with a non-string argument.

Compiling TypeScript

To compile your TypeScript code to JavaScript, you can run the TypeScript compiler:

tsc

If you have your tsconfig.json set up as shown above, this will generate a dist directory containing the compiled JavaScript code.

Alternatively, you can use ts-node to compile and run your TypeScript code in one step:

npx ts-node src/index.ts

This is handy for development, but for production you‘ll likely want to set up a more robust build process using a tool like webpack or Rollup.

TypeScript‘s Type System

Now that you have a TypeScript project up and running, let‘s dive deeper into TypeScript‘s type system and how you can leverage it to write safer, more expressive code.

Basic Types

TypeScript supports all the basic types you‘re used to from JavaScript, like string, number, boolean, null, and undefined. You can annotate a variable with a type using a colon:

let name: string = ‘Alice‘;
let age: number = 30;
let isStudent: boolean = false;

TypeScript will infer types when possible, so you don‘t always need to explicitly annotate:

let name = ‘Alice‘; // inferred as string
let age = 30; // inferred as number

Arrays

To define an array type, you can use the syntax type[]:

let numbers: number[] = [1, 2, 3];
let strings: string[] = [‘a‘, ‘b‘, ‘c‘];

If you have an array that contains mixed types, you can use the any type:

let mixedArray: any[] = [1, ‘a‘, true];

However, it‘s generally better to be as specific as possible with your types.

Functions

Functions can be annotated with parameter types and a return type:

function add(a: number, b: number): number {
  return a + b;
}

If a function doesn‘t return anything, you can use the void type:

function log(message: string): void {
  console.log(message);
}

TypeScript can also infer return types, so you don‘t always need to explicitly annotate them:

function add(a: number, b: number) {
  return a + b; // inferred as number
}

Objects

To define the shape of an object, you can use an interface:

interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

let alice: Person = {
  name: ‘Alice‘,
  age: 30,
  isStudent: false
};

This Person interface specifies that an object must have a name string, an age number, and an isStudent boolean.

You can also use type aliases to define object shapes:

type Person = {
  name: string;
  age: number;
  isStudent: boolean;
};

The difference between interfaces and type aliases is that interfaces can be extended and merged, while type aliases cannot.

Union and Intersection Types

TypeScript provides two powerful ways to combine types: unions and intersections.

A union type allows a value to be one of several types. You define it using the | operator:

let id: string | number = 1;
id = ‘1‘; // also valid

An intersection type combines multiple types into one. You define it using the & operator:

type Student = {
  id: number;
  grade: number;
};

type Employee = {
  id: number;
  salary: number;
};

type StudentEmployee = Student & Employee;

A StudentEmployee must have all the properties of both Student and Employee.

These are just a few of the key features of TypeScript‘s type system. As you work more with TypeScript, you‘ll encounter more advanced concepts like generics, type guards, and conditional types. The TypeScript Handbook is an excellent resource for diving deeper.

Using TypeScript with Frameworks

One of the big reasons for TypeScript‘s popularity is how well it integrates with existing JavaScript frameworks and libraries.

React

TypeScript has excellent support for React. You can use it to type your components, props, and state.

Here‘s a simple example of a typed functional component:

interface Props {
  name: string;
}

const Greeter: React.FC<Props> = ({ name }) => (
  <div>Hello, {name}!</div>
);

The Props interface defines the shape of the component‘s props, and React.FC<Props> tells TypeScript that Greeter is a functional component that accepts these props.

For class components, you can use the Component<Props, State> generic:

interface Props {
  initialName: string;
}

interface State {
  name: string;
}

class Greeter extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { name: props.initialName };
  }

  render() {
    return <div>Hello, {this.state.name}!</div>;
  }
}

React also provides types for event handlers, refs, context, and more. The @types/react package contains all these type definitions.

Angular

Angular is built with TypeScript, so it has first-class TypeScript support out of the box. When you create a new Angular project using the Angular CLI, it‘s set up to use TypeScript by default.

Here‘s an example of a typed component in Angular:

import { Component, Input } from ‘@angular/core‘;

@Component({
  selector: ‘app-greeter‘,
  template: `<div>Hello, {{ name }}!</div>`
})
export class GreeterComponent {
  @Input() name: string;
}

The @Input decorator is used to define an input property, and TypeScript enforces that it‘s a string.

Angular also uses TypeScript for its services, directives, pipes, and other core concepts. The Angular documentation provides excellent guidance on using TypeScript effectively in an Angular app.

Vue

While Vue doesn‘t use TypeScript by default, it has good support for it via the vue-class-component and vue-property-decorator libraries.

Here‘s an example of a typed Vue component:

import { Component, Prop, Vue } from ‘vue-property-decorator‘;

@Component
export default class Greeter extends Vue {
  @Prop() name!: string;

  render() {
    return <div>Hello, {this.name}!</div>;
  }
}

The @Prop decorator is used to define a prop, and TypeScript enforces its type.

Vue 3 also introduces a new Composition API that‘s designed to work well with TypeScript. The Vue documentation provides a guide on using TypeScript with both Vue 2 and Vue 3.

Best Practices and Tips

As you start incorporating TypeScript into your projects, here are a few best practices and tips to keep in mind:

1. Enable strict mode: In your tsconfig.json, set "strict": true. This enables a set of stricter type checking options that can catch more potential errors.

2. Use noImplicitAny: Also in your tsconfig.json, consider setting "noImplicitAny": true. This will raise an error on any variables whose type is implicitly inferred as any, encouraging you to provide explicit type annotations.

3. Avoid using any: While any can be useful when migrating an existing JavaScript project to TypeScript, in general it‘s best to avoid it and use more specific types where possible. Using any defeats the purpose of using TypeScript in the first place.

4. Use interfaces for object shapes: When defining the shape of an object, prefer using an interface over a type alias. Interfaces are more open-ended and can be extended and merged.

5. Leverage union and intersection types: Don‘t be afraid to combine types using unions and intersections. These can help you express complex type relationships in a concise way.

6. Use type guards: When working with union types, use type guards to narrow down the type within a conditional block. TypeScript will then provide type-specific autocomplete and error checking within that block.

7. Create your own type declarations: If you‘re using a library that doesn‘t have TypeScript types, consider creating your own .d.ts file with type declarations. This can help catch errors in your usage of the library.

8. Keep your types concise: While it‘s good to be specific with your types, avoid over-specifying. For example, if a function accepts an object with a name property, it‘s usually better to define an interface for that object rather than specifying the full shape inline.

9. Use TypeScript‘s utility types: TypeScript provides a set of utility types like Partial, Required, Readonly, and Pick that can help you manipulate types in common ways. These can be a great time-saver.

10. Leverage TypeScript‘s tooling: TypeScript has excellent tooling support, particularly in Visual Studio Code. Make use of features like type-aware autocomplete, refactoring, and quick fixes to speed up your development.

Remember, the goal of using TypeScript is to make your code more maintainable, not to add complexity. Start small, and gradually increase your usage of TypeScript features as you become more comfortable with the language.

Continuing Your TypeScript Journey

In this tutorial, we‘ve covered the basics of setting up and using TypeScript, but there‘s still much more to learn. Here are some resources to help you continue your TypeScript journey:

• The TypeScript Handbook: The official TypeScript documentation, with in-depth explanations of all TypeScript features.
• TypeScript Deep Dive: A free online book that dives into advanced TypeScript concepts.
• TypeScript Exercises: A set of interactive coding exercises to practice your TypeScript skills.
• awesome-typescript: A curated list of awesome TypeScript resources, libraries, and tools.

As you continue to use TypeScript, you‘ll likely encounter challenges and edge cases. Don‘t be discouraged – this is part of the learning process. The TypeScript community is very active and helpful, so don‘t hesitate to ask for help on forums like Stack Overflow or the TypeScript Community Discord.

With dedication and practice, you‘ll soon be writing TypeScript code with confidence and reaping the benefits of a more robust, maintainable codebase. Happy coding!