Nerd For Tech
Published in

Nerd For Tech

Typescript: Object Types 👻

In TypeScript, the fundamental way that we group and pass around data is through object types.

They can be anonymous:

Or it can be named. You can use an Interface or type alias.

With type alias:

The implementation looks the same as if it’s an Interface.

Each property in an object type can specify 3 things:

  1. The type.
  2. A property is optional, adding a “?” at the end of their name. We can choose to provide either of them.
  3. A property can be written to or not. (readonly keyword).

An Interface is a structure that defines the contract in your application.In TypeScript, two types are compatible if their internal structure is compatible, in other words, Typescript uses their shape to check if they are compatible. (This is also known as “duck typing” or “structural sub typing”).

An interface is defined with the keyword interface.

Now lets describe a User using interface and create the user object, this object has to match with the User interface shape.

By default properties of an interface are mandatory, you can make one property optional by adding “?” at the end.

In this example, “email” is optional and typescript won’t warn us about us not adding it in the user object:

We can also modify the User properties if we want to, like this:

If you would like to forbid developers to modify the object then you should use the “readonly” keyword. This keyword goes in front of the property you don’t want to be modified.

Index Signature

In Javascript is very common to create an object and add properties later as we need them, in order to do it in Typescript we can use an Index Signature . Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. Index Signature allow us to describe dynamic properties.

Note: You can make index signatures readonly.

In the square brackets we can specify the type of the keys: it can be either string or number and then define the type of the value.

For example:

You can use union type to tell Index Signature to take either number or string:

Extending Types

We can also extend interfaces. Is common to have types that might be more specific versions of other types.

For example we have a parent interface:

We use the extends keyword to extend an interface. Now we describe the Child interface:

Now the Child interface inherits property name from the Parent. You can extend multiple interfaces using a “,” .

You can add the new fields that are unique to Child interface.

Intersection Types

TypeScript provides another construct called intersection types that is mainly used to combine existing object types. An intersection type is defined using the & operator.

MusicFestival type: This new type has all the members of RockBand and ReggaeBand.

Generic Object Types

We can make a generic Gift type which declares a type parameter. Type is a placeholder that will get replaced with some other type.

“A Gift of Type is something whose contents have type Type”.

Later, when you refer to Gift you have to give a type argument:

Gift is reusable and that Type can be substituted with anything, this means that when we need it again, we don’t need to declare a new Gift type.

Type aliases can also be generic and we can also use them to write other kinds of generic helper types:

The Array Type

Are types like number[] or string[], that’s really just a shorthand for Array<number> and Array<string>.

Array itself is a generic type:

Other data structures which are generic:

  • Map<K, V>
  • Set<T>
  • Promise<T>

Tuple Types

A tuple type is another sort of Array type, it can include multiple data types.

We can access tuple elements using index, the same way as an array (index starts from zero).

Tuples can have optional properties by writing out a question mark and can also have rest elements, which have to be an array/tuple type.

StringNumberBooleans describes a tuple whose first two elements are string and number, but which may have any number of boolean's following.

I hope you have found it useful.

With Love,

Laura ♥️



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