Typescript - Getting started

Recently started using Typescript more and more and this blog post covers some of the basics around Typescript.

Running Typescript

If you have node installed you can run npx tsc index.ts and this will transpile your Typescript file into a Javascript file .js in the same folder.

You can specify the out put file to be in a different folder by adding the --outfile command like this npx tsc index.ts --outfile ./src/index.js which will add the output to the src folder.

Types and interfaces

Type and interfaces are both very similar in thier use, here we will look at the main differences.

Types

type Person = {
  name: string,
  age: number,
};

You can see that this syntax is very similar to a plain Javascript object, but rather than having a const we have type. The Person name can be any word you like.

Interfaces

interface Person {
  name: string;
  age?: number;
}

This interface is almost identical with regards to syntax, it just replaces type with interface and omits the = operator.

So what is the main difference between Types and Interfaces? People seems to be divided on weather to use Types and Interfaces so it really feels like more of a preference, they both have a lot of overlap. But calling out some of the main features are:

Interfaces allow extends

interface Person {
  name: string;
  age?: number;
}

interface ImprovedPerson extends Person {
  height: number;
}

With type you can do something similar but it's not as clean:

type ImprovedPerson = Person & { height: number };

Types allow matching on string list

type Colors = "Blue" | "Red" | "Black";

How to apply types and interfaces?

A standard Javascript function would look like this:

const greet = (person) => {
  return "Hello " + person.name;
};

In Typescript we need to add the types for person with person: Person which will look like the below function:

const greet = (person: Person) => {
  return "Hello " + person.name;
};

Now when we use the function greet it will make sure that we pass in a object that contains both name and age values or Typescript will warn us.

Types for function returns

You can also add types to function returns by declaring them exactly the same way as before and adding them after the function parentheses like so

type PersonReturn = {
  name: string,
  isValid: boolean,
};

const greet = (person: Person): PersonReturn => {
  return { name: person.name, isValid: true };
};

If the function doesn't have a return statement you can set the return type to be void.

const greet = (person: Person): ({ name: string }) => void {
  console.log({ name: person.name });

  return true;
}

Pick

If we have a type object already setup and have a function where we don't need all the types we can use Pick to select the types we do need.

type OtherPerson = Pick<Person, "name">;

const greet = (person: OtherPerson) => {
  return { name: person.name };
};

greet({ name: "James" });

Omit

We can do the same from the other way by omitting the vales that we don't want.

type OtherPerson = Omit<Person, "name">;

const greet = (person: OtherPerson) => {
  return { isValid: person.age };
};

greet({ age: 47 });

Setting explicit values

type Colors = "Blue" | "Red" | "Black";
const myColors: Colors = "Red";

React FC

Previously it wasn't ideal to use React.FC as children props were implicitly allowed even when they were not uesd. So no error was thrown in this case.

However you can use it like this:

type Props = {
  children?: React.ReactNode
};
const Component: React.FC<Props> = ({children}) => {...}