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环境搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

  • 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

  • React+Ant Design开发环境搭建的实现步骤

    React+Ant Design开发环境搭建的实现步骤

    基础知识 1.使用脚手架创建项目并启动 1.1 安装脚手架: npm install -g create-react-app 1.2 使用脚手架创建项目: create-react-app antd-start-demo antd-start-demo为项目名. 1.3 启动 npm start 2.npm转换为yarn 2.1 安装yarn: npm install -g yarn ​ 2.2 获取yarn当前的镜像源: yarn config get registry ​ 2.3 设置为淘宝

  • Angular2环境搭建具体操作步骤(推荐)

    01.安装Node.js 和 npm 安装完成后,在命令行依次使用node -v 和 npm -v可以看到版本号. 目前安装的node.js版本为8.2.1  ,npm的版本为5.3.0 02.安装cnpm npm需要连接谷歌服务器,国内不能正常使用,因此使用淘宝的镜像安装cnpm.命令行输入npm i -g cnpm --registry=https://registry.npm.taobao.org 03.安装Angular CLI 命令行输入cnpm i -g @angular/cli.

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • PyTorch在Windows环境搭建的方法步骤

    一.安装Anaconda 3.5 Anaconda是一个用于科学计算的Python发行版,支持Linux.Mac和Window系统,提供了包管理与环境管理的功能,可以很方便地解决Python并存.切换,以及各种第三方包安装的问题. 二.下载和安装 个人建议推荐在清华的镜像来下载.选择合适你的版本下载,我使用的是Anaoonda3-5.1.0-Windows-x86_64.exe 可能安装速度有点慢,不太清楚是我电脑系统盘快慢的原因还是什么. 环境变量配置 将D:\ProgramData\Anac

  • Spring5.2.x 源码本地环境搭建的方法步骤

    1 克隆Spring源码 github 下载可能较慢,可以先 fork 官方仓库到自己的账户下,再从 gitee 导入. 使用 sourceTree 拉取代码到本地. 切换到5.2.x版本 git checkout origin/5.2.x 添加阿里云镜像 将下面这行代码粘贴到build.gradle文件中的repositories节点下即可 , maven { url "http://maven.aliyun.com/nexus/content/groups/public" } 预先

  • 基于Docker部署GitLab环境搭建的方法步骤

    注意:建议虚拟机内存2G以上,一定要配置阿里云的加速镜像 1.下载镜像文件 docker pull beginor/gitlab-ce:11.0.1-ce.0 2.创建GitLab 的配置 (etc) . 日志 (log) .数据 (data) 放到容器之外, 便于日后升级 mkdir -p /mnt/gitlab/etc mkdir -p /mnt/gitlab/log mkdir -p /mnt/gitlab/data 3.运行GitLab容器 进入/mnt/gitlab/etc目录,运行一

  • selenium3.0+python之环境搭建的方法步骤

    selenium3.0+python之环境搭建的方法步骤

    本文目标: 使用selenium3.0+python3操纵浏览器,打开百度网站.(相当于selenium的hello world) 环境基础:python3已安装,pycharm编辑器已安装. 第一步:安装selenium 打开cmd窗口,输入pip install selenium,然后回车. 第二步:安装WebDriver 1)下载WebDriver 由于selenium是通过调用浏览器的给的接口来操纵浏览器,所以WebDriver不统一,需要根据自己的浏览器登录相应的地址,下载最新的Web

  • MacBook M1 Flutter环境搭建的实现步骤

    MacBook M1 Flutter环境搭建的实现步骤

    目录 一.基础环境搭建 git: Flutter SDK: CocoaPods: 二.安装IDE IDEA: Xcode: AndroidStudio: 三.跑一个app试试 最近入手了Apple M1,MacBook Air,由于之前未使用苹果系列产品,并且Flutter官方和各项配套的软件环境也还没有成熟,导致搭建环境时碰到了不少坑,这里总结记录一波,来看文档的同学,有不懂的地方直接发评论或者消息就好 一.基础环境搭建 git: 我是装完homebrew,git就装好了,homebrew的安

随机推荐