What Is TypeScript?

Welcome to this exciting tutorial series on TypeScript. My name is Benny and together we will dive deep into the world of TypeScript. If you're already familiar with JavaScript and want to become an expert with TypeScript, then this course is perfect for you. Rather than acquiring half-baked knowledge, we will focus on the fundamentals to make you rule your AI tool. Let's begin!

The Problems with JavaScript

JavaScript is a beginner-friendly language for coding because it doesn't require additional tooling to get started. You can try it out directly in your browser by opening the JS Console and typing in some code.

In this example, I am creating a function called add where I will simply sum up two numbers. I can call this function with two arguments and get the result right away from the console:

function add(a, b) {
  return a + b;
}
 
console.log(add(10, 100));

However, it's important to note that this function has limitations, such as failing if you enter parameters that are not numbers.

For instance, if we pass a string argument, we'll receive a mathematically incorrect result due to JavaScript's string concatenation feature:

function add(a, b) {
  return a + b;
}
 
console.log(add(10, '100'));

Using an object as an argument will result in a stringified version of the object combined with the other number:

function add(a, b) {
  return a + b;
}
 
console.log(add(10, {}));

10[object Object]

Attempting to access properties of an object that are undefined will trigger a TypeError:

function add(a, b) {
  return a + b;
}
 
console.log(add(10, {}.input.data));

Uncaught TypeError: Cannot read properties of undefined (reading 'data')

Forgetting to pass an argument will result in a non-existent number, commonly referred to as NaN for "Not a Number":

function add(a, b) {
  return a + b;
}
 
console.log(add(10));

NaN

Using an undeclared variable will result in a ReferenceError:

function add(a, b) {
  return a + b;
}
 
console.log(add(10, undeclared));

Uncaught ReferenceError: input is not defined

And if I try to call a function, which isn't actually a function we'll get to see a TypeError in the JavaScript console:

function add(a, b) {
  return a + b;
}
 
console.log(add(10, {}.test()));

Uncaught TypeError: {}.test is not a function

So we have just seen the most common errors when working with JavaScript. You have to be very careful when handling parameters. While this may be easy to fix for simple examples, it can become difficult to manage for larger applications with multiple team members.

This is where TypeScript comes in. Developed and maintained by Microsoft, TypeScript is a programming language that adds type safety to JavaScript. TypeScript informs you of errors during design time, which is when you're writing code.

Understanding TypeScript

The TypeScript code that you write undergoes analysis by a compiler which detects errors. After the compiler is content with the code, it transforms the TypeScript code into JavaScript code, which can be used in your application.

Throughout the development process, you'll encounter different stages: design time, compile time, and runtime. Design time is when you write the code, compile time is when the compiler analyzes your code and generates JavaScript from your TypeScript code, and runtime is when you execute your code in a browser or via a command-line interface using Node.js or Deno.

You might be wondering why all of this overhead is necessary, and why not simply use another programming language like PHP or Python? The answer is simple: web applications natively support JavaScript. Attempting to execute Python or PHP code in your browser will not work. Therefore, you must use a programming language that compiles down to JavaScript. TypeScript is the best fit for this job because it is a superset of JavaScript, meaning you can do everything in TypeScript that you can do in JavaScript, and more.

TypeScript offers additional features like Overloaded Functions, Generics, Interfaces, and Decoraters. If you're already familiar with JavaScript, you can use your existing code and enhance it with TypeScript, making it a perfect language for web applications. Furthermore, TypeScript is a multi-paradigm language, so you can write your code in a functional or object-oriented style.

The TypeScript Playground

The easiest way to practice TypeScript programming is using the TypeScript Playground, which can be found on TypeScript's official homepage, typescriptlang.org. When placing our JavaScript code example into the Playground, we'll immediately see errors because TypeScript requires us to add a type annotation for our parameters. The default type assigned is any, which can be seen by hovering over the highlighted errors. This means that the types for a and b can be anything, which doesn't provide us with any additional type safety BUT we now have the ability to change that. By adding the type number, we can tell TypeScript to warn us if we try to pass anything other than numbers into our add function. This is why TypeScript is called TypeScript — it's built on the concept of types, which will help us to avoid mistakes as seen before when using JavaScript.

In the TypeScript Playground we can actually see what our TypeScript code looks like when compiled to JavaScript. In technical terms this process is also called transpiling because we convert our code from a high-level programming language, TypeScript, to another high-level programming language, namely JavaScript. Although "compiling" is a term that is often used when converting from a high-level language to a low-level language, we don't want to get too caught up in terminology.

Alternatively, some people may use the term "compiling", although it is a term that is often used when converting from a high-level language to a low-level language.

In the TypeScript Playground, we can also see a TSConfig option that allows us to customize the compiler to meet the requirements of our application. In the following chapter, we'll explore these settings and learn how to install TypeScript locally so that we're no longer dependant on the TypeScript Playground.

Powerful Features of TypeScript

Before we move on, let me showcase a few reasons why it's worthwhile to learn TypeScript. In my TypeScript course, you'll discover numerous features that set TypeScript apart as a superior alternative to JavaScript, including:

Robust type checking that identifies errors prior to runtime
Autocompletion when writing code in your IDE
Basic linting rules such as detecting unused variables and parameters
Const-assertions to prevent side effects when using functional programming
Class decorators for dependency injection
Built-in language support for JSX
Downleveling for converting modern JavaScript to older JavaScript runtimes
Compatibility with various module systems, for instance CommonJS and E-S-M
Customizable output formatting, such as formatting end-of-line sequences
Polymorphism through class inheritance and interfaces for object oriented programming

As you can see, there are already 10 compelling reasons to learn TypeScript, and it's okay if some of them are unfamiliar to you at this point. Keep following the series to explore more and continue on this learning journey. Together, we will unlock TypeScript's full potential and become experts in this powerful programming language.

What You Have Learned

Common Issues with JavaScript: You have learned about the common problems in JavaScript, such as errors with data types, missing arguments, and undefined properties, which can cause issues in large-scale applications.

TypeScript and its Role: You now understand that TypeScript enhances JavaScript by adding type safety and allows you to catch errors during design time. It compiles (or transpiles) into JavaScript, which runs in the browser or via Node.js.

Development Stages: You have gained clarity on the different stages in development: Design time (writing code), compile time (TypeScript analyzing and converting code), and runtime (executing the JavaScript).

The TypeScript Playground: You have explored the TypeScript Playground, where you can practice and test your TypeScript code. It allows you to see errors, compile TypeScript to JavaScript, and customize compiler settings.

Powerful Features of TypeScript: You have learned that TypeScript provides powerful features such as type checking, autocompletion, linting, and support for modern JavaScript features, making it a superior choice for large and maintainable projects.

Quiz

What is a common error showing up when working with JavaScript?

a) Division by zero errors
b) Syntax errors and type errors
c) Memory allocation errors
d) Undefined compiler errors

What is the core concept of TypeScript?

a) Dynamic code execution
b) Strongly-typed JavaScript with static type checking
c) Building AI-based JavaScript tools
d) Writing low-level assembly within JavaScript

What is the benefit of using TypeScript over Python?

a) TypeScript has better machine learning libraries
b) TypeScript is built specifically for web browsers
c) TypeScript integrates seamlessly with existing JavaScript codebases
d) TypeScript compiles directly into bytecode

Can you explain the difference between design time and run time?

a) Design time is for building user interfaces, and run time is for backend execution
b) Design time is when code is written and analyzed, run time is when code is executed
c) Design time refers to debugging, while run time refers to testing
d) Design time deals with CSS styling, and run time deals with HTML rendering

What is "transpiling"?

a) Optimizing code for faster execution
b) Converting TypeScript code to JavaScript code
c) Compressing JavaScript for deployment
d) Transforming HTML into JSX for React applications

Why is TypeScript known as a "superset" of JavaScript?

a) TypeScript introduces advanced debugging tools not available in JavaScript
b) TypeScript adds static typing and new features while maintaining JavaScript compatibility
c) TypeScript runs faster than JavaScript in all environments
d) TypeScript removes the need for JavaScript engines entirely