TypeScript

JavaScript, one of the world's most-used programming languages, has become the official language of the web. Developers use it to write cross-platform applications that can run on any platform and in any browser.

Although JavaScript is used to create cross-platform apps, it wasn't conceived for large apps involving thousands or even millions of lines of code. JavaScript lacks the features of more mature languages that power today's sophisticated applications. Integrated development editors (IDEs) can find it challenging to manage JavaScript and maintain these large code bases.

TypeScript addresses the limitations of JavaScript, doing so without compromising the critical value proposition of JavaScript: the ability to run your code anywhere and on every platform, browser, or host.

TypeScript is an open-source language that was developed by Microsoft. It is a superset of JavaScript, which means you can continue using the JavaScript skills you've already acquired and add specific features previously unavailable to you.

Typescript works by adding types on top of JavaScript. Types are a way to describe the shape of an object, providing better documentation and allowing TypeScript to validate that your code is working correctly.

It does this by providing extra syntax, which is compiled into JavaScript.

Why TypeScript?

The core feature of TypeScript is its type system. In TypeScript, you can identify the data type of a variable or parameter by using a type hint.

Through static type checking, TypeScript catches code issues early in development that JavaScript can't usually catch until the code is run in the javascript engine. Types also let you describe what your code is intended to do. If you're working on a team, a teammate who comes in after you can easily understand it too.

Types also power the intelligence and productivity benefits of development tools like IntelliSense. This is significantly potentiated by using inference.

Inference is the process of determining the type of a variable based on its usage. For example, if you declare a variable and initialize it with a string, TypeScript will infer that it is a string. So most of the time, you will write almost JavaScript code, but with the added benefit of type checking.

Gotchas

It is important to note that we never run TypeScript. We are always running JS code. TypeScript is compiled (or transpiled) into JS code since browsers (and node) do not understand TypeScript.

This means that types are not checked at runtime, only at compile time. So we must be careful with unexpected cases like APIs or user input where we can't be sure of the type.

Examples

These are some small examples of typescript. We recommend you to try them in the Typescript Playground.

Basic Types

// Boolean
let isDone: boolean = false;
// In this case, we can let typescript infer the type from the assingment. The following syntax is equivalent:
let isDoneInferred = false;

// Declaring a type
type SomeType = {
  example: string;
};

let example: SomeType = { example: 'example' };

// This will produce a compile error
let badExample: SomeType = { example: 123 };

// Interface are types that can be extended
interface SomeInterface {
  example: string;
}

interface SomeInterface2 extends SomeInterface {
  example2: string;
}

let example2: SomeInterface2 = { example: 'example', example2: 'example2' };

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

// The return type is optional since it can be inferred
function addInferred(a: number, b: number) {
  return a + b;
}

// Arrow function
const addArrow = (a: number, b: number): number => {
  return a + b;
};

// The return type is optional since it can be inferred
const addArrowInferred = (a: number, b: number) => {
  return a + b;
};

Examples in React

interface Props {
  name: string;
}

// Here the return type is inferred to be a ReactElement
const Example = ({ name }: Props) => {
  return <div>{name}</div>;
};

// Same here
function Example({ name }: Props) {
  return <div>{name}</div>;
}

// If we want it to be explicit
const Example: React.FC<Props> = ({ name }) => {
  return <div>{name}</div>;
};

// or

function Example({ name }: Props): ReactElement {
  return <div>{name}</div>;
}

Resources

There are many more details of typescript. The ones specified above are only the basics. You can find more information in the following resources: