Typescript for Angular developers
Tags: typescript, angular, frontend, webdev
Published: 2024-01-08 17:01:03

[Versión en español](https://dev.to/miasalazar/typescript-para-desarrolladores-de-angular-111o)

It's been two years since I started working with Angular and, I'm not going to lie, at first, Typescript seemed strange to me. I had never touched either technology before, so the .ts files were a bit difficult for me, given how different this framework developed by Google seemed to me. For this reason, here I am going to leave a series of tips for those who are new to Typescript.

**What is it?**
Typescript is a Javascript superset, that is, it can execute both Javascript and your own code. However, most browsers do not understand this language, so it needs to be transpiled to Javascript for it to be understood.

It was developed in 2012 because Javascript presented some problems when creating large-scale applications: it is not typed, it did not have classes or modules... For this reason, it was created by Microsoft, creating a language that, today, remains at the forefront.

**Typed variables**
Its main characteristic is that it is typed. We can specify the type of the variable after its name. This typing includes primitive types, such as booleans, arrays, objects...
![Examples of typed code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16girkh7m78e5gt1izqf.PNG)

Within the types, Typescript offers some very interesting options such as:

- Literal types: You can specify to the variables that they will be a specific string or number.
![Literal type example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8usal8gagteizxxs28aj.PNG)

- Tuples: It is an array of fixed size to which you tell its type for each element.
![Tuple example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntbx28hxa11stlkgimep.PNG)

- Dynamic types: The any type allows that a variable stores a value of any type. [To know the difference between any and unknow we can read this article](https://dmitripavlutin.com/typescript-unknown-).
- Generic type: They are complex but very useful. It allows us to reuse code and, to summarize, it allows us to work with various types. [You can read more about generics here](https://code.tutsplus.com/es/tutorials/typescript-fo).

**Enum**
They are a very interesting feature of this language. They assume a list of related values, which are constants.
![Enum example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhrvglvkn9s4moc5b4wb.PNG)

**Features**
Functions are also typed, both what they return and each of their parameters.
![Function example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yuyor9jy44mc1jh7vs0.PNG)

**Interfaces and classes**
The interfaces are quite similar to other languages. They are a structure that defines a syntax that must be followed. Interfaces are not compiled, but are used to check typing.
![Interface example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0rat02bispme33sha9h.PNG)

**Optional properties**
Related to interfaces, sometimes we want to indicate that some properties will be optional. To do this we use optional chaining, with a question mark.
![Optional property example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y153omabyirup3215v3i.PNG)

**Combined types**
You can indicate that a variable will be of one type or another, and we can also tell it that it is a class that implements an interface.
![Combined types example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x37lsffumy4s3uu4942l.PNG)

**Type Assertion**
Similar to type conversion, or casting, in other languages.
![Type Assertion example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56eus1ww6tr2fp5c2u3u.PNG)

**Naming**
Typescript uses camelCase for variables, functions, attributes, properties and methods and PascalCase for Interfaces and Classes.