TypeScript编译环境配置

TypeScript 安装和配置

  • 全局安装TypeScript语言的编辑器

    javascript 复制代码
    npm i -g typescript
  • 用vscode打开项目文件夹,右键选择在终端中打开,在终端中输入

    javascript 复制代码
    tsc -int
    // tsc是ts语言的编译器,c是compile的意思 ,编译
  • 结果:在当前项目文件夹生成tsconfig.json文件,其中保存的是将ts编译为js时所需的配置,比如:

    • target:"ES5",在将ts文件编译为js文件时,编译为ES5的版本,兼容更多浏览器
    • module:"commonJS",将来ts文件中模块化开发所采用的标准
    • strict:true,将ts文件编译js文件时,自动启用严重模式


编译--运行ts文件

手动编译

  • 新建xxx.ts文件

    javascript 复制代码
    let a:number=10;
    console.log(a);
  • 再编译ts文件为js文件

    • 打开命令行窗口,输入tsc xxx.ts
  • 结果,tsc编译器将.ts文件的内容翻译为等效的js文件,保存在ts文件旁边的同名xxx .js

    javascript 复制代码
    "use strict"
    var a=10;
    console.log(a);
  • 生成的js文件进行修改就不归编译器管了,所以js文件不允许修改

  • ts只是在开发阶段来规范,限制的标准而已,实际上将来的运行的还是js文件

配置自动编译

  • 在vscode中选择终端 -> 运行生成任务 -> tsc:监视xxx
  • 结果,只要一修改ts文件,一保存,就自动编译,自动创建js文件
  • 不输入 命令,运行js文件
    • 先打开要运行的js文件
    • 点左边小虫+三角图标
    • 点运行和调试
    • 选择nodejs
    • 看到执行结果
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt