安装typescript环境并开启VSCode自动监视编译ts文件为js文件
一、前言
小编最近开始学习typescript，懂得人都知道，typescript是vue3的基础伴生，配合更加默契。就像vue2和js一样！typescript不像js那样浏览器直接可以解读，需要我们把ts文件编译成js文件，这样浏览器才可以解读。所以我们要安装一下ts的环境和自动编译，方便我们后续学习，不需要写完一个ts文件在手动编译！
二、安装typescript环境
必须要有node环境哈！
win + R 输入cmd
npm install -g typescript
-g代表global全局安装
查看版本
tsc -v
三、VSCode配置自动监视编译
1. 新建一个文件夹
2. 在终端打开
3. 初始化配置文件
tsc --init
4. 编辑配置文件
52行修改生成的js文件存放位置为：json文件夹所在目录的js文件夹下，js不存在会帮助我们新建！
79行我们关闭语法检查，随意一点哈！（根据个人喜好设置）
5. 开启自动编译
找到终端，点击运行任务
点击显示所有任务
找到要监视的json文件
出现报错：
error TS18003: No inputs were found in config file
'd:/file-wang/vue/code/test/tsconfig.json'.
Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["./js"]'.
我们不要着急，这是没有监视到ts文件，所以提示的，我们不用管，直接写一个ts测试一下！
四、测试
1. 编写ts文件
新建test.ts
(() => {
function helloWord(str:string){
return '这是第一个ts程序：' + str
}
var text = 'helloword'
console.log(helloWord(text))
})();
我们发现，js文件夹下已经给我们编译成js文件了！
2. 编写html文件
我们直接引入js文件夹下的js文件！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/test.js"></script>
</body>
</html>
3. 浏览器测试
我们在test.html页面按住快捷键：alt + B在浏览器打开次html文件
我们F12看看是否输出了：这是第一个ts程序：helloword
五、总结
这样就完成了基础的安装和配置自动监视ts文件编译成js文件，帮到你的小伙伴记得一键三连哦！谢谢小伙伴的支持！！
有缘人才可以看得到的哦！！！
安装typescript环境并开启VSCode自动监视编译ts文件为js文件的更多相关文章
- 在Windows/Ubuntu下安装OpenGL环境（GLUT/freeglut)与跨平台编译（mingw/g++）
GLUT/freeglut 是什么? OpenGL 和它们有什么关系? OpenGL只是一个标准,它的实现一般自带在操作系统里,只要确保显卡驱动足够新就可以使用.如果需要在程序里直接使用OpenGL, ...
- wamp 在本地安装PHP环境， 开启 curl 扩展
分别打开以下 2 个文件: wamp\bin\php\(your php version)\php.ini wamp\bin\Apache\(your apache version)\bin\php. ...
- Win10环境下配置VScode的C++编译环境
写前感想:前前后后,折腾好几次,最后还是在学长安利下,开始入坑vscode了.原因一个是小巧,还有就是vs新建工程码题的方式太消耗内存了,基本每个项目就是以MB为单位计算的,然后希望用这篇文章记录自己 ...
- vscode隐藏运行ts生成的js文件和map文件
在code-首选项-用户设置中放入以下代码,覆盖原有的 { "files.exclude": { "node_modules": true, "**/ ...
- 安装typescript开发环境
参考文档: http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html 有两个方式 : 1.安装vs 2017,安 ...
- 【原】无脑操作：TypeScript环境搭建
概述:本文描述TypeScript环境搭建,以及基于VSCode的自动编译设置和调试设置.网络上很多相应文章的方式过时了或者无法试验成功. ------------------------------ ...
- 带你一步一步搭建TypeScript环境
今天继续来更新,本篇文章我们讲环境搭建,主要分享一些环境搭建的学习资源及安装步骤,解决一些安装时可能会出现的问题.下面就让我们一起进入学习第一步,搭建TypeScript环境:一. 环境搭建1.1. ...
- electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- TypeScript环境搭建
环境搭建 本篇将简单介绍一下TypeScript,并记录开发环境的搭建.使用Visual Studio Code进行一个简单的Demo开发过程. 第一部分.简介 TypeScript是一种由微软开发的 ...
随机推荐
- redis集群在线迁移第一篇（数据在线迁移至新集群）实战一
迁移背景:1.原来redis集群在A机房,需要把其迁移到新机房B上来.2.保证现有环境稳定.3.采用在线迁移方式,因为原有redis集群内有大量数据.4.如果是一个全新的redis集群搭建会简单很多. ...
- k8s节点执行master命令报错 localhost:8080 was refused
首先是按照二进制方式安装的k8s. [root@ht22 calico]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [ ...
- 数据库基础知识详解三：MVCC、范式以及表连接方式
写在文章前:本系列文章用于博主自己归纳复习一些基础知识,同时也分享给可能需要的人,因为水平有限,肯定存在诸多不足以及技术性错误,请大佬们及时指正. 8.MVCC 多版本并发控制(Multi-Versi ...
- go源码阅读 - sync/mutex
Mutex是go标准库中的互斥锁,用于处理并发场景下共享资源的访问冲突问题. 1. Mutex定义: // A Mutex is a mutual exclusion lock. // The zer ...
- 将个人项目发布到mavan中央仓库
第一步,准备自己的git代码 比如在gitee或者github上的代码,我的是gitee码云上的,开源了一个处理业务日志采集的组件,支持注解方式,支持SpEL表达式,支持变量自定义. 话不多说,直接上 ...
- android软件简约记账app开发day07-备注界面完善
android软件简约记账app开发day07-备注界面完善 ## 昨天我们已经绘制了备注页面,今天来用Java代码组装完善一下. 首先我们新建BeiZhuDialog类关联备注页面,并且实现点击接口 ...
- Jx.Cms开发笔记（四）-改造Card组件
在Blazor 组件库 BootstrapBlazor 中Card组件介绍中我们说过,如果我们使用了Card组件的IsCollapsible属性设置了可伸缩的话,就只能使用Text属性来设置标题文本, ...
- [源码解析] TensorFlow 分布式之 MirroredStrategy
[源码解析] TensorFlow 分布式之 MirroredStrategy 目录 [源码解析] TensorFlow 分布式之 MirroredStrategy 1. 设计&思路 1.1 ...
- openstack PCI透传(GPU)
描述 kolla-ansible部署openstack的GPU透传方法 一.gpu物理服务器配置 在gpu服务器上主启用IOMMU 确认内核⽀支持iommu $ cat /proc/cmdline | ...
- 攻防世界-MISC:2017_Dating_in_Singapore
这是MISC高手进阶区的题目:题目如下: 点击下载附件一,得到一张pdf图片,除此之外就只有题目给的字符串了,不知道是什么意思(查看了一下WP)原来每一串通过"-"隔开的字符串代表 ...