概述
目前使用TypeScript编写前端项目已成为趋势，所以搞一个运行在Chrome的demo 来方便练习一下TypeScript 相关语法。由于技术更新太快，会导致你在网上参考的例子可能已经过时，或者运行不起来。我的建议还是直接先去看官方文档，尝试这编写demo，实在搞不出来再去Google 查找相关文章。
构建环境
- vscode：1.53.2
- chrome：87.0.42.80.141
- Node.js：12.8.3
- win10
具体步骤
-
第一步：创建工程
//创建目录工程 mkdir typescript_chrom_demo //安装typescript 编译环境（推荐：使用pnpm安装，速度贼快） pnpm install -g typescript //初始化工程，会产生tsconfig.json 配置文件 tsc ---init 复制代码 -
第二步：创建目录和相关文件
-
目录结构效果
-
具体内容如下： helloworld.html
<!DOCTYPE html> <html> <head> <title>This is a use TypeScript HTML demo</title> </head> <body> </body> <script src="../out/helloworld.js"></script> </html> 复制代码helloworld.ts
let message: string = 'Hello Web, I am is TypeSciprt'; console.log(message); document.body.textContent = message; 复制代码tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "amd", "outFile": "./out/helloworld.js", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } 复制代码
-
-
第三步：创建运行和调试launch.json
内容如下：
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Open helloworld.html", "file": "d:\\Work\\h5_workspace\\typescript_chrome_demo\\src\\helloworld.html" } ] } 复制代码 -
第四步：打开终端，开启自动编译typescript
tsc -w 复制代码效果如下
-
最后：F5启动运行
效果如下
参考文献
- TypeScript tutorial in Visual Studio Code
- VSCode Debugging
- TypeScript Compile on Save in Visual Studio Code
链接：https://juejin.cn/post/6935699900134850568
标签：typescript,Chrome,Demo,helloworld,TypeScript,复制,demo,true From： https://www.cnblogs.com/im18620660608/p/17169614.html