Typescript came to make JavaScript a typed language. This permits us to specify the type of variables or what kind of value a function return. Typescript help to identify errors early and make the process more secure.
HOW TO INSTALL? Before initializing the repository with node, it must install parcel with the command: $ npm install -D parcel-bundler. This is different from live-server due allow us to transcript typescript into JavaScript. Now, in the package Jason modifies the script start to “parcel [files html]” and in dev dependencies it will appear parcel-bundler. Finally add the last setting that says what version of Browser is wished to use: “browserlist”:[“last 1 Chrome version”].
To remove a package: i.e. npm rm live-server.
It is common to have certain problems, the solution to the most frequent one Is to remove the folders: rm -rf .cache dist.
Once we have parcel it is simple as creating a typescript file i.e index.ts and parcel will transcript the code.
Voi lla¸ now typescript is available it will be possible what kind of value the function is going to return but also it must be indicated the kind of the variables i.e 3:number.
Firstly, files to be ignored by. gitignore .cache dist.
Type script accept all kind of variables JavaScript does with an extra enumeration to help things along: Tuple, Enum, Unknown, Any, Void, Never. The ones we are going to talk about here are:
• Let variable1: boolean = true.
• Let variable2: number = 5.
• Let variable3: string = ‘name’
• Let variable4: string [] = []; //indicates it is an array of strings
• Let variable5: Array<string | number> = []; // indicates it is an array of strings or numbers.
• Enum variable6{Red = “Red”, Green = “Green”, Blue =” Blue”} let Favcolor: colour = colour.red; //Enumeration, it has a List behaviour.
• Let variable7: any = ‘Joker’; card = {}. //accepts any kind of value. Use when necessary.
• Let variable8: object = {}.
• Let variable9: [type1, type2]; //tuple allows you to specify and array and its type manually.
To know more here the documentation --> https://www.typescriptlang.org/docs/handbook/basic-types.html.
With Typescript, we can add the type of the parameters and the return value also, this last one is optional.
In the case of anonymous functions, it must be declared the type to the variable and after to the function. i.e: let variable: (x: number, y: number) =>number = function (x: number, y:number):number{return x+y}. But Typescript can guess the function type, so it can be typed on one side of the equation without issues.
The type of the parameters can be optional (parameter?: type), initialize-default (parameter = “this is a string”). Also, to add several parameters it is necessary to use the spread operator to an array type parameter.
Conclusion: Typescript help the coder to bring a good practice in JavaScript thanks that can detect errors and missing variables or values for example. If it is used visual studio code, then the help will be more efficient.
To know more about it https://www.typescriptlang.org/docs/handbook/functions.html
Interfaces indicate the exact form an object must-have, it can’t have more or less than the indicated, if it is optional then it must be indicated also. Now how to create an interface and how to use them:
Interface name {prop:type; prop:type; prop?:type; } the object must have this structure.
Let object: name = {prop:value, prop:value, prop:value}In the object we give the values. In this case, when the value must be return in a function it must be indicated the two results (one in case it has a value and in case it doesn’t) i.e: “return obt.prop ? result1: result2;” if we are using optional properties “prop?:type”.
Also, we can assign to a property the keyword readonly so it will be read it and not modify, this is helpful in case of arrays, readonlyArray<type> when we want to read the array and not modify the original one.
Conclusion: an interface indicates the specific structure the object will have, in case the object won’t use the same property then it can be indicated as optional in the interface. But in the case in a function, the return is that property then it must be indicated the two result options.
To know more about it --> https://www.typescriptlang.org/docs/handbook/interfaces.html
If the project before was made in JavaScript and now it wanted to be in Typescript, then some things must be changed let’s start with the file name, just rename it to “.ts”.
Now all the errors will appear but that is the last thing to worry. If it is used the Work Services, then it is good to know that the cache files are not the right one due to the “.ts” so for the moment is good to comment on them.
In the file, it must be necessary to correct the code, adding the types of each one. Also, it is available the keyword private to functions and variable with Typescript. In the case of working with classes then it is necessary to specify the constructor and the methods, if Typescript is using a class from a JavaScript file then it is possible to transform the structure into a proper class, using visual studio code.
Finally, Typescript will enforce the use of the keyword Extend from classes, which means once it is declared the super keyword inside a subclass, this will inherit the type from the superclass.
Conclusion: Typescript allows us to work with classes specifying the privatization of its variables and methods, but for this, we must use the class keyword to use Typescript in its full. As always all king of variables and functions must be the type to have good usage of the language.
To know more about it --> https://www.typescriptlang.org/docs/handbook/classes.html
Visual Studio Code comes with some plugins that will help us in TypeScript, this is in the case of classes and remark errors. So basically, to pass into Typescript the code editor will remark what it must be changed and even the cause of the errors.
Also, it has a fixing mode, that in case of not having a class declared with this mode it will be established. Another important feature is the private variables and function, if we use this one then once we got an error because it can access the value due to the private behavior then the editor will say it.
Important of course is to rename all the files into “.ts” and in case of using Service Workers, it is important to delete the cache in terminal and in the backend of the SW. The command: rm -rf .cache dist.
Conclusion: the pass from JavaScript to TypeScript Is as easy as renaming the files, and then thanks to the code editor you are using the errors will be remarked and a fixing mode in Visual Studio Code. Now all is up to change those errors and in case of using sw, delete the cache from the terminal and in the backend of the sw.
