N EW TEC H N OLO GIES IN

SOFTWAR E EN GIN EER IN G

TypeScript and
JavaScript
GROUP
03
SEP 14, 2024
 N EW TEC H N OLO GIES IN
SOFTWAR E EN GIN EER IN G

Team
Members

CHÂU HOÀNG GIA ĐẠT NGUYỄN CAO NHÂN PHẠM HIỀN NHÂN

21110763 21110788 21110789

N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

01
Contents
01
TypeScript & Relationship with
02
Key features of TypeScript
JavaScript
03
TypeScript compilation and JavaScript
04
Development experience and performance
integration
05
Best practices for using TypeScript
06
Industry adoption and trends
 N EW TEC H N OLO GIES IN
SOFTWAR E EN GIN EER IN G

01 TypeScript &
Relationship
with
JavaScript
Presenter: Châu Hoàng Gia Đạt
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

03
TypeScript & JavaScript
TypeScript is a typed superset of JavaScript, meaning
that it's a version of JavaScript with additional
features.
All valid JavaScript code is also valid TypeScript code,
so you can use any existing JavaScript libraries in a
TypeScript project.
However, TypeScript adds a number of features that
are not present in JavaScript, such as static typing,
class-based object-oriented programming, and
interfaces.
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

04
Synta Erased Runtime
x
TypeScript is a language that is
Types
TypeScript never changes the
Behavior
TypeScript is a language that
a superset of JavaScript: JS behavior of program based on preserves the runtime
syntax is therefore legal TS. the types it inferred, it erases behavior of JS. For example,
This means you can take any the types to produce the dividing by zero in JS produces
working JavaScript code and resulting “compiled” code. This Infinity instead of throwing a
put it in a TypeScript file means that once your code is runtime exception. This
without worrying about exactly compiled, the resulting plain JS means that if you move code
how it is written. code has no type information. from JS to TS, it is guaranteed
to run the same way, even if
TS thinks that the code has
type errors.
 N EW TEC HN OLOGIES IN
SOFTWAR E ENGINEER IN G

02 Key features
of TypeScript
Presenter: Châu Hoàng Gia Đạt
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

06
BASIC TYPES OF
In TypeScript, there are 6 basic types, including: boolean, number,
TYPESCRIPT
string, array, enum, any. When declaring, we will use the following
structure: (var, const, let) variable_name: return_type =
variable_value;

• Boolean
• Number
:
var isDone: boolean = true; :
var height: number =
• String 8;
: • Arra
var name: string = "nguyen thi
A"; y
• Any var list1: number[] = [1, 2];
: var list2: Array<number> = [1,
var notSure: any = 4; 2, 3];
notSure = "maybe a string instead"; • Enum
notSure = false; :
enum Color{Red, Green,
var list: any[] = [1, true, "free"]; Blue};
var c: Color = Color.Red
list[1] = 100; var colorName = Color[1]
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

07
STATIC TYPE
TypeScript is a typed superset, meaning that it adds rules
CHECKING
about how different kinds of values can be used

This is JavaScript code that can run in browser, and it will log
Infinity

TypeScript, though, considers division of number by an array to be a nonsensical operation, and will issue
an error:
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

08
STATIC TYPE
TypeScript is a typed superset, meaning that it adds rules
CHECKING
about how different kinds of values can be used

TypeScript checks a program for errors before execution, and

does so based on the kinds of values, making it a static type
checker.
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

09
FUNCTION

TypeScript also supports declarations of function return

TypeScript has 3 ways to declare types as well as data input types.
functions
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

10
INTERFACES

using interface using type alias anonymous

Property Modifiers 11
Each property in an interface can specify a couple of things: the type,
whether the property is optional, and whether the property can be written
to.

Optional Readonly
Properties Properties
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

12
Optional Properties

We can also read from those properties - but

when we do under strictNullChecks,
TypeScript will tell us they’re potentially
We can just handle undefined specially by checking
undefined.
for it.
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

13
Extending
It’s pretty common to have types that
might be more specific versions of other
types.

The extends keyword on an interface allows Interfaces can also extend from multiple
us to effectively copy members from other types.
named types, and add whatever new
members we want.
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

14
Intersection

Interfaces allowed us to build up new types from

other types by extending them. TypeScript
provides another construct called intersection
types that is mainly used to combine existing
object types.
An intersection type is defined using the &
operator
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

15
GENERICS
Let’s imagine a Box type that can contain We can make a generic Box type
any value - strings, numbers, boolean, which declares a type parameter.
whatever.
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

16
CLASS
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

17

03 TypeScript
compilation and
JavaScript
integration
Presenter: Phạm Hiền Nhân
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

18
TypeScript compilation
process
TypeScript code is compiled into plain JavaScript
01
because browsers cannot directly execute
TypeScript.

02 The TypeScript compiler (tsc) converts .ts files

into .js files.

Compiled JavaScript can be ES5, ES6, or other

03
versions, based on configuration.

Note: ECMAScript (ES) is the standard or specification that defines

the core of JavaScript. It's essentially the blueprint for the
JavaScript language, defining its syntax, features, and behavior.
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G

Setting up TypeScript in a
IN

19
JavaScript project
1.Install TypeScript: run npm install typescript --save-dev in
the project.
2.Create tsconfig.json:
• Controls the TypeScript compiler options (e.g., target JS version,
module system).
• Example configuration:
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

20
Integration with
JavaScript

Incremental adoption
TypeScript allows incremental adoption, meaning
you can gradually add TypeScript to existing
JavaScript codebases.

Hybrid codebase
JavaScript files can be renamed to .ts, and
TypeScript can work alongside JavaScript, providing
type-checking and additional features where
desired.
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

21
Advantages of TypeScript
compilation
Early error detection
Catches potential errors during the compilation
phase, which would only surface during runtime in
JavaScript.

Optional static typing

Developers can define types, making the codebase
more predictable and maintainable.
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

22

04 Development
experience and
performance
Presenter: Phạm Hiền Nhân
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G

Development
IN

23
experience
TypeScript
• Improved tooling: IDEs (e.g., VSCode) provide enhanced
autocomplete, refactoring tools, and error detection due to
TypeScript’s type system.
• Easier maintenance: large-scale projects benefit from
TypeScript’s ability to check for type errors across files.
• Code readability: types make the code self-documenting,
reducing the need for extra comments.
• Collaborative development: Types act as a contract between
developers, making it easier to understand and maintain
someone else’s code.
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

Development 24
experience
javaScript
• Flexibility: since JavaScript is dynamically typed, it allows rapid
prototyping and more flexibility at the cost of potential runtime
errors.
• Faster prototyping: no need for type definitions makes it
quicker for smaller or short-term projects.
• Widely supported: no compilation step required. It runs directly
in the browser or Node.js environments.
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

25
Performance
comparison
Compilation overhead
(TypeScript):
• TypeScript has a compilation step, which adds an extra step in the
development process.
• However, once compiled, the generated JavaScript has no
performance penalty because TypeScript is purely a development
tool. The runtime performance is the same as JavaScript.
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

26
Performance
comparison
Dynamic vs
Static:
• JavaScript is dynamically typed, which can lead to issues that
affect runtime performance if not well-optimized.
• TypeScript helps optimize the code structure during development,
reducing potential runtime errors that could slow down
applications.
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

27
Benefits of using TypeScript
over JavaScript
1.Static typing
2.Enhanced IDE support
3.Improved code readability and maintenance
4.Better tooling
5.Early bug detection
6.Compatibility with JavaScript
7.Object-Oriented Programming support
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

28
Potential drawbacks of using
TypeScript over JavaScript

1.Learning Curve
2.Longer Compilation Time
3.Increased Setup and Configuration
4.Overhead in Smaller Projects
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

29
When and which one?
TypeScript javaScript
• Large-scale projects: where type • Small, quick prototypes: where
safety and maintainability are critical. development speed matters more than
• Team collaboration: especially with long-term maintainability.
multiple developers, TypeScript’s types • Dynamic requirements: when
help enforce a shared understanding of flexibility and dynamic typing are
how data should be used. preferred for rapid changes.
 N EW TEC H N OLO GIES IN
SOFTWAR E EN GIN EER IN G

05 Best practices
for using
TypeScript
Presenter: Nguyễn Cao Nhân
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

The Power of 31
Strict Mode

The Common Slip: Skipping the

strict mode setting in TypeScript’s
configuration is like driving without
a seatbelt — you’re inviting
trouble.
Always enable strict
mode in your
tsconfig.json
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

32

Projec
t
Structure
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

33
Embrace ES6 Modules for
Organized Code
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

SET 34
Use ES6
& MAP

for Complex Data

Structures
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

Type Aliases:
35
Clarity in
Complexity
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

Type Assertions: 36
Use with Caution
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

Immutable by 37
Design
N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

Advanced Types 38
and Utilities

The Missed
Opportunity: Not using
TypeScript’s advanced
types and utilities keeps
you from writing more
efficient, readable code.
 N EW TEC H N OLO GIES IN
SOFTWAR E EN GIN EER IN G

06 Industry
adoption and
trends Presenter: Nguyễn Cao Nhân
40
 41
SPECTRUM

JOBS
43
 N EW TEC H N OLO GIES
SOFTWAR E EN GIN EER IN G
IN

44
Type Safety and Front-end Frameworks
Error Preventionlur and Libraries

Improved
Collaboration and Back-end Development

REAL-WORLD Maintainability

USE CASES Refactoring with Middleware and

Confidence Expressive APIs

Faster Development
Third-party Libraries
with Tooling Support
 RESOURCES FOR
45
FURTHER LEARNING

JAVASCRIPT TYPESCRIPT
• F8 • TypeScript Official Documentation
• Mozilla Developer Network • Codecademy TypeScript (Free Tier)
(MDN) • w3schools
• Codecademy (Free Tier) • Egghead.io TypeScript Course
• The Odin Project
• w3schools
THANKS
FOR
LISTENING!