Fanfan's Blog

Better than ever

0%

TS basics review

Posted on Disqus:

First period of intership (LIA) ended this week. Although we built our projects with TS, but that awkward moment kept coming, like Lukas explained something about index signature… Just like an idiot!

Oh, besides, now I can never use back windows… Now when I am writing this blog on my PC, I kept pressing wrong shortkey for everything…lol

Since yesterday, I decide to go through Mike North’s TypeScript course on FrontendMasters again. Well, technically, that is not true, because I never finished the first round. So this time, after working with TS for three months, I kinda finally began to understand what this smart guy was talking about (same thing with FP courses). So review is really awesome.

1. interface & type

Both of them are ways of giving a structure a name that we can import and export from modules and we can refer to.

  • Call, Construct and Index signatures
  • “Open interfaces” : you can augment types that you may import from a library somewhere
  • Access modifier keywords: give us control over who can see methods and instance data when it comes to classes
  • Heritage clauses (“extends”, “implements”)

1. Type Alias

giving a type a name

It is more flexible than interface, because we cannot do the same thing on interface.

Exclusively work with a type space here. Will not be compiled to JS.

1
2
3
4
5
6
// this is the ONLY time you will see a type on the RHS of assignment
type HasName = { name: string };

// self-referencing types don't work!
type NumVal = 1|2|3|NumArr
type NumArr = NumVal[]

interface

Interface can describe object, function, arrays but not primitive types or operators used with types (i.e. string/number..)

Type aliase can handle primitive stuff, everything that interface can handle

Interfaces are limited to JavaScript object and subtypes (arrays & functions) – things that have prototypes

can have only one string index signature and one number signature at most, if we change numberName: string to numberName: number, it will act slightly different when we try to access property that way.

index signature

1
2
3
4
5
6
7
8
9
interface PhoneNumberDict {
  // arr[0],  foo['myProp']
  [numberName: string]:
    | undefined
    | {
        areaCode: number;
        num: number;
      };
}

combining interfaces

declaration merging, we can stack indexes on top of other things

type: sort out eagerly

interface: sort out lazy

Type aliases are extremely flexible, they can give a name to any type. Anything you would use as the type of variable fits in a type alias.

Interfaces are thing that you want to use for the things that are objects…

To be continued…