Common Mistakes While Learning TypeScript

Many people associate frustration with the experience of learning TypeScript. People who have been working with other programming languages like C# and Java finds it a little difficult to get comfortable with Typescript because it works differently. Those who have spent their time with JavaScript find it hard to reconcile with a TypeScript compiler. Listed below are some of the common mistakes made by people while beginning their journey with Typescript so you can avoid them. 

Mistake 1: Ignoring JavaScript

JavaScript is the subset of TypeScript. This means that JavaScript forms a very important part of this language. If you decide to learn Typescript does not mean that you will not have to learn JavaScript. In fact, it will make Typescript easier to understand. You can make a reasonable allowance for catching an error like you may become used to in other programming languages. 

It cannot be done easily because of how errors work in JavaScript. A code that would execute in TypeScript will not be in JavaScript. A patch may be available and can be found online but will not be applicable in all scenarios. There is no guarantee in TypeScript about access to property simply on the basis of the code. A code may be perfect in JavaScript, but the same thing can be hard in a TypeScript system. 

If you begin Typescript without any knowledge of JavaScript, you should learn to pick out the differences between the TypeScript system and JavaScript. This is quite achievable by spotting the right thing. Parameters in a function can be named. Objects can be used as arguments. Codes can have a pattern. Conditional chaining can be implemented in TypeScript compilers but it emerged as a feature of JavaScript. The extension of existing classes is also a feature of JavaScript. Private class fields that begin with a # symbol and are not accessible easily are features of JavaScript. 

TypeScript website has given a clear meaning to what is the meaning of using Typescript. TypeScript is JavaScript but one that also contains a syntax of types. This also makes it clear that to understand TypeScript, JavaScript is important. 

Mistake 2: Annotating Everything

In order to tell what type should be expected explicitly, a type notation is used. Other programming languages make it very prominent, the syntax ensures that you know what you are dealing with. The opposite of that js type inference. This means that TypeScript figures out the type for the developer, making it easier. Type annotation is also a very visible difference in the syntax of JavaScript and TypeScript. 

When you begin your learning experience with Typescript, you would want to be annotating for expressing the type you expect. This would also feel like the obvious thing to do in the beginning, but it is much better to make use of annotations sparingly and let TypeScript do the work of figuring out the type. A type annotation serves as a way for expressing where a contract requires checking. If type annotations are added to a variable declaration, it tells the compiler to check the type and match it during the assignment. 

A type annotation is a way for you to tell the compiler where contracts have to be checked. If a function returns a type that is not compatible with the assigning variables, an error is shown by the Typescript compiler. In order to use annotation, you want to ensure that you are not making mistakes with the types, and using the correct ones. 

Once a type is identified, TypeScript will treat it like that, and any more properties in that type will not be allowed to access if the type does not match. If type annotation is applied to the return value of the function signature, it is essentially telling the compiler to match the moment the value is returned. If the function returns something that does not match the variable on the other side of the assignment, an error will be indicated by the Typescript compiler. 

It is imperative to ensure that the correct type is being returned. This is useful when you are dealing with functions that are constructing big objects from different sources. If you are adding type annotations to any of the parameters of a function signature, you are essentially indicating to the compiler to be checking the type matches the moment it is passed along as arguments. Make sure annotation is used only when it cannot be inferred. 

Annotations should always be used with the parameters of a function because this is where the checking of contracts is done. This is convenient and also has many advantages such as polymorphism. If too many annotations are used, there may be a need to create numerous types and checks than is actually necessary, with no extra benefits. When beginning with Typescript, not using annotations too much will also help you understand and get a feel for what is the meaning of working with a system of structural types. 

Mistake 3: Mistaking Types For Values

Since TypeScript is the superset of JavaScript, it works by adding additional features to this language that is well-defined. After using the languages for some time, you will begin to spot the differences in these two programming languages.  This will also be helpful in visualising how Typescript serves as a layer of types added on to JavaScript.  

A layer of meta-information is done away with before a code of JavaScript is run during runtime. It can be thought of as Typescript code erasing and revealing the JavaScript once compilation begins. Since TypeScript works as a layer above JavaScript, the difference is syntax works as a different layer. When a function creates a name in the code of JavaScript, a type declaration contributes to the code in the Typescript layer. 

It is known that names or declarations serve as types or values. Since the type layer of TypeScript exists above the value layer of JavaScript, it is possible to consume values into the type layer but not the other way. Explicit keywords can also be used to serve this purpose. The type of function can be used for creating a name that can be available in both the type layer as well as the value layer. 

The code becomes difficult to read when declaration types are used for creating types as well as values. Classes can be made use of for the Typescript layer for types and the JavaScript layer for values. Naming conventions can be tricky, generally, classes, interfaces, types etc, are defined using capital letters. They may be contributing to values, but surely contributing to types, until uppercase functions are used in a React application. If names are used as types and values, you can get confused with an error that states that the type is referring to a value, a type error. 

TypeScript is confusing because it does not work similar to other programming languages and needs to make a separation between types and values. There can be types of calls and classes can also make contributions to 2 types. It is important to understand what contributes to a type and what to a value, where the boundaries lie and which direction to move. While learning typescript, it is good to keep your focus on variables, functions and simple aliases for types. This will be quite helpful to you in gaining a good understanding of what goes on in the type layer and value layer. 

Mistake 4: Go Go Go In The Beginning

People who have been working with JavaScript for some time now find it difficult to adjust to this different trajectory and can think of TypeScript as an annoying tool, leading to some annoying and frustrating experiences. A person becomes very comfortable with their codebase and in TypeScript, a compiler is dictating the way, not understanding a lot of things, leading to mistakes even if you know that the code is supposed to work. 

TypeScript will make developers efficient and productive, but in the beginning, it can throw you off a bit. It can be difficult after shifting immediately from the JavaScript codebase. TypeScript is a programming language that tries to get a sense of the application you are building and hence you may have to annotate and work so that the contracts align. The best options are shifting to Typescript from JavaScript, and getting gradually used to the features. It is designed in order to make your work easy and hence it is good to adopt it over time. 

You can take the application in parts and move them to Typescript instead of taking everything at once. There is interoperability between typescript and JavaScript. The compiled code of JavaScript is ignored by Typescript, even if errors are found. The emission of code needs to be explicitly stopped. TypeScript can be used for writing type declaration files as well as to import these files through JSDoc. This can be a step to gaining information about the happenings inside your codebase. 

TypeScript can be used anytime the work becomes overwhelming or consumes a lot of effort. Be careful about the configuration of flags being used. TypeScript as a programming language is designed to be adopted gradually. Numerous types can be used, and even major parts of the application can be kept in JavaScript to help get started. Shifting to Typescript from JavaScript, be patient with yourself. Make use of inline documentation to make sense of your code and improve it. 

Mistake 5: Learning The Wrong Typescript

If you make use of keywords such as declare, namespace or module, you probably are using TypeScript wrong. It does not mean that this keyword makes no contribution and are unnecessary for variety in type-cases. But avoid working with them when beginning with Typescript.