What is TypeScript?

Lightning Web Components has basic support for TypeScript. Type checking is not possible between js files and Html and even deployed typescript code can not be processed by the lwc platform compiler. To overcome this one can use vs code’s language service and use the lesser strict levels of typescript.

The level of typescript according to its strictness goes on increasing as mentioned below

For Javascript files.

• Using //@ts-check at beginning of the js file or using checkjs in checkjs in compilerOptions in jsconfig.json file.
• A type system based only on interference with js code.
• Using incremental typing with JSDoc https://www.typescriptlang.org/docs/handbook/jsdoc-supporte d-types.html
  
  

For Javascript files.

• Typescript code
• Typescript with strict enabled.
  
  

Using typescript in VS code for LWC

1. Specify the types using JSDoc constructs.
2. To enable type checking add //ts-check at beginning of the js file.
3. VS code will show an error as in the below example
   
   

One can also enable type checking for all js files by adding “checkJs”: true in the jsconfig.json file. Also, make sure you set “ESNext” as a target to prevent errors from showing up on ES5+ features like get/set accessors.
{
“compilerOptions”: {
“checkJs”:true,
“target”: “ESNext”
}
}

Benefits of Typescripts

1. Compilation − As compared to JavaScript, instead of running code and finding out errors typescript has an error-checking feature provided by TypeScript transpiler which compiles the code and generates errors it also finds some sort of syntax error which helps find errors before the run.
2. Strong Static Typing- It is a strongly typed language ie. if no type is declared for a variable it is inferred by TLS based on its value.
3. OOP’s – supports concepts like interfaces, inheritance, etc.