搭建環境 · 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 } ] } ```