#06 What is TypeScript | Getting Started with Angular | A Complete Angular Course

Summary

In this lecture, the instructor introduces TypeScript, a superset of JavaScript developed by Microsoft, often used in Angular to build dynamic client-side applications. While JavaScript is dynamically typed, TypeScript is strongly typed, allowing for better error detection during compilation. The lecture explains the advantages of TypeScript, including enhanced debugging, object-oriented features, and compatibility with JavaScript. Though this Angular course won't cover TypeScript in depth, a separate course will be available for learning TypeScript from scratch. The next lecture will focus on Angular components.

Takeaways

• 📱 Angular is used for creating dynamic, interactive client-side applications with HTML, CSS, and TypeScript or JavaScript.
• 📜 TypeScript is often used in Angular applications, and it's a superset of JavaScript, meaning any valid JavaScript code is also valid in TypeScript.
• 🌐 Browsers cannot directly execute TypeScript, but it gets compiled into JavaScript, which browsers can run.
• 🤔 TypeScript is preferred over JavaScript because it offers additional features like being strongly typed, while JavaScript is dynamically typed.
• 🔐 TypeScript allows developers to explicitly specify data types for variables, preventing potential bugs caused by JavaScript's dynamic typing.
• 🚀 One benefit of TypeScript is catching errors at compile time instead of runtime, making applications more reliable.
• 🧑‍💻 TypeScript includes object-oriented features like interfaces, access modifiers, fields, and generics, which JavaScript currently lacks.
• 👨‍🏫 If you know JavaScript, you already understand most of TypeScript, as it builds on existing JavaScript concepts.
• 📘 The course will not cover TypeScript in-depth, but another dedicated TypeScript course will be available to learn it from scratch to advanced levels.
• 🛠 In the Angular course, the instructor will explain TypeScript features only when necessary, without a separate section on it.

Q & A

What is Angular used for?

Angular is used for creating dynamic and interactive client-side applications by utilizing HTML, CSS, and a client-side programming language like TypeScript or JavaScript.

What programming language is primarily used in Angular?

TypeScript is primarily used in Angular, although JavaScript can also be used since TypeScript is a superset of JavaScript.

What is TypeScript, and how does it relate to JavaScript?

TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript, meaning any valid JavaScript code is also valid in TypeScript, but TypeScript adds additional features that are not present in JavaScript.

Do browsers understand TypeScript directly?

No, browsers do not understand TypeScript directly. TypeScript code needs to be compiled into JavaScript, which can then be executed by the browser.

Why use TypeScript instead of JavaScript in Angular?

TypeScript offers several advantages over JavaScript, such as strong typing, which helps prevent bugs, additional object-oriented features like interfaces and access modifiers, and the ability to catch errors at compile time rather than runtime.

What does it mean that TypeScript is strongly typed while JavaScript is dynamically typed?

In TypeScript, you can explicitly specify the data type of a variable, meaning only data of that type can be stored in the variable. In contrast, JavaScript is dynamically typed, which means the data type of a variable is inferred based on the value assigned to it and can change over time.

Is it mandatory to specify the variable type in TypeScript?

No, specifying the variable type in TypeScript is optional. If you do not specify a type, it behaves like JavaScript, and any type of value can be stored in the variable.

What object-oriented features does TypeScript offer that JavaScript currently lacks?

TypeScript offers object-oriented features like interfaces, access modifiers, fields, properties, and generics, which are not available in the current version of JavaScript.

What is one key benefit of TypeScript's compilation process?

One key benefit of TypeScript's compilation process is that it can catch errors during compilation, allowing developers to fix them before running the code or deploying it in production.

Do you need to learn TypeScript before learning Angular?

No, you don't need to learn TypeScript before learning Angular. If you already know JavaScript, you can start learning Angular. The course will explain TypeScript features as needed, but a separate TypeScript course will be available for deeper learning.

Outlines

00:00

💻 Introduction to Angular and TypeScript

In this introductory lecture, the instructor explains that Angular is used to create dynamic and interactive client-side applications using HTML, CSS, and TypeScript or JavaScript. TypeScript is the preferred programming language for most Angular applications. It is a free and open-source language developed by Microsoft, described as a superset of JavaScript, meaning any valid JavaScript code is also valid in TypeScript. While browsers don't directly understand TypeScript, it is compiled into JavaScript, which can be executed by browsers. The instructor also introduces the main question of why TypeScript is used over JavaScript, citing TypeScript's additional features and advantages.

05:00

📋 Advantages of TypeScript Over JavaScript

The lecture dives deeper into the reasons for choosing TypeScript over JavaScript. One key advantage is that TypeScript is strongly typed, whereas JavaScript is dynamically typed. In JavaScript, the data type of a variable is determined based on the value assigned to it, whereas in TypeScript, developers can explicitly define data types, which helps avoid bugs and makes applications more predictable and easier to debug. Additionally, TypeScript offers object-oriented features such as interfaces, access modifiers, and generics, which are not yet available in JavaScript. TypeScript also catches errors during compilation, preventing runtime issues in production.

🚀 TypeScript Course and Angular Overview

The instructor briefly mentions that while this Angular course will not focus on TypeScript in detail, developers with a JavaScript background already have most of the foundational knowledge needed to understand TypeScript. TypeScript-specific features will be explained as necessary throughout the course. However, the instructor is also creating a separate comprehensive TypeScript course that will cover everything from basic to advanced concepts. Angular learners are encouraged to take this course in parallel if they wish to dive deeper into TypeScript.

🎯 Moving Forward: Creating Components in Angular

The lecture concludes with a preview of the next steps in the course. The focus will shift to learning about components in Angular and creating a new component for an Angular application. The instructor signs off by thanking the audience and setting up the next lecture, which will delve into Angular components.

Keywords

💡Angular

Angular is a popular framework used for creating dynamic and interactive client-side applications. It is primarily used with HTML, CSS, and a programming language like TypeScript or JavaScript. In the context of the video, Angular is the main framework discussed for building applications, and the use of TypeScript within Angular is emphasized.

💡TypeScript

TypeScript is a strongly typed, open-source programming language developed by Microsoft. It is a superset of JavaScript, meaning any valid JavaScript code is also valid TypeScript code. The video highlights TypeScript's role in Angular development, explaining that while browsers don't understand TypeScript directly, it gets compiled into JavaScript for execution.

💡JavaScript

JavaScript is a widely-used, dynamically typed programming language for web development. In the video, JavaScript is described as the foundational language for both Angular and TypeScript. The speaker notes that TypeScript extends JavaScript's capabilities by offering features such as static typing and object-oriented programming constructs.

💡Strongly Typed

Strongly typed refers to a programming language where variables are explicitly declared with a specific data type, and only values of that type can be stored in the variable. The video explains that TypeScript is strongly typed, contrasting it with JavaScript, which is dynamically typed and allows variables to hold values of any type.

💡Dynamically Typed

A dynamically typed language determines the type of a variable at runtime, based on the value assigned to it. JavaScript is an example of such a language, and the video uses this feature to explain how JavaScript differs from TypeScript, which enforces stronger type rules at compile-time to prevent errors.

💡Compilation

Compilation is the process of converting TypeScript code into JavaScript code so that browsers can execute it. The video emphasizes that although developers write TypeScript in Angular applications, it must be compiled into JavaScript because browsers cannot natively understand TypeScript.

💡Object-Oriented Features

Object-oriented features refer to programming constructs like classes, interfaces, inheritance, and encapsulation. The video mentions that TypeScript includes these features, making it more powerful than JavaScript for building complex applications. These features help in structuring the code better, particularly in large-scale Angular applications.

💡Superset

In programming, a superset is a language that includes all features of another language and adds its own enhancements. TypeScript is described as a superset of JavaScript, meaning that all valid JavaScript code can run in TypeScript, with the added benefit of TypeScript’s features such as static typing and object-oriented programming.

💡Compile-Time Errors

Compile-time errors are issues found in the code during the compilation process, before the code is executed. The video explains that one of the benefits of using TypeScript is the ability to catch and fix errors at compile-time, reducing the likelihood of runtime errors when the application is deployed.

💡Client-Side Application

A client-side application runs in the user's browser, processing data and rendering content without needing constant communication with a server. The video focuses on building these types of applications using Angular, TypeScript, and other web technologies like HTML and CSS to create dynamic and interactive user interfaces.

Highlights

Angular is used to create dynamic and interactive client-side applications using HTML, CSS, and a client-side programming language like TypeScript or JavaScript.

Although JavaScript can be used, most Angular applications are built using TypeScript, a superset of JavaScript.

TypeScript is a free and open-source programming language developed by Microsoft, and it allows any valid JavaScript code to be compiled as TypeScript.

Browsers do not understand TypeScript directly, so it needs to be compiled into JavaScript before being executed by browsers.

One of the main advantages of TypeScript over JavaScript is that it is strongly typed, whereas JavaScript is dynamically typed.

In TypeScript, data types can be explicitly defined, which helps to avoid many bugs and makes applications more predictable and easier to debug.

Specifying variable types in TypeScript is optional, but doing so makes the code more robust.

TypeScript supports additional object-oriented features such as interfaces, access modifiers, fields, properties, and generics, which are not available in current versions of JavaScript.

TypeScript allows errors to be caught at compile time, which helps to prevent issues before deploying code to production.

Developers familiar with JavaScript will already understand most of TypeScript, making the transition to learning Angular easier.

This course will not cover TypeScript in-depth, but essential TypeScript concepts will be explained as needed during the course.

A separate course will be made available for TypeScript, covering everything from beginner to advanced level.

The ability to use TypeScript in Angular development provides benefits like type checking, easier debugging, and more readable code.

Since TypeScript is a superset of JavaScript, developers can write JavaScript code and still benefit from TypeScript’s features when compiling.

Angular developers benefit from the additional tooling and compile-time checking TypeScript offers, allowing them to catch errors early in the development process.

Transcripts

in the very first lecture of this course

we learned that we use angular for

creating Dynamic and interactive

client-side applications by using HTML

CSS and a client-side programming

language like typescript or JavaScript

now most of the time when we create an

application using angular we use

typescript as the programming language

typescript is a fairly new programming

language which is very similar to

JavaScript

so in this lecture let's understand what

typescript is and do you really need to

learn typescript first in order to learn

angular

typescript is a free and open source

programming language developed by

Microsoft and you can say that it is a

superset of JavaScript that means any

valid JavaScript code is also a valid

typescript code so if you write a valid

JavaScript code in a typescript file

that JavaScript code will be compiled by

the typescript compiler so remember that

any valid JavaScript code is also a

typescript code now here you might ask

okay we are going to use typescript in

angular to create a client-side

application but do browsers actually

understand typescript will the browser

be able to execute the typescript code

well no browsers do not understand

typescript but very important point to

note here is that when we compile our

typescript code that typescript code

gets converted into JavaScript code okay

so we are going to write our code in

typescript but when that typescript code

will be compiled it will be converted to

JavaScript

and that compiled JavaScript can be

executed by the browsers

now you might have another question so

why typescript why cannot be directly

use JavaScript

well there are several advantages of

using typescript over JavaScript first

of all as I mentioned typescript is a

superset of JavaScript that simply means

that any valid JavaScript code is also a

typescript code but typescript has

additional features which do not exist

in the current version of JavaScript

supported by most browsers available out

there for example typescript is strongly

typed but JavaScript is not strongly

typed it is dynamically typed in

JavaScript when we create a variable and

when we assign a value to that variable

we do not specify the data type for that

variable explicitly

the data type of that variable is

calculated based on the value we are

storing in it for example here in the

name variable when we are storing this

value John the data type of this name

variable will be string

in the same way to this age variable

when we are assigning it a value 28 this

28 is a number so the data type of this

age variable will be number

in the same way so this is married

variable we are assigning a Boolean

value so the data type of this is Merit

will be Boolean So based on the value

which we are assigning to the variable

the variables data type will be set and

that's why we say that JavaScript is

dynamically typed there the data type is

calculated based on the value which is

stored in the variable

but typescript is strongly typed because

in typescript we can explicitly specify

what type of data we want to store in a

variable

for example here

for the name variable we are specifying

the data type as string so in this name

variable we can only store string values

if we try to store a number value in

this name variable it will throw an

error but that is not the case in case

of JavaScript so in case of JavaScript

to this name variable I am assigning the

string value later I can also assign a

numeric value to this name variable and

it is not going to complain

okay so that's why typescript is

strongly typed because there whatever

data type we specify only that type of

data we can store in the variable

but JavaScript is not strongly typed it

is dynamically tagged in a variable we

can store a value of any data type

and since typescript is strongly typed

because of this it helps us avoid many

bugs in our application which can be

introduced due to dynamically typing now

you also need to remember here that in

typescript specifying the variable type

is optional it is not mandatory for

example here we are explicitly

specifying the data type for this name

variable as string but this is optional

this is not mandatory if I don't specify

the data type here for this name

variable just like JavaScript we can

also store any type of value in this

name variable

but if we explicitly specify the data

type for a variable this feature makes

our application more predictable and it

also makes it easier to debug them when

something goes wrong

typescript also has quite a few object

oriented features which we do not have

in JavaScript like interfaces access

modifiers Fields properties generics Etc

these features are not available in the

current version of JavaScript but they

might be introduced in the future

versions of JavaScript

another benefit of using typescript is

that we can catch errors at compile time

instead of at runtime so when compiling

the typescript code so basically there

is a compilation step involved and

during the compilation we can catch

these errors and fix them before

deploying it in the production

so typescript is a beautiful programming

language and it is basically a superset

of JavaScript any valid JavaScript code

is also a valid typescript code if you

know JavaScript then you already know

most of the typescript concepts that's

why in this course I will not talk about

typescript specifically if you know

JavaScript then you're good to take this

course the rest of the features of

typescript which is not available in the

current version of JavaScript you will

learn about it as you move along with

this course

now I am not going to talk about

typescript specifically in this course

but barely I am going to create a new

course for typescript and there I will

keep on uploading typescript related

topics

so along with learning angular from this

course you can also learn typescript

parallely from that typescript course

and in that typescript course I am going

to cover everything from scratch to

advanced level

but in this angular course since I don't

want to make it too lengthy I will not

cover the typescript topics whenever

required I will explain some of the

features of typescript but I am not

going to cover typescript as a section

in this course for that I am going to

create a separate course and you can

watch that course in order to learn

typescript

all right so this was a very brief

introduction of what is typescript

now in the next lecture let's go ahead

and let's learn about component and

let's go ahead and let's create a new

component for our angular application

this is all from this lecture thank you

for listening and have a great day