一、前言

小编最近开始学习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文件的更多相关文章

  1. 在Windows/Ubuntu下安装OpenGL环境（GLUT/freeglut)与跨平台编译（mingw/g++）

    GLUT/freeglut 是什么? OpenGL 和它们有什么关系? OpenGL只是一个标准,它的实现一般自带在操作系统里,只要确保显卡驱动足够新就可以使用.如果需要在程序里直接使用OpenGL, ...

  2. wamp 在本地安装PHP环境， 开启 curl 扩展

    分别打开以下 2 个文件: wamp\bin\php\(your php version)\php.ini wamp\bin\Apache\(your apache version)\bin\php. ...

  3. Win10环境下配置VScode的C++编译环境

    写前感想:前前后后,折腾好几次,最后还是在学长安利下,开始入坑vscode了.原因一个是小巧,还有就是vs新建工程码题的方式太消耗内存了,基本每个项目就是以MB为单位计算的,然后希望用这篇文章记录自己 ...

  4. vscode隐藏运行ts生成的js文件和map文件

    在code-首选项-用户设置中放入以下代码,覆盖原有的 { "files.exclude": { "node_modules": true, "**/ ...

  5. 安装typescript开发环境

    参考文档: http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html 有两个方式 : 1.安装vs 2017,安 ...

  6. 【原】无脑操作：TypeScript环境搭建

    概述:本文描述TypeScript环境搭建,以及基于VSCode的自动编译设置和调试设置.网络上很多相应文章的方式过时了或者无法试验成功. ------------------------------ ...

  7. 带你一步一步搭建TypeScript环境

    今天继续来更新,本篇文章我们讲环境搭建,主要分享一些环境搭建的学习资源及安装步骤,解决一些安装时可能会出现的问题.下面就让我们一起进入学习第一步,搭建TypeScript环境:一. 环境搭建1.1. ...

  8. electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  9. TypeScript环境搭建

    环境搭建 本篇将简单介绍一下TypeScript,并记录开发环境的搭建.使用Visual Studio Code进行一个简单的Demo开发过程. 第一部分.简介 TypeScript是一种由微软开发的 ...

随机推荐

  1. 『现学现忘』Git基础 — 2、Git和SVN的区别

    1.Git和SVN的区别 (1)SVN(集中式版本管理系统) 集中式的版本控制系统都有一个单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人们都通过客户端连到这台服务器,取出最新的文件或者 ...

  2. OA办公软件篇（二）—权限管理

    权限管理的背景 权限管理的作用 迭代历程 关键名词释义 权限管理模型 具体实现 写在最后   权限管理的背景 在OA办公软件篇(一)-组织架构一文中,我们说到组织架构是软件系统的权限体系的重要搭建依据 ...

  3. for in 语法遍历对象

    1. 语法格式 for (变量 in 对象) { console.log(变量) }   2. 代码实例 // 遍历对象 var obj = { name: 'pink老师', age: 18, se ...

  4. Docker部署PostgreSQL主从

    #准备 PostgreSQL12.3版本容器两台,部署参考https://www.cnblogs.com/zspwf/p/16113298.html 主库: 192.168.3.14:2200 从库: ...

  5. [AcWing 774] 最长单词

    点击查看代码 #include<iostream> using namespace std; string str, res; int main() { while (cin >&g ...

  6. 测试必会 Docker 实战（一）：掌握高频命令，夯实内功基础

    在 Dokcer 横空出世之前,应用打包一直是大部分研发团队的痛点.在工作中,面对多种服务,多个服务器,以及多种环境,如果还继续用传统的方式打包部署,会浪费大量时间精力. 在 Docker 出现后,它 ...

  7. Windows IDEA Community 报错

    运行时报错 "CreateProcess error=206,文件名或扩展名太长" 解决方法:https://plugins.gradle.org/plugin/ua.eshepe ...

  8. JavaScript 任务池

    JavaScript 任务池 本文写于 2022 年 5 月 13 日 线程池 在多线程语言中,我们通常不会随意的在需要启动线程的时候去启动,而是会选择创建一个线程池. 所谓线程池,本意其实就是(不止 ...

  9. Sharding JDBC案例实战

    基础分库 以下实例基于shardingsphere 4.1.0 + SpringBoot 2.2.5.RELEASE版本 依赖导入: <properties> <project.bu ...

  10. 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...