November 19, 2022 | Adil Altaf & Hira Khan
Objective
The objective of this lecture is to understand the need to move from JavaScript to TypeScript.
History of JavaScript
1995
JavaScript created for Netscape
1997
ECMAScript 1 released
1999
ECMAScript 3 released
2009 - 2014
ECMAScript 5 released in 2009, full support in
2015 - 2018
Full support for ECMAScript 6 in all browsers
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 Language Specification to formally describe the meaning of function parameters, function returns, variables or other constructs.
JS Developers have adopted the JSDoc standard to describe constructs by adding standardized comments placed directly above code.
/**
* Performs a painter painting a particular painting.
*
* @param {Painting} painter
* @param {string} painting
* @returns {boolean} Whether the painter painted the painting.
*/
function paintPainting(painter, painting) {
/* ... */
}
JSDoc Issues
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: https://www.typescriptlang.org/play
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.
Let’s take a look at this sample code.
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:
Now, what if we refactor the function to take only 1 argument for the full name and forget to change the function call?
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:
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.
TypeScripts Type Checker even works for code you’ve written yourself!
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.
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 tsconfig.json file:
The tsconfig.json file declares the configuration that TypeScript uses when analyzing your code.
Create File and Run the TypeScript Compiler
Create a new file named index.ts 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 index.js for you with contents including the console.blub.
TypeScript Compiler
Now fix the code in index.ts to use console.log 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: �
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 Node.js, 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: