TypeScript环境搭建的实现步骤

目录
  • 1. 安装TS环境
  • 2. 安装 ts-node
  • 3. 安装nodemon
  • 4. Parcel打包支持浏览器运行TS文件

前提是已经装好了node.js,node.js安装图文教程

1. 安装TS环境

进入到要项目文件夹中,使用 npm init --yes 初始化(该命令在项目文件夹中生成 package.json)

安装 typescript (安装不成功,可能是权限不够)

全局安装:cnpm i typescript -g 【建议】

本地安装:cnpm i typescript -D

【cnpm i typescript -D 是 cnpm install typescript --save-dev的缩写】

在项目文件夹中生成tsconfig.json文件

 tsc --init  

修改刚刚生成的 tsconfig.json 文件中的配置
注意: 如果进行如下配置, dist 、src、package.json 三者须在同一个父目录下

"outDir":  "./dist"     //ts编译后生成js文件保存到dist文件夹中
"rootDir": "./src",  //自己编写的ts源文件在src文件夹中
"target": "es5", //编译出来的js文件兼容es5语法

在src目录下新建一个base.ts文件

//创建一个字符串类型的变量str
let str: string = 'hello word';
console.log( str);

编译src目录以及子目录下的ts文件
在src目录下:输入tsc ( 注意直接写tsc命令即可),会把src目录以及子目录下的ts文件全部编译成js文件,并全部输出到dist目录中

tsc

自动编译

tsc --watch

2. 安装 ts-node

ts-node让node能直接运行ts代码,无需使用tsc将ts代码编译成js代码。

全局安装:cnpm i ts-node -g 【建议】

本地安装: cnpm i ts-node -D

安装好 ts-node 之后,在ts文件所在的文件夹中使用ts-node,将直接在终端中运行ts文件

ts-node base.ts

3. 安装nodemon

nodemon作用:自动检测到目录中的文件更改时通过重新启动应用程序来调试,基于node.js的应用程序

全局安装:cnpm install -g nodemon 【建议】

本地安装:cnpm i nodemon -D

在package.json中配置自动检测,自动重启应用程序

 "scripts": {  //如果已经存在直接将下边的粘进去即可
     "start": "nodemon --watch src/ -e ts --exec ts-node ./src/base.ts"
}
  • nodemon --watch src/ 表示:检测目录是package.json同级目录src
  • -e ts 表示:nodemon 命令准备将要监听的是ts后缀的文件
  • --exec ts-node ./src/base.ts 表示:检测到src目录下有任何变化 都要重新执行base.ts文件

开始监听src目录
start 是第2步配置时的命名,相对应即可

npm start

4. Parcel打包支持浏览器运行TS文件

安装Parcel打包工具:npm install -g parcel-bundler

在package.json 所在的文件夹中新建一个 index.html 文件
在html文件中引入你想要在浏览器中看到效果的ts文件

<!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>
    <!-- 引入的是ts文件 -->
    <script src="./src/base.ts"></script>
</head>
<body>
    
</body>
</html>

在package.json中给npm添加启动项,支持启动parcel工具包

"scripts": {
  "startParcel": "parcel ./index.html"  //注意:如果配置中已经有start,可以命名为别的
},

在启动parcel工具包

 npm  run startParcel

如果上边的报错则用

 cnpm  run startParcel

到此这篇关于TypeScript环境搭建的实现步骤的文章就介绍到这了,更多相关TypeScript环境搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-01-12

TypeScript环境搭建并且部署到VSCode的详细步骤

目录 TypeScript环境搭建 第一步:下载淘宝镜像 第二步:下载TypeScript 部署到VSCode 先创建一个文件夹tsDemo, 修改tsconfig.json配置 可能会遇到的报错 前言:要想搭建TypeScript,那么就要有npm,要想有cnpm,那么就得有node环境.要是都有了的话,那么接下来,往下看. TypeScript环境搭建 第一步:下载淘宝镜像 先检查自己有没有成功安装npm 有npm还不行,还要下载cnpm,命令如下(直接复制粘贴): npm install

Vue.js项目部署到服务器的详细步骤

前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤

本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvue ui框架:mpvue-weui request请求:fly.js 1.项目初始化 注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了 接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可) npm默认从外网下载包,可能会比较慢,可以换

使用xampp搭建运行php虚拟主机的详细步骤

最近,新装了xampp这么一个软件搭建自己的web开发环境,安装完毕自然要虚拟几个目录放自己的项目了,现将如何在xampp搭建的web服务器环境下新建虚拟主机的过程总结分享一下,大致过程分为三步,如下: 第一步: 用记事本打开C:/WINDOWS/system32/drivers/etc/hosts文件(win7 hosts文件位置:%systemroot%\system32\drivers\etc), 在127.0.0.1       localhost下面我添加了一个127.0.0.1   

在Idea中使用Docker部署SpringBoot项目的详细步骤

前言 项目需要: 安装Dockeridea中安装docker插件,并配置docker一个SpringBoot项目创建Dockerfile 一.下载.安装.配置Docker下载Docker 下载地址:官网下载 Docker 安装 一直下一步就行 配置路径:Settings–General 勾选 Expose daemon on tcp://localhost:2375 without TLS 设置镜像,提高下载镜像的速度https://xaiqlt1z.mirror.aliyuncs.com 测试

VSCode + WSL 2 + Ruby环境搭建图文详解

vscode配置ruby开发环境 vscode近年来发展迅速,几乎在3年之间就抢占了原来vim.sublime text的很多份额,犹记得在2015-2016年的时候,ruby推荐的开发环境基本上都是vim和sublime text,然而,随着vscode的发展,vscode下ruby的开发体验已经非常不错.现在基本上使用win 10 wsl2 + vscode + windows terminal的体验已经不逊于mac + vim (sublime) + item 2的体验了 总体步骤 使用w

仅5步搞定Android开发环境部署 Android开发环境搭建教程

在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的搭建,文章写的尽量详细,希望对准备进入Android开发的朋友有帮助. 本教程将分为五个步骤来完成Android开发环境的部署. 第一步:安装JDK. 第二步:配置Windows上JDK的变量环境 . 第三步: 下载安装Eclipse . 第四步:下载安装Android SDK . 第五步:为Eclips

win10下VSCode+CMake+Clang+GCC环境搭建教程图解

打算用C/C++把基本的数据结构与算法实现一遍, 为考研做准备, 因为只是想实现算法和数据结构, 就不太想用VisualStudio, 感觉VSCode不错, 遂在网上找了一些教程, 结合自己的需求, 配置一下开发环境. 安装软件 CMake CMake是一个跨平台的自动化建构系统,它使用一个名为 CMakeLists.txt 的文件来描述构建过程; 官网下载安装, 傻瓜式操作; 记得把安装目录下的bin文件添加到系统环境变量, 这个可以在安装的时候勾选, 勾选了就不用自己添加了; 检测是否安装

详解VScode编辑器vue环境搭建所遇问题解决方案

前言 为什么选择VScode? 在之前我用过sublime.webstorm.atom.Brackets.eclipse.HBuilder.notepad++等等.应该还有一些用过几次的编辑器,记不起来的,这些编辑器的作用不外乎一点--为了开发迅速.基本都会自带代码提示插件.随着项目越来越大,出了一系列问题,而这些问题会大量浪费我们的时间(我们只想简单的编程),故而编辑器插件的数量和支持程度成为了我们选择编辑器的重要条件,这就是为什么选择VScode,它拥有大量的插件,可以帮助我们完成我们没必要

Anaconda+vscode+pytorch环境搭建过程详解

1.安装Anaconda Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.在官网上下载https://www.anaconda.com/distribution/,因为服务器在国外会很慢,建议从清华镜像https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/下载. 2.安装VScode 需要在Anaconda再装VScode,因为Anaconda公司和微软公司的合作,不用在对进

Docker+K8S 集群环境搭建及分布式应用部署

1.安装docker yum install docker #启动服务 systemctl start docker.service systemctl enable docker.service #测试 docker version 2.安装etcd yum install etcd -y #启动etcd systemctl start etcd systemctl enable etcd #输入如下命令查看 etcd 健康状况 etcdctl -C http://localhost:2379