The Course

Installation Union Types JS Classes Modules

Type Basics Tuples/Enums TS Classes Webpack + TS

Functions Interfaces Generics React + TS

Object Types TS Compiler Narrowing
DOM Mini
Array Types Project Declarations
 The Course
Installation Union Types JS Classes Modules
Type Basics Tuples/Enums TS Classes Webpack + TS

Functions Interfaces Generics React + TS

Object Types TS Compiler Narrowing
DOM Mini
Array Types Project Declarations
What is TypeScript?
TypeScript is...
JavaScript with types
JS TS
Why Types?
TypeScript's Type System...
Helps us find errors!
Analyzes our code as we type
Only exists in development
TS
 JavaScript
Primitive Types Object Types

Number Null Object

String Undefined Array

Boolean Void Function

Primitive Types
Number Null Any

String Undefined Never

Boolean Void Unknown

Object Types
Object Tuple

Array Enum

Function Others!
"This function returns a boolean"
 "This function accepts two
numbers and returns a number"
"This object must have a property
called colors, set to an array of
strings"
"This variable is a string"
Variable Types
Assigning a basic type to a variable is easy -
just add :Type after the variable name!

(Also called 'Type Annotation')

let myVar: type = value
Strings
Strings represent character values like
'I love Typescript!'

We can tell TypeScript that something is a

string using the type annotation of string
(all lowercase)

"This is a
string!"
Numbers
Some programming languages have
many number types - float, int, etc., in
Typescript (as well as Javascript)
numbers are just numbers.

Numbers can be typed with a simple

Type Annotation of number (all
lowercase)
Booleans
Boolean variables represent simple true or
false values.

Booleans can be typed with a simple type

annotation of boolean (all lowercase)
Type Inference
Type Inference refers to the Typescript
compiler's ability to infer types from certain
values in your code.

Typescript can remember a value's type

even if you didn't provide a type annotation,
and it will enforce that type moving forward.
Any
'any' is an escape hatch! It turns
off type checking for this variable
so you can do your thing.

NOTE: it sort of defeats the

purpose of TS and types, so use it
sparingly!
Function Parameter
types
In TypeScript, we can specify the type of
function parameters in a function definition.

This allows Typescript to enforce the types for

the values being passed into your function.

Typing parameters is just like typing variables!

function greet(person: string){
return ` Hi, ${person}!`
}
Function Return
Types
We can specify the type returned by a
function. Even though TypeScript can often
infer this, I prefer the explicit annotations.

Add the type annotation after the function

parameter list.
Anonymous
Functions
When Typescript can infer how an
unnamed function is going to be called,
it can automatically infer its parameters'
types.
Void
Void is a return type for functions that
don't return anything. It means just that -
this function is void of any data.

Typescript can infer this type fairly well,

but sometimes it may want you to
annotate a function with a void return
explicitly.
Never
The never type represents values that NEVER
occur. We might use it to annotate a function
that always throws an exception, or a
function that never finishes executing.

Don't confuse with void - void returns

undefined or null, which is technically still a
type of value. With never, a function doesn't
even finish executing.
Object + Array Types
Objects
Objects can be typed by declaring
what the object should look like in the
annotation.

Accessing a property that isn't defined

or performing operations without
keeping types in mind will throw errors!
Type Alias
Instead of writing out object types in an
annotation, we can declare them
separaretly in a type alias, which is
simply the desired shape of the object.

This allows us to make our code more

readable and even reuse the types
elsewhere in our code.
Nested Objects
Array Types
Arrays can be typed using a type
annotation followed by empty array
brackets, like number[] for an array of
numbers.

Note: these arrays only allow data of

that one type inside them. More on that
later!
Other Types
Union Types
Union types allow us to give a value a few
different possible types. If the eventual value's
type is included, Typescript will be happy.

We can create a union type by using the single |

(pipe character) to separate the types we want
to include. It's like saying, "This thing is allowed
to be this, this, or this". Typescript will enforce it
from there.
Unions -
Narrowing the Type
Narrowing the Type is simply doing a type
check before working with a value. If your
value is a string you may want to use it
differently than if you got a number.

Since unions allow multiple types for a value,

it's good to check what came through
before working with it.
Type Assertions

Sometimes you might have more specific information about a value's

type, and you want to make sure Typescript knows it too.

You can assert a value's type by using the 'as' keyword, followed by the
specific type you want to assert.
Literal Types
Literal types are not just types - but
the values themselves too!

On it's own, they may not seem useful,

but combine them with unions and you
can have very fine-tuned type options
for Typescript to enforce.
Tuples
Tuples are a special type exclusive to
TypeScript (they don't exist in JS)

Tuples are arrays of fixed lengths and ordered

with specific types - like super rigid arrays.
Enums
Enums allow us to define a set of named
constants. We can give these constants
numeric or string values.

There's quite a few options when it

comes to enums!
Aliases & Interfaces
Interfaces
Interfaces serve almost the exact
same purpose as type aliases
(with a slightly different syntax).

We can use them to create

reusable, modular types that
describe the shapes of objects
 Types vs. Interfaces
Adding new properties

Types Interfaces
 Types vs. Interfaces
Extending Properties

Types Interfaces
 Types vs. Interfaces
Optional Properties

Types Interfaces
Types & Functions
Any
'any' is an escape hatch! It turns
off type checking for this variable
/ data so you can do your thing.

NOTE: it sort of defeats the

purpose of TS and static types, so
use it sparingly!
Any (cont.)
Got a variable with an explicit
type annotation? Assigning it to a
variable with a type of any will
turn type-checking off here and
let it be reassigned, no problem.
Unknown
Unknown is like a type-safe version of
any. Variables typed as unknown can
be assigned to values of any type.

However, variables with explicit types

can't be assigned to unknown without
using a type check first.
Unknown (cont.)
It's important to narrow the unknown
type when working with these type of
variables, to stay type-safe.
Any vs.
Unknown?
The Difference
Unknown: "I don't know"
You don't know what the value type is just yet, but
it's coming! To work with this variable, we'll do
type-checks so we only do certain things
depending on the type that comes back.

Any: "I don't care"

Couldn't care less what type this variable is or
ends up being, for reasons Typescript won't
understand. Turn off type-checking and let's get
to work unobstructed.
Type Narrowing
Typeof Guards
typeof Type Guards involve simply doing a
type check before working with a value.

Since unions allow multiple types for a value,

we can first check what came through
before working with it.
Truthiness Guards
Truthiness Type Guards involve
checking a value for being truthy or
falsy before working with it.

This is helpful in avoiding errors when

values might be null or undefined.
Equality Narrowing
equality Type Guards involve
comparing types to each other
before doing certain operations with
values.

By checking two values against one

another, we can be sure they're both
the same before working with them in
a type-specific way.
in Operator
Narrowing
Javascript's in operator helps check if
a certain property exists in an object.

This means we can use it to check if a

value exists in an object, according to
its type alias or aliases, before
working with it.
instanceof Narrowing
instanceof is a Javascript operator that
allows us to check if one thing is an instance
of another (remember prototypes?).

This can help us narrow types when working

with things like classes.
Type Predicates
Typescript allows us to write custom
functions that can narrow the type of
a value. These functions have a very
special return type called a type
predicate.

A predicate takes the form

parameterName is Type
discriminated unions
A common pattern in Typescript involves
creating a literal property that is common
across multiple types.

We can then narrow the type using that

literal property
Back to Objects Types!
readonly Properties
Adding the readonly keyword before
a type assignment locks that value
down after everything compiles. In
other words, you can set it but you
can't reassign it!

Works in both type aliases &

interfaces!
Index Signatures
Got some objects whose key names are
TBD? Specify their types with an index
signature!

Syntax: [key: string]: string;

Extending Types
Got an interface of types? You can
extend it into a new interface, adding
the old types to the newly declared
ones.

This is helpful if you want to add types

to an existing object type.
Intersection Types
Intersections can be created using type
aliases, combining two object types
together.

This is a nice way to create new types from

existing types, or add new types to existing
types.
 Type Aliases vs. Interfaces
Type Aliases - Intersection Interfaces - Extending
 Type Aliases vs. Interfaces
Type Aliases - Intersection Interfaces - Extending
A Recap of JS Classes
Classes are templates for creating objects in
Javascript. They contain a few different
important pieces which allow for creation
and extension of customized (and nicely
organized) objects.
A Recap of JS Classes
- constructors
- class fields
- getters and setters
- private # fields
- static fields/methods
- inheritance
- super()
Generics
Generics
Generics allow us to define reusable
functions and classes that work with multiple
types rather than a single type.

The syntax is...not pretty. They are used all

over the place, so it's best to get
comfortable with them :)