TYPESCRIPT

A D V A N C E D
THIS BOOK
This book is written (typed) by
Ari, who hails from the South
and has keen interests in
Computer Science, Biology, and
Tamil Literature. Occasionally,
he updates his website, where
you can reach out to him.

https://arihara-sudhan.github.io
Kindly go through the following
book before reading this.book
TYPESCRIPT
TypeScript is described as a
“superset of JavaScript” or
“JavaScript with types.” It is four
things:
>> Programming Language
A language that includes all the
JavaScript syntax, plus new
TypeScript syntax for types.
>> Type Checker
A program that takes in a set of
files written in JavaScript and/or
TypeScript, develops an
understanding of all the
constructs created, and lets the
developer know if it thinks
anything is set up incorrectly.
>> Transpiler
A program that runs the type
checker, reports any issues,
then outputs the equivalent
JavaScript code.
>> Language service
A program that uses the type
checker to tell editors how to
provide helpful utilities to
developers.
EXAMPLES
When we code the following in
TypeScript (I am using
TypeScript playground),

It (The Language Service) will

come to us with a complaint. It
would use its knowledge that
the length property of a string is
a number; not a function. We
can also hover on the highlight
and know what it’s all about.
TypeScript can give us
confidence that changes in one
area of code won’t break other
areas of code that use it.
For an instance, if we change
the number of required
parameters for a function,
TypeScript will let us know if we
forget to update a place that
calls the function.

We can hover on it and know

what happens...
ONCE INFERRED! INFERRED!
Once the type of the data is
inferred, it can’t be changed
later.

It’s not possible to give a data of

another type later.

If we didn’t specify the data, it

will be of any type.
This can be called, Ever
Evolving Variable. Because, it
can get data of different type
over the time.

It is important to note where we

don’t have to use the type hints.
I mean, reduntantly...

In the statement above, it is

redundant to use the type hint.
MODULES
Module is a file with a top-level
export or import. Any file that is
not a module is a Script. A
variable declared in one module
with the same name as a
variable declared in another file
won’t be considered a naming
conflict as long as one file
imports other files variable.

If there is no export or import

statements in a file, it is a script.
Script is where, the variables
declared in one are visible to
others. If the variable name is
already declared in another
script, we can’t declare it in
current script.

If we want to avoid these kind of

stuffs, let’s force our script to be
a module by having an empty
export.
UNIONS
There maybe some cases like
the following.

What could be the type of

nameOfHim when we hover on
it? What could be the type
inferred? It’s Union!

This is an example situation

where we can use Union Type.

Yes.. We use the vertical bar (|)

to denote the union type.
If we have defined a variable
with Union type, the properties
available for that variable are
the common properties of both
the types.

Now, if we hover on it, it will

show like the following.

There will be no errors for

properties which are common to
both the types.
NARROWING
Narrowing is when TypeScript
infers from our code that a value
is of a more specific type than
what it was defined, declared,
or previously inferred as.

TypeScript will understand that

while the variable may later
receive a value of any of the
union typed values, it starts off
as only the type of its initial
value assigned.
TypeScript is smart enough to
understand if we use
conditional constructs while
invoking properties.

We can also do typeof checks.

Why not... We can also go with

truthiness checks i.e., if(name) {...}
LITERAL TYPES
When we define a variable with
const, it’s type will be inferred
as literal.

If we hover on the variable,

Literal is a type itself if used in

the place where type has to be
used.
STRICT NULL CHECKING
In TS, we can enable or disable
type checking. Just look at the
following code where strict null
checking is enabled.

On hovering,

We can also disable it if needed

using the configuring options.
TYPE ALIASES
If we have to use longer union
types that are inconvenient to
type out repeatedly, we can use
type aliases. Actually, it’s not
only for Unions. We can use it to
alias any types.

We can shorten this by using a

type alias as shown below.

Type aliases are a handy feature

to use in TypeScript whenever
our types start getting complex.
For now, that just includes long
union types; later on it will
include array, function, and
object types.
TYPE ALIASES AREN’T JS
Type aliasing feature isn’t that of
JavaScript. It exists in the type
system of TypeScript. Look at
the following.

So, what about something like

Hoisting? Well! There is no such
Hoisting in TypeScript.
When TypeScript compiles our
code, it performs a full pass
over the entire file, gathering all
type information first, including
type aliases, interfaces, and
class types.
This means that even if a type is
declared later in the file, the
compiler already "knows" about
it during this first pass and can
refer to it earlier in the code.
OBJECT TYPES

We do start with the example

shown above. If it is JavaScript,
imagine the situation. We can
access aboutHim.lastName, but
since the lastName property
doesn't exist, it returns
undefined without throwing an
error. (JS lacks static type
checking!) TypeScript enforces
strict type checking.
Since aboutHim doesn't have a
lastName property, trying to
access aboutHim.lastName will
cause a compile-time error like:

We can declare the types of

Object’s Properties as shown
below.
This is one of the places where
we can use type aliasing.
STRUCTURAL TYPING
Structural typing means that two
objects are considered
compatible as long as they have
the same structure, regardless
of what they are explicitly typed
as. TypeScript checks whether
an object has the required
properties for a given type,
instead of strictly checking if it's
an instance of that type.

type WithFirstName and type

WithLastName define two types.
WithFirstName expects an
object with a firstName property
of type string. WithLastName
expects an object with a
lastName property of type
string. hasBoth is an object that
contains both firstName and
lastName properties. When
assigning hasBoth to
withFirstName, TS checks if
hasBoth contains a firstName
property of type string. Since it
does, the assignment is valid.
Similarly, when assigning
hasBoth to withLastName, TS
checks if hasBoth contains a
lastName property of type
string. Again, the assignment is
valid.
TypeScript doesn't care that
hasBoth has extra properties
(lastName in the case of
withFirstName or firstName in
the case of withLastName). As
long as the required structure
(properties and types) matches,
the object can be assigned. This
is structural typing at work: it is
the shape of the object that
matters, not its explicit type.
Types must match with the data!
No compromise here!

And also, we can’t have excess

properties.

Note that excess property

checks only trigger for object
literals being created in
locations that are declared to be
an object type. Providing an
existing object literal bypasses
excess property checks.
NESTED OBJECT TYPES
We can nest objects in JS so for
sure, we can nest types as
shown below:
OPTIONAL PROPERTIES
We can include a ? before the :
in a type property’s type
annotation to indicate that it’s
an optional property.

When we include ? Before the

colon of type annotation, the
property actually takes
undefined union the type
provided. In this case, the type
of year becomes “undefined |
number”. We can either assign a
number or leave it!
OBJECT TYPE UNIONS
Why not? We can also union two
object types.

It means, We can also narrow it

so...
DISCRIMINATED UNIONS
Another popular form of union
typed objects in JavaScript and
TypeScript is to have a property
on the object indicate what
shape the object is. This kind of
type shape is called a
discriminated union, and the
property whose value indicates
the object’s type is a
discriminant.
WE ALSO INTERSECT
What we want an object to
follow multiple type definitions?
We have something called,
intersection. It is an and logic of
types where union is an or logic.

We can also combine

intersection with union...
FUNCTION PARAMETERS
If we need a function to have
parameters of types specified
and to return a value of type
specified, TypeScript says Yes!

We can have optional

parameters as we could have
optional properties.
If we want to have default
values for parameters,
remember! Type inference
happens and once inferred,
inferred!

We can also make it for rest

parameters.

It doesn’t end with these!

Functions are the first class
citizens!
We can pass them to other
functions. So, we need to make
the higher order functions,
equipped with types!

Here, when we declare types

for the function parameters, we
use => to specify their return
type. Beware of the paranthesis!

Function Types can also be

aliased as shown below.
A tip I can give is to declare the
function with type and later
define it as shown below.

When functions don’t want to

return anything, we can declare
their return type as void.
The never type is used to
indicate that a function will
never complete its execution
successfully. This can happen
for a variety of reasons, such as
the function throwing an error,
entering an infinite loop, or
simply not returning a value at
all.

If we want to perform or
simulate something called
Function Overloading in
JavaScript,
We may need to check
arguments.length and proceed
accordingly. But, here in
TypeScript, we can make it
easy!

TypeScript simplifies function

overloading by allowing us to
define multiple function
signatures for the same function
name. This enables us to
specify different parameter
types and return types.
ARRAYS
In JS, what we call as Array can
hold any mixture of values.

TypeScript respects the best

practice of keeping to one data
type per array by remembering
what type of data is initially
inside an array, and only
allowing the array to operate on
that kind of data. I mean, the
type inference...
The type annotation for an array
requires the type of elements in
the array followed by square
brackets [ ].

I hope there is no perplexity!

We have to be careful with the

paranthesis.
Array types can be evolved.
Yes! Every evolving array
members! It is through using
any.

We can define types for

multidimensional arrays.
TypeScript understands typical
index-based access for
retrieving members of an array
to give back an element of that
array’s type.

But, there is actually one caveat.

TS infers the type of the
elements to be what it was
defined as. Can we access an
element using index beyond the
length of the array?
Will it be undefined? No!
Instead, it will be the type
defined.

Arrays can be joined together

using the spread (...) operator. In
TS, if the input arrays are of
same type, the output array will
be that same type. If the input
arrays are of different types,
the output array will be the
union of those types.
TS recognizes and will perform
type checking on the JavaScript
practice of ... spreading an array
as a rest parameter. Arrays used
as arguments for rest
parameters must have the same
array type as the rest parameter.
TUPLES
In JS, what we call as Array can
hold any mixture of values and it
shrinks and expand over the
time. If we want to make it fixed
in terms of size and the order of
types, we can use something
called Tuple.

We should be careful with

inferred arrays. Although they
look similar morphologically,
they will get a union type.
What if we use tuples as rest
parameters?

If we check the variables which

stores the values returned from
a function as an array, the
variables will have a union (of all
return types) type.
If the function is declared as
returning a tuple type and
returns an array literal, that array
literal will be inferred to be a
tuple.

If we want to convert an array

into a read-only tuple, we can
do that with const assertion.

With this, we don’t need to

specify the type explicitly for
creating tuple. But, remember
that, it becomes immutable!
INTERFACES
We can make our own types. It’s
not like aliasing. A type alias is a
way to create a new name for
any type, including primitives,
unions, intersections, and other
types like functions and tuples.
An interface is a way to define
the shape of an object, focusing
primarily on object structure. It
is more flexible when working
with object-oriented concepts
and supports declaration
merging. Interfaces can “merge”
together to be augmented and
can be used to type check the
structure of class declarations
while type aliases cannot.
We’ll see these later. So, let’s
define an interface now.

As in type aliases, we can’t

assign a wrong typed value.
We can also have optional
properties as well.

Besides, we can make a

property read-only using
readonly modifier.
It’s very common in JavaScript
for object members to be
functions. TypeScript therefore
allows declaring interface
members as being the function
types.

Both parameters can be

optional.
A call signature in an interface is
a way to define how a function
should be structured—what
parameters it takes and what
type it returns. Interface defines
a structure or contract for an
object. Meanwhile, A Call
Signature defines how a
function should be called,
including its parameters and
return type.
Index signatures allow us to
define the types of keys and
their corresponding values in an
object, without knowing the
exact names of the keys
upfront.

Remember! It is also possible

with type aliasing.
We cannot mix different types of
values like number with an
index signature like [key: string]:
string. If we want to mix, mix
with same type! Don’t mess with
other types!

Woh! We can also have some

literal types.
We can’t leave the literal
property and assign values
other than defined.

We can nest interfaces within.

TypeScript allows an interface
to extend another interface,
which declares it as copying all
the members of another.

Types can be over-ridden while

extending but remember the
type in base interface must be
compatible with child interface.
TypeScript uses structural
typing, so when we extend
Person, it expects Employee to
still have an age property of
type of string or number.

We can extend multiple

interfaces. This means that an
interface can inherit properties
and methods from more than
one interface.
We combine the structure of
multiple interfaces into one.

Interface merging occurs when

we declare the same interface
multiple times (Subsequent
property declarations ).
TypeScript automatically
merges these declarations into
a single interface, combining
their properties. This is
particularly useful for extending
existing interfaces without
modifying the original
declaration directly.
Note: Subsequent property
declarations must have the
same type!

When we merge two interfaces

that have a method with the
same name but different
parameter types, TypeScript
creates overloads.
CLASSES
Classes are blueprints for
creating objects. They
encapsulate data (properties)
and behavior (methods) into a
single entity, enabling Object-
Oriented Programming
principles.
Class properties are variables
that belong to a class. They
define the state of an object
created from the class.

TypeScript checks that class

properties are properly
initialized before they are used.
If a property is not assigned a
value in the constructor,
TypeScript will raise an error.
Function properties are
methods defined within a class
that can be called on instances
of that class. They define
behaviours associated with the
class.

Although strict initialization

checking is useful most of the
time, we may come across
some cases where a class
property is intentionally able to
be unassigned after the class
constructor.
Definitely Assigned Properties
are properties that are
guaranteed to be initialized
when the class is instantiated.
We can use the ! (definite
assignment assertion) to
indicate that the property will be
initialized later.

You know what... Optional

properties can also exist!
Optional properties are defined
with a ? as we know already.
Read-only properties can only
be assigned a value at the time
of declaration or in the
constructor. After that, their
value cannot be changed.

Classes can be used as types in

TypeScript.
We can create objects that
adhere to the class structure,
allowing for type checking.

Interfaces can describe the

shape of a class, allowing for
the definition of expected
properties and methods. A class
can implement an interface,
enforcing that it adheres to the
interface structure.
Look at the following example.

A class can implement multiple

interfaces, allowing it to adhere
to multiple structures.
A class can extend another
class, inheriting its properties
and methods. This promotes
code reuse and a hierarchical
structure.
When assigning an object of a
derived class to a variable of the
base class type, TypeScript
checks that the derived class is
compatible with the base class.

When a derived class overrides

the constructor of a base class,
it can call the base class
constructor using super().
class Child extends Parent{
constructor( ) {
super( );
}
}
A derived class can override
methods from its base class,
providing a specific
implementation.
class Parent {
method( ) {
console.log(“Parent”);
}
}
class Child extends Parent{
method( ) {
console.log(“Child”);
}
}
When overriding properties in a
derived class, the property must
match the type of the base class
property.
class Parent {
message: string = "Hello";
}
class Child extends Parent{
message: string = "Hi";
}
Abstract classes cannot be
instantiated directly. They can
define abstract methods that
must be implemented by
derived classes.
TypeScript provides access
modifiers for class members:
public, private, and protected.
public: Accessible from
anywhere.
private: Accessible only within
the class
protected: Accessible within the
class and subclasses.
Static members belong to the
class itself rather than to
instances of the class. They are
accessed using the class name.
TYPE MODIFIERS
There are types that can
represent any value. Such types
are called, Top Types. The most
common top type in TypeScript
is any. It can hold values of any
type, allowing maximum
flexibility but at the cost of type
safety.

The following will surely crash

during the run time.
The unknown type is safer than
any. We can assign any value to
it, but before performing
operations on an unknown type,
we need to assert its type or
narrow it down. This provides
better type safety than any.

The keyof operator creates a

union of string literal types
representing the keys of an
object type.
It helps in creating types that
depend on the keys of another
type.

The typeof operator is used to

get the type of a variable or
object at compile time. It can
also be used to create types
based on existing variable
types.
The combination of keyof and
typeof allows us to create a
union of the keys of a variable’s
type.

Type assertions are to tell the

TypeScript compiler to treat a
variable as a specific type,
overriding the type inference.
We can use the as keyword or
angle-bracket syntax.

Assertions change the type of

an existing variable.
Const assertions tell TypeScript
to infer a more specific,
immutable type for a value.

The bottom type refers to the

type that represents no value or
never occurs. This type is
denoted by the keyword never.
GENERICS
Generics are used to define a
component like a function,
class, or interface that can work
with multiple types rather than a
single one. We can think of it as
a way to pass types as
parameters to components. This
increases code flexibility and
reusability.
Look at the following example
which uses Generics.

Here, <T> is a generic type

parameter.
The function identity can take
any type T, and it ensures the
input and return types are the
same. Interested? Let’s write an
example.

We can have multiple type

parameters for more complex
functions.

We can also make an interface

generic.
Look at the following example.

What about making classes

Generic?
Let’s extend a generic class!

It becomes interesting when we

implement a generic interface.
Methods in a class can also be
generic.

We can create generic type

aliases!

We can also apply the readonly,

optional to generics. Just as
default values in methods, we
can also declare the default
type in Generics.
We can constrain generics to
extend a specific type.

keyof with generics lets you

constrain parameters to valid
object keys.

Promises are not exceptions to

TypeScript!
The Promise.reject(err) function,
like the Promise.resolve
method, always returns a
rejected promise. The promise
rejection value is derived from
the error parameter, and its type
is any. The async and await
provide a cleaner, more
readable way to work with
promises in TypeScript. An
async function always returns a
promise, and you use await to
pause the execution until the
promise is resolved or rejected.
Promises can be typed for
better type safety!
NANDRI