Typescript 101 — Typing, Interfaces and Enums oh MY!

What is Typescript?

Javascript is the language of the web and that’s not changing anytime soon, although as projects and teams get bigger it can be hard to prevent or catch bugs cause of Javascript’s high level of flexibility.

  • Typing allows the code to be more self-documenting to other developers on the team so they know what should be going into your functions.
  • Typing also allows IDE’s to monitor code for mistakes and warn you early on when functions are misused.
  • The TS Compiler (TSC) will not compile unless all type checks successfully pass

Let’s get started

For this tutorial I’ll be working from this CodeSandBox: https://codesandbox.io/s/typescript-starter-u7of1

  • Typescript/React: npx merced-spinup reactts projectname
  • Backend: NestJS
  • Backend: FoalTS

Typing Your First Variable

Delete all the current contents of index.ts and open up the codesandbox console, we won’t really be using the browser screen so the terminal can take up all the space. Let’s make a variable!

let myFirstVariable: string = "3"
console.log(myFirstVariable)
myFirstVariable = 3
console.log(myFirstVariable)

Typing More Complicated Types

Arrays

So let’s say I have an array, I could type it like so.

const myArray: string[] = ["Hello", "World"]
console.log(myArray)
myArray.push(5)
const myArray: any[] = ["Hello", "World"]
console.log(myArray)
myArray.push(5)
const myArray: Array<string | number> = ["Hello", "World"]
console.log(myArray)
myArray.push(5)

Objects

For non-class objects, we should create a new interface for typing (for objects made from a class, the class is the type).

interface Person {
name: string
age: number
email: string
}
const Alex: Person = { name: "Alex Merced", age: 35 }console.log(Alex)
interface Person {
name: string
age: number
email?: string
}
const Alex: Person = { name: "Alex Merced", age: 35 }console.log(Alex)

Functions

Here is an example of a typed function…

const addNums = (x: number, y: number): number => {
return x + y
}
console.log(addNums(3, 3))
console.log(addNums(3, "3"))

Enum

Enums allow us to define sets of constants. If you don’t specify a value it will assign numerical a value in order. This allows use to assign values that may be less intuitive to named constant that are easier to use. Like using a brand name to equal a serial number.

enum LifeStage {
baby = 1,
toddler,
child,
teenager,
adult,
senior,
}
interface Person {
name: string
height: number
inches: number
stage: number
}
const Alex: Person = {
name: "Alex Merced",
height: 5,
stage: LifeStage.adult,
inches: 10,
}
console.log(Alex)

Custom Types

You can also just pre-name your types so you don’t have to type them out each time. Here are some examples.

type yesno = "yes" | "no"
type weirdarray = [string, number, boolean]
type error = "network error" | "schema error"
type success = "success"
type response = error | success
type response = error | success
interface data {
data: Object<any>
}
interface res {
response: response
}
type APIResponse = data & res

Bottom Line

Typescript doesn’t really change Javascript it just allows you to be more explicit so you can have fewer errors as quicker debugging as your codebase grows and a greater number of people are writing code for it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder

59 Followers

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.