Shulou(Shulou.com)06/02 Report--

What are the implementation steps of TypeScript environment construction? For this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more small partners who want to solve this problem find a simpler and easier way.

1. Install TS Environment

Go to the desired project folder and initialize with npm init --yes (this command generates package.json in the project folder)

Install typescript (installation failed, probably due to insufficient permissions)

Global installation: cnpm i typescript -g [Suggestion]

Local installation: cnpm i typescript -D

[cnpm i typescript -D stands for cnpm install typescript --save-dev]

Generate tsconfig.json file in project folder

tsc --init

Modify the configuration in the just generated tsconfig.json file

Note: dist, src and package.json must be in the same parent directory if configured as follows

"outDir": "./ dist" //ts After compilation, generate js file and save it to dist folder "rootDir": "./ src", //the ts source file written by oneself is in src folder"target": " es5 ", //the compiled js file is compatible with es5 syntax

Create a new base.ts file in src directory

//create a variable strlet str: string ='hello word'; console.log( str);

Compile ts files in src directory and subdirectories

Under src directory: input tsc (note that you can write tsc command directly), it will compile all ts files under src directory and subdirectory into js files, and output them all to dist directory.

tsc

automatically compiled

tsc --watch2. Install ts-node

Ts-node allows node to run ts code directly without having to compile ts code into js code using tsc.

Global installation: cnpm i ts-node -g [Suggestion]

Local installation: cnpm i ts-node -D

After installing ts-node, using ts-node in the folder where ts files are located will run ts files directly in the terminal

ts-node base.ts3. Install nodemon

nodemon role: debug by restarting the application when file changes in the directory are automatically detected, node. js-based applications

Global installation: cnpm install -g nodemon [Suggestion]

Local installation: cnpm i nodemon -D

Configure automatic detection in package.json to automatically restart the application

"scripts": { //if there is already one, just paste it in "start": "nodemon --watch src/ -e ts --exec ts-node ./ src/base.ts"}

nodemon --watch src/indicates: detection directory is package.json sibling directory src

-e ts means: nodemon command is ready to listen to ts suffix file

--exec ts-node ./ src/base.ts means that if any changes are detected in src directory, the base.ts file should be re-executed.

Start listening to src directory

start is the name of the configuration in step 2, which corresponds to it

npm start4. Parcel Package Support Browser Running TS Files

Install Parcel Packager: npm install -g parcel-bundler

Create a new index.html file in the folder where package.json is located

Add the ts file you want to see in your browser to your html file

Document

Add a startup entry to npm in package.json to support starting the parcel toolkit

"scripts": { "startParcel": "parcel ./ index.html" //Note: If there is already a start in the configuration, you can name it something else},

Start Parcel Toolkit

npm run startParcel

If the above is wrong, use

cnpm startParcel About the TypeScript environment to build the implementation steps is what the answer to the problem is shared here, I hope the above content can be of some help to everyone, if you still have a lot of doubts not solved, you can pay attention to the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.