Table of Contents
1. Install typescript in vscode
2.Typescript is compiled into JavaScript
3.tsconfig.json configuration
4.vscode’s detection function for typescript
When I was writing the API interface, I felt very unhappy that there was no prompt, so I wanted to use typescript to rewrite all the js’ files
I assume that you use vscode to develop
1. Install typescript in vscode
npm i typescript -g
-g means global installation, so you don’t have to install it every time you write a ts file
If the console reports an error that npm is not available, please install node and use it again
Check the version information of ts to ensure correct installation
tsc –version
The appearance of version information like mine means that ts can be used correctly!
Because the final operation of *.ts files needs to rely on js. Therefore, ts must be compiled into js before it can be run.
I give examples as above
2.typescript compiled into JavaScript
But careful friends may have discovered that the JavaScript code of 10 years ago is different from the current JS code.
In the past, JavaScript did not have class syntax. Only prototype chains can be used. In order to facilitate understanding and deepen the impression, I give examples.
This is written in class
class Father {
move = () => console.log('I'm walking');
constructor(age, assets) {
this.age = age;
this.assets = assets;
}
}
class Son extends Father {
constructor(age, assets) {
this.name = 'Zhang San'
this.wife = 'right hand'
super(age, assets);
}
}
The other method requires so much code and is implemented using the Prototype Chain method.
function Father(age, assets) {
Father.prototype.move = function () {
console.log('I'm walking')
}
Object.defineProperty(Father.prototype.__proto__, 'age', {
value: age,
writable: true,
})
Object.defineProperty(Father.prototype.__proto__, 'assets', {
value: assets,
writable: true
})
}
function Son(age, assets) {
Son.prototype.name = "Zhang San"
Son.prototype.wife = 'right hand'
Son.prototype.__proto__.__proto__ = new Father(age, assets).__proto__.__proto__
}
So…how does typescript know what code I want? Do I want the prototype chain or the class? Should we require or import? Typescript doesn’t know, but it does.
Who is that? He is tsconfig.json
Configuration of 3.tsconfig.json
- Create a new tsconfig.json file in the root directory
- Configuration related information
{
“compilerOptions”: {
“target”: “es5”, // Specify ECMAScript version
“module”:”CommonJS”, // The currently written module type.
“outDir”: “./dist”,
“rootDir”: “./src”,
“lib”: [
“dom”,
“dom.iterable”,
“esnext”
], // List of dependent library files to be included in compilation
“allowJs”: true, // Allow JavaScript files to be compiled
“skipLibCheck”: true, // Skip type checking of all declaration files
“esModuleInterop”: true, // Disable namespace references (import * as fs from “fs”) Enable CJS/AMD/UMD style references (import fs from “fs”)
“allowSyntheticDefaultImports”: true, // Allow default imports from modules that have no default exports
“strict”: true, // Enable all strict type checking options
“forceConsistentCasingInFileNames”: true, // Do not allow inconsistent format references to the same file
“module”: “esnext”, //Specify module code generation
“moduleResolution”: “node”, // Use Node.js style to resolve modules
“resolveJsonModule”: true, // Allow modules imported with .json extension
“noEmit”: true, // No output (meaning not to compile the code, only perform type checking
“jsx”: “react”, // Support JSX in .tsx files
“sourceMap”: true, // Generate the corresponding .map file
“declaration”: true, // Generate the corresponding .d.ts file
“noUnusedLocals”: false, // Report errors for unused local variables
“noUnusedParameters”: false, // Report errors for unused parameters
“experimentalDecorators”: true, // Enable experimental support for ES decorators
“incremental”: true, // Enables incremental compilation by reading/writing information from previous compilations to a file on disk
“noFallthroughCasesInSwitch”: true
},
“include”: [
“src/**/*” // *** TypeScript files should be type checked ***
],
“exclude”: [“node_modules”, “build”] // *** Files without type checking ***
}
You can copy it directly. It should be noted that
- “outDir”: “./dist”: Indicates the path after typescript compilation and output
- “rootDir”: “./src”,: Indicates the path where typescript needs to be compiled
For example, this is my example. The ts files written under src are compiled into the dist directory using the tsc command. Then you can run it through nodemon or PM2
It’s fun to write interfaces in typescript. But it has to be compiled every time. For example, I have to compile the database interface every time I finish writing it. So you guessed it next. I’m going to propose a real-time compilation feature.
If you see this, please give it a like. If you see this, please give it a like. If you see this, please give it a like. If you see this, please give it a like.
4.vscode’s detection function for typescript
While the strong typing of ts files provides us with convenience, it also brings some disadvantages. Do you remember your original intention of using js. Feel good about being able to refresh your code in real time. However, ts violates this principle and needs to be compiled into a js file every time before it can be run. Isn’t this more troublesome than java files?
Fortunately, this No. 1 editor in the universe can solve all problems
vscode’s powerful task detection function can detect changes in ts files and customize tasks. The premise is that there is a json configuration file.
very good. We have already configured tsconfig.json.
Isn’t it amazing if you choose to monitor the ts file and it will be automatically compiled after the file is changed?
As long as you save every time, vscode will compile like crazy
5.Use of nodemon
nodemon is a tool that helps develop based applications by automatically restarting node applications when file changes in a directory are detected. >node.js applications
But actually this is not the only way, but in the testing phase, nodemon is the best choice
- Real-time compilation of ts files has been implemented previously. Wouldn’t it be better if the js file could be interpreted and run in real time?
- Although we can write js code in html and run it in the browser in real time, this is not native js code written after all. If you manually copy the code into the html file. It’s a bit uncomfortable
- We can use the node *.js command to run js programs. But this is not efficient.
- The emergence of nodemon plug-in solves your problem. Detect changes in running js files. Every time the js code changes, it will be re-run.
- Nodemon also has disadvantages. If thread blocking occurs, unexpected consequences will occur, but it is more than enough for the development environment.
npm i -g nodemon //Install nodemon plug-in
At this point, we have achieved real-time compilation of ts files.