Angular Fundamentals Course – Learn the basics for writing applications with Angular: TypeScript for JavaScript: Featured

TypeScript for JavaScript: Featured

0
(0)

Table of Contents

Angula JS

What is TypeScript?

TypeScript is a superset of JavaScript. With another words, TypeScript code is a mixture of plain JavaScript plus TypeScript features.

Anything that you can do in JavaScript, you can also do in TypeScript using the same syntax. As well, are additional features what we can use.

TypeScript code is only development environment construct. This means that TypeScript code need to be compile into plain JavaScript using TypeScript compiler.

TypeScript Features:

Static Typing

Allow us to specify data types for variables, properties, parameters, and so on. For example:

let name: string let age: number

So, if we try to set any of this to an invalid value, such us assign age to string value. Typescript compiler would throw on error and would fail to compile. So that, we can catch potential bugs earlier in the process.

Interfaces:

Define interfaces for entire objects, and that will enforce the shape of objects.

In example bellow I want to be sure that all dogs had a string name and numeric age properties. So I create an interface like this:

Interface IDog {
name:string
age:number
}

And then I declared variable of this type like this:

let max:IDog

In this way, I will get compile time safety. So, if I will try to assign an object to max that does not include these types, would fail to compile. For example, the example bellow will fail because age is set to a string value instead of to a number:

Interface IDog {
name: ‘Max’,
age:’seven’ 
}

Class properties

Given a simple ES2015 class like:

Class Dog {
constructor (name) {
this.name = name
}
}

With TypeScript we can be more explicit by declaring a name property:

Class Dog {
name:string 
constructor (name) {
this.name = name
}
}

As well, we can also declare properties that are not initialized in the constructor like this:

Class Dog {
name:string 
color:string
constructor (name) {
this.name = name
}
}

Actually, the types are not required. So, we can declare these properties like this:

Class Dog {
name
color 
constructor (name) {
this.name = name
}
}

We can access all of these property internally in the class. In example bellow, I access the name property in the speck function:

Class Dog {
name:string
color:string
constructor (name) {
this.name = name
}
speak() { console.log(‘My name is:’ + this.name) }
}

We can also access these outside of the Dog class. That because class members are public by default. If we want one or more of these members to be private, which means that they to be accessible only within the class. Well, we can give them the private keyword like this:

Class Dog { private name:string private color:string 
constructor (name) {
this.name = name
}
speak() { console.log(‘My name is: ‘ + this.name) }
}

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

TypeScript for JavaScript: Featured

Leave a Reply

Your email address will not be published. Required fields are marked *

TypeScript for JavaScript: Featured

Lesson Content