TypeScript configuration
Hi in this post we are going to see how to configure TypeScript in our project! Yeah!
1.- I’m using Visual Studio code as my editor because I like this code editor (there is a lot of plugins that we can use for this editor) but you can use yours like: Sublime, Atom, etc.
2.- Install NodeJs from here in that way we can use npm in our terminal.
3.- Open the project folder in the terminal and run the next command to create a package.json (in this file we are declaring all the libraries, dependencies that our code will be using in the project).
Note: my project is called TypeScript (folder called Typescript)
If you see package.json is created automatically when we run that command:
4.- The next step is install TSC (TypeScrip Compiler), TSLint and type declarations for NodeJs
Now our package.json will looks like this:
Nice!
5.- Every project that is implementing TypeScript need to have a file called tsconfig.json, so we are going to create this file on the root of the project
Note: when we said “root directory” means that we need to insert the file directly inside of this the main project folder, so inside this folder in our case.
Ok, the tsconfig.json file is where TypeScript projects define things like which files should be compiled, which directory to be compiled them to, and which version of JavaScript to emit.
Good, so now this will be the configuration:
{
"compilerOptions": {
"lib": ["es2015"], // API should TSC assume exist in our environment
"module": "commonjs", // Module system that TSC compile our code (others SystemJS, ES2015)
"outDir": "dist", // Folder that TSC will put the generated Javascript code
"sourceMap": true, // Helpful for debugging code
"strict": true, // Be strict as possible when checking for invalid code
"target": "es2015" // Javascript version that TSC should compile our code
},
"include": ["src"] // Folder that TypeScript Compiler look in to find TypeScript files
}6.- Then our project need to have a tslint.json this file contain our TSLint configuration, run this next command:
The file tslint.json will be created automatically:
Note: you can check more rules and chose the rules that you want to implement in your code – here
7.- The final step to prove our TypeScript implementation is to create some code in our index.ts file, so then we need to create this file index.ts (need to be extension .ts that means that this file is a TypeScript file).
Create a src folder
Inside the src folder create the file index.ts
Let’s insert some console for test this:
console.log("Hi there!");
Then to compile and run the TypeScript code run this commands in your terminal:
Nice!!!! now we know how to configure our project with TypeScript!
By Cristina Rojas.
