搭建环境 · web全栈

### 创建项目 ``` npm init -y ``` 修改package.json ``` { "name": "ts_demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"", "lite": "lite-server", "tsc": "tsc", "tsc:w": "tsc -w" }, "keywords": [], "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "lite-server": "^2.2.0", "concurrently": "^2.0.0" } } ``` ### 新建typescript编译器配置文件 tsconfig.json ``` { "compilerOptions": { "target": "es5", "module": "amd", "sourceMap": true }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] } ``` ``` tsconfig.json文件各项说明如下： "compilerOptions"——编译器选项； "target"——编译目标，如这里编译为es5代码； "module"——处理独立文件时的模块加载方式； "sourceMap"——是否创建map文件以帮助调试； "exclude"——编译器会编译TypeScript文件（.ts或.tsx），通过排除设置里的TypeScript文件不会被编译 ``` ### 测试 index.ts ``` class Person{ name: string; constructor(name: string){ this.name = name; } say(){ console.log(this.name + " say ...."); } } let person = new Person("sn"); console.log("person:" + person.say()); ``` index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="demo1.js"></script> </body> </html> ``` ``` npm start 自动打开浏览器 ``` ### 使用调试 ``` 点击绿色小三角（或F5）就开始调试 ``` launch.json ``` { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}\\index.js", "outFiles": [ "${workspaceFolder}/**/*.js" ], "sourceMaps": true } ] } ```