Scribd
Upload
17 views

Typescript Fundamentals

The document provides an overview of TypeScript, highlighting its benefits as a superset of JavaScript that offers strong typing and improved code maintainability. It covers fundamental concepts such as basic types, type annotations, enums, classes, interfaces, and generics, along with exercises for practical application. Additionally, it encourages further learning and migration from JavaScript to TypeScript.

Uploaded by

Dissenter
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Typescript Fundamentals

The document provides an overview of TypeScript, highlighting its benefits as a superset of JavaScript that offers strong typing and improved code maintainability. It covers fundamental concepts such as basic types, type annotations, enums, classes, interfaces, and generics, along with exercises for practical application. Additionally, it encourages further learning and migration from JavaScript to TypeScript.

Uploaded by

Dissenter
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

TypeScript

Fundamentals
What is Superset of JavaScript
TypeScript?
Strongly-typed
Compiles to standard JavaScript
Runs everywhere JavaScript runs
Fewer bugs in your code
Benefits of Using
TypeScript Find and fix bugs sooner
Code is easier to refactor
Code is easier to maintain
Excellent tooling ecosystem
Poll Question
Why do you want to learn TypeScript?
A.I hope to get a job as a web developer
B. I’m frustrated with JavaScript and hope TypeScript is better
C. My company is moving from JavaScript to TypeScript
D.I want to work with a framework that primarily supports TypeScript
E. Just curious how it compares to JavaScript
Exercise: Installing and
Running the Compiler
Basic Types and Type
Annotations
Boolean
Built-in Types Number
String
Array
Enum
Code slide showing variable declarations with type annotations
Code slide showing variable declarations with type annotations
Code slide showing variable declarations with type annotations
Code slide showing variable declarations with type annotations
Code slide showing functions with type annotations
Code slide showing functions with type annotations
Code slide showing functions with type annotations
Exercise: Write a
Function with Type
Annotations
Unions and Intersection
Types
“A union type is a type formed from
two or more other types,
representing values that may be any
one of those types.”

Source: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types
An intersection type combines multiple
existing types into one new type.
Exercise: Using a Union
Type
Enums
Enums Define a finite set of named
constants
May be numeric or string-based
Created with the “enum” keyword
Exercise: Creating an
Enum
Configuring TypeScript
Projects
Stores compiler options and files
tsconfig.json to be compiled
files
Created at the root of a project
May be nested to allow more
granular configuration
May be created with the “--init”
compiler option
Exercise: Creating a
tsconfig.json file
Classes and Interfaces
Define the shape of an object
(structural typing)
Interfaces
Declare properties and methods
without implementation details
May include optional members
May be extended (inheritance)
May be implemented by classes
Exercise: Creating an
Interface
May implement interfaces or
other classes
Contain constructors, properties,
Classes and methods
Support access modifiers (public,
private, protected)
◦Public by default
Instantiated with the “new”
keyword
Exercise: Creating a
Class
Generics
What Are Code that can work with more
Generics? than one type
Code that accepts a type
parameter for each instance
Apply to functions, interfaces, and
classes
Exercise: Creating a
Generic Function
Exercise: Creating a
Generic Class
Familiarize yourself with the
TypeScript website
◦https://typescriptlang.org
Next Steps Migrate some existing JavaScript to
TypeScript
◦https://www.typescriptlang.org/docs
/handbook/migrating-from-
javascript.html
Keep learning!
Thank you for
attending!

You might also like