Share via

Typescript: Getting Started - SPFx Development (Part 3)

  • Article

We saw how to setup the development environment in the Part 2 of this series. Now lets see how to work with project files and compiler options.

Typescript Project Files

These are plain simple text files that has the name tsconfig.json. The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

It also helps to store the compiler options which otherwise would have to be specified while running the compiler. In addition to it TSConfig can be used to specify which files has to be included or excluded from compilation using include/exclude keys. A tsconfig.json file is permitted to be completely empty, which compiles all files included by default (as described above) with the default compiler options.

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Compiler Options

TSConfig.json file can be used to govern how the compiler compiles the TS Files by specifying the properties as Key Value Pair within the file.

 We do not have a TSConfig in the project yet. Lets go ahead and create one by running the below code.

tsc –init

Now if we head over to the project, we can see that the TS Config has been created with some default key value pairs.

Lets delete the contents and start with a minimalistic configuration for easier understanding. We will go with the below Configuration settings. As we can see the configurations are present as an array within the compilerOptions Key. The "compilerOptions" property can be omitted, in which case the compiler’s defaults are used.

Few of the properties that we have mentioned are

  • Target : It specifies to the version of Javscript to which it is being compiled. If we don’t specify any value it will by default be compiled to ES3. Here we have specified ES5 which is a widely supporte version in most of the browsers.
  • outDir : It specifies the folder to which the compiled Javsascript file will be saved.In case the folder is not present, it will be created.
  • watch :  It leaves the compiler running in the background. Whenever the TS file is saved it compiles the JS files automatically and we can see the changes in the JS files in realtime
  • files : this property specifies which files should be compiled. It is an array of file names which has to be compiled to create the output JS files. In our case, we are compiling only the app.ts file within the app folder.
  1. "compilerOptions": {
  2.     "target": "es5",
  3.     "outDir": "JS",  
  4.     "watch":true,
  5. },
  6. "files" : [
  7.    "app/EmployeeRegistration.ts"
  8. ]   

Lets go ahead and delete the JS folder in the current project structure so as to test if the compiler option will create an output directory and place the compiled JS File there.

Running tsc will start the compilation and we can see that the JS folder has been created and the compiled js file with the same name as TS file has been created inside it.

Nows lets take a look at the watch property in action using the below added code :

let a , b =20;

let c = a + b; //Adds a & b, saves value to c

console.log("The sum is " + c);

From the file tab in VS Code, I have enabled Auto save so that the code gets saved intermittently.

Now as soon as I add the above code to the TS file, it compiles and add the corresponding lines of code in JS file as the Watch is enabled.

Now lets start the Server by running npm start and see the results in the console in the browser.

We can see that the result is coming up as NaN. Lets try to debug the code by adding a breakpoint to the JS File in the source tab.

On rerunning it hits the breakpoint and we can see that the variable is declared but not assigned a value which results in the NaN when the calculation happens. Lets go back to the editor and assign a value, run the compiler once again and restart the server.

This time the console has outputted the value correctly.

Thus we saw how we can configure the compiler option and utilize watch to see the JS compilation in real time .