4Geeks logo
4Geeks logo

Bootcamps

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Academy

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Search from all Lessons


LoginGet Started
← Back to Lessons

Weekly Coding Challenge

Every week, we pick a real-life project to build your portfolio and get ready for a job. All projects are built with ChatGPT as co-pilot!

Start the Challenge

Podcast: Code Sets You Free

A tech-culture podcast where you learn to fight the enemies that blocks your way to become a successful professional in tech.

Listen the podcast
Edit on Github

What is Typescript?

What is Typescript?
Data types in TypeScript
  • Classes

JavaScript is a language that has a weak typing, this means that the variables are declared without a type and depending on the value assigned to it is the type of data that the variable assumes. We can modify, operate and compare the values ​​between them without having to do a previous conversion.

In the following example we can see how we change the data type without any type of conversion:

1 2let name = "Learning Javascript" 3console.log(typeof name) 4// "string" 5 6name = 33 7console.log(typeof name) 8// "number"

What is Typescript?

Typescript is a programming language that adds new features to Javascript, this is known as a superset. A superset is written based on another programming language, applying improvements to the original language. That is why Typescript was written about JavaScript: to add new features that you will see later.

Typescript is the solution to many of the JavaScript problems, it is designed for the development of robust applications, implementing features in a language that allow us to develop more advanced tools for application development.

Static typing

Static typing defines that:

  • Variables have only one data type

  • The values assigned to the variables must have the same type as the variable.

The following example is declaring the variable message of type string. The values must have the same data type as the variable, for this reason the string Learning Typescript is assigned

1let message: string; 2message: 'Learning Typescript';

Data types in TypeScript

Variables can have different types of values, below you can see how we can define each type using TypeScript:

  • Boolean: Only takes two values: True or False
1let isExist:boolean = true
  • String: Any string of characters.
1let message:string = "Learning TypeScript"
  • Number: Only numbers.
1let age:number = 33
  • null: Takes undefined or empty values.
1let isNotExist:null = null
  • Array: A list with a data type.
1let arrayNumber:Array<number> = [1, 2, 3, 4] 2let arrayNumber:Array<string> = ["one", "two", "three", "four"]
  • Tuplas: Accepts a list of predefined data types.
1let arraytupla: = [number, string, number] 2arraytupla = [23, 'Hello World', true]
  • Void: It is used to indicate that we do not have a defined data type.
1let notDataType:void = undefined
  • Enum: It allows defining possible values that can be assigned to the variable.
1enum Animals {cat, lion, dog, cow, monkey} 2let c: Animals = Animals.cat;
  • Any: It is used when the data type can be any of the above.
1let wherever: any = 14; 2wherever = "people";

Classes

As in any other object-oriented programming language, classes in TypeScript have fields, constructors, properties, and functions. Classes act as containers that encapsulate code to be consumed in an easier way.

When defining a class we use the word class and close with curly brackets {}, as well as in c# and java, and then we define inside our fields, constructors, properties and functions.

1 2class User { 3 # fields 4 private name: string; 5 private lastName: string; 6 7 # Constructor 8 constructor(name: string, lastName: string){ 9 this.name = name; 10 this.lastName = lastName; 11 } 12 13 # Properties 14 get getName(): string { 15 return this.name; 16 } 17 18 set setName(value : string): string { 19 if(value === undefined) throw 'Enter a valid value'; 20 this.name = value; 21 } 22 23 #Functions 24 fullName(){ 25 return this.name + ' ' + this.lastName 26 } 27} 28 29const newUser = new User('Juanin','JanJarri'); 30console.log('The new user is:', newUser.fullName()) 31

In the previous example a constructor () method is defined that receives the parameters name: String, lastName: String, these parameters are assigned to the internal values of the class using the this method to reference them.

In addition, the Properties allow us to obtain and assign data from variables or internal methods of the class. In the example, the setName () method allows assigning the value received as a parameter to the internal property called name. The getName () method allows obtaining the value of the internal property 'name'.

The Functions allow us to execute functions or internal methods of the class, in the example theb fullName () method returns the union of the internal properties name plus lastName.

To create an instance of the User class we define the following constantconst newUser = new User ('Juanin', 'JanJarri');In these lines of code you can see that when creating this instance the parameters are sent ' Juanin ',' JanJarri' to the constructor to initialize the class with those values.

Interfaces

Sometimes called signatures, it is the mechanism that Typescript uses to define types in classes. They allow you to define the structure or the most complex type of objects.

The way an interface is used is very similar to how a class is defined, but only attributes and methods and their implementation are declared.

Like simple variable types, these objects will also need to follow a set of rules that you create. This can help you write code with more confidence and less chance of error.

In the following example we define an interface called Lakes:

1interface Lakes { 2 name: string, 3 area: number, 4 length: number, 5 depth: number, 6 isFreshwater: boolean, 7 countries: string[] 8}

The interface Lakes contains the type of each property that we are going to use when creating our objects. Next we will create a new firstLake object that will inherit the properties of the Lakes interface.

1let firstLake: Lakes = { 2 name: 'Caspian Sea', 3 length: 1199, 4 depth: 1025, 5 area: 371000, 6 isFreshwater: false, 7 countries: ['Kazakhstan', 'Russia', 'Turkmenistan', 'Azerbaijan', 'Iran'] 8}

As you can see, the order in which you assign a value to these properties does not matter. However, you cannot omit a value. You must assign a value to each property to avoid errors when compiling the code.

In this way, Typescript ensures that none of the required values are lost by mistake.

Optional properties

Sometimes you may need a property only for some specific objects.

For example, suppose you want to add a property to specify the months that a lake freezes. If you add the property directly to the interface, as we have done so far, you will get an error for other lakes that are not frozen and therefore do not have the frozen property. Similarly, if you add that property to lakes that are frozen but not in the interface declaration, you will still get an error.

In such cases, you can add a question mark ? After a property name to make it optional in the interface declaration. This way, you won't get an error for missing properties or unknown properties. The following example redefines the Lakes interface but the area property remains optional.

1interface Lakes { 2 name: string, 3 area?: number, 4 length: number, 5 depth: number, 6 isFreshwater: boolean, 7 countries: string[] 8}

Playground

Conclusion

This lesson introduces all the data types that are available in Typescript. We learned how assigning a different type of value to a variable will give you errors in Typescript. This check will help you avoid many errors when working on large and robust applications.