November 19, 2022 | Adil Altaf & Hira Khan

● History of JavaScript

● Pitfalls of Vanilla JavaScript

● TypeScript

● TypeScript Playground

● Local Development

● What TypeScript Isn’t

Objective

The objective of this lecture is to understand the need to move from JavaScript
to TypeScript.
History of JavaScript
 Full support for
JavaScript created for ECMAScript 3 released
ECMAScript 6 in all
Netscape
browsers

2009 - 2015 -
1995 1997 1999
2014 2018

ECMAScript 1 released ECMAScript 5 released

in 2009, full support in

Source: W3
Even with regular new language versions,
JavaScript has managed to maintain
backwards compatibility for decades in
varying environments, including browsers,
embedded applications, and server runtimes.
Pitfalls of Vanilla JavaScript
Developers often refer to using JavaScript
without any significant language extensions
or frameworks as “vanilla”: referring to it
being the familiar, original flavor.
If you read this code without any context, you
will only have vague ideas on how to call the
paintPainting function.

You will have no idea what the two

parameters (painter, painting) are and how to
form these arguments when calling the
function.
/**
There is no standard in the JavaScript
* Performs a painter painting a particular painting.
* Language Specification to formally
* @param {Painting} painter describe the meaning of function
* @param {string} painting parameters, function returns, variables
* @returns {boolean} Whether the painter painted the painting.
*/
or other constructs.
function paintPainting(painter, painting) {
/* ... */ JS Developers have adopted the JSDoc
}
standard to describe constructs by
adding standardized comments placed
directly above code.
JSDoc Issues
● JSDoc descriptions can be
wrong about code.

● JSDoc comments may

become invalidated during a
refactor.

● Describing complex objects

requires multiple standalone
comments to define types
and their relationships.

● Impossible to maintain
across files in a complex
project.
It can be difficult to automate large changes
to or gain insights about a codebase.

JavaScript developers are often surprised to

see features in typed languages such as C#
and Java that allow developers to jump to the
place an argument’s type was declared.
TypeScript
TypeScript is 4 things: • Programming Language • Type Checker • Compiler • Language Services
TypeScript Playground: [Link]
Try this sample code in the TypeScript Playground.
TypeScript knows the length property of a string is a number, not a function. A number is not callable.
If you tried to run that code in JavaScript, it would crash!
Freedom Through Restriction

TypeScript allows developers to specify what types

of values may be provided for parameters and
variables.
Some developers find having to explicitly write out
how particular areas are supposed to work to be
restrictive at first.
By restricting code to only be used in the ways you
specify, TypeScript can give you confidence that
changes in one area of code won’t break other
areas of code that use it.
 In this example, we have a function that takes in 2 arguments for first name and last name
and returns a console log displaying the full name within the sentence.

Here’s the output:

Let’s take a look at this sample code.

 Now we have refactored the function and instead of providing separate arguments for the
first and last names, we provide the full name in one argument.

Here’s the output:

Now, what if we refactor the function to take only 1 argument for the full name and forget to change the function call?
 Precise Documentation
This is the same paintPainting function from earlier, except now it’s written with TypeScript.

A TypeScript developer reading this code for the first time could understand that painter has
at least three properties, two of which are methods. By baking in syntax to describe the
“shapes” of objects, TypeScript provides an excellent, enforced system for describing how
objects look.
 Stronger Tooling
Using TypeScript, IDEs such as VS Code, gain much deeper insights into your code and are
able to provide tools such as surface intelligent suggestions as you type.

If you’ve used VS Code to write

JavaScript before, you might have
noticed that it suggests
“autocompletions” as you write
code with built-in types of objects
like strings. If, say, you start typing
the member of something known
to be a string, TypeScript can
suggest all the members of the
string.
 In this example, as soon as we type painter., TypeScript is able to tell us the properties of a
painter based on the Painter interface.

TypeScripts Type Checker even works for code you’ve written yourself!
 Compiling Syntax
The TypeScript compiler takes in TypeScript code, checks the types, and generates the
equivalent JavaScript code.

Let’s take a look at the following TypeScript code (left-side). The TypeScript compiler
generates the equivalent JavaScript code (right-side).
Local Development
 Installing TypeScript

To install the latest version of TypeScript globally, run the following command:
 Check TypeScript Compiler Version

Now you can run the TypeScript Compiler command (tsc). To make sure it’s installed
properly, run it with the --version flag
 Initiate a New TypeScript Project

To start a new TypeScript project, create a new folder and run this command to create a new
tsconfi[Link] file:

The tsconfi[Link] file declares the configuration that TypeScript uses when analyzing your
code.
 Create File and Run the TypeScript Compiler

Create a new file named [Link] and add the following line of code:

Now run the TypeScript Compiler using the tsc command and provide the name of the file.
 Create File and Run the TypeScript Compiler

There’s no property such as blub in the console, so the compiler returns an error.
 TypeScript Compiler

Please note that tsc created an [Link] for you with contents including the [Link].
 TypeScript Compiler

Now fix the code in [Link] to use [Link] and run tsc again.
What TypeScript is NOT
 Remedy for Bad Code

TypeScript is not a remedy for badly structured code.

It helps you structure JavaScript code, but other than enforcing type safety, TypeScript
doesn’t enforce any opinions on what that structure should look like.

TypeScript is not an opinionated framework. So you can write code using whatever
architectural patterns you’re used to from JavaScript, and TypeScript will support them.
 Extensions to JavaScript

TypeScript’s design goals explicitly state that it should:

● Align with current and future ECMAScript proposals

● Preserve runtime behavior of all JavaScript code

TypeScript does not try to change how JavaScript works.

Its creators have tried very hard to avoid adding new code features that would add to or
conflict with JavaScript. These tasks are the responsibility of TC39, the technical committee
that works on ECMAScript itself.
 Slower than JavaScript

The only changes TypeScript makes to code are if you ask it to compile your code down to
earlier versions of JavaScript to support older runtime environments such as Internet
Explorer 11.

TypeScript adds some time to building your code because it must be compiled down to
JavaScript before most environments, such as browsers and [Link], will be able to run it.

Most build pipelines are generally set up so that the performance hit is negligible, and slower
TypeScript features such as analyzing code for likely mistakes are done separately from
generating runnable application code files.
 Finished Evolving

The web is nowhere near finished evolving, and so neither is TypeScript.

The TypeScript language is constantly receiving bug fixes and feature additions to match the
ever-shifting needs of the web community. The basic tenets of TypeScript will remain about
the same, but error messages, fancier features, and editor integrations will improve over time.
Summary

In this section, we have covered:

● A history of JavaScript
● Pitfalls of JS
● Intro to TypeScript
● Advantages of TypeScript
● Getting Started with TypeScript
● What TypeScript Isn’t
Assignment

[Link]
or/