当前位置: 萬仟网 > IT编程>开发语言>.net > TypeScript环境搭建的实现步骤

TypeScript环境搭建的实现步骤

2022年01月14日 .net 我要评论
目录1. 安装ts环境2. 安装 ts-node3. 安装nodemon4. parcel打包支持浏览器运行ts文件前提是已经装好了node.js,1. 安装ts环境进入到要项目文件夹中,使用 npm

前提是已经装好了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)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • Java实现猜数字小游戏代码

    Java实现猜数字小游戏代码

    目录▲游戏规则:▲实现思路:实验结果:总结▲游戏规则:系统随机生成一个范围0——100的数,用户输入数字,判断该数字是大于,小于,还是等... [阅读全文]
  • redis的list数据类型相关命令介绍及使用

    目录list列表简介常用命令添加命令查询命令弹出/删除命令修改命令阻塞弹出命令应用场景list列表简介list是简单的字符串列表(说通俗点,存储的还是字符串),按照插入顺序排序。你…

    2022年01月14日 数据库
  • 基于Python+Tkinter实现一个简易计算器

    基于Python+Tkinter实现一个简易计算器

    目录设计原理示例效果主要代码设计原理从结构上来说,一个简单的图形界面,需要由界面组件、组件的事件监听器(响应各类事件的逻辑)和具体的事件处理逻辑组成。界面实现的... [阅读全文]
  • TypeScript环境搭建的实现步骤

    TypeScript环境搭建的实现步骤

    目录1. 安装ts环境2. 安装 ts-node3. 安装nodemon4. parcel打包支持浏览器运行ts文件前提是已经装好了node.js,1. 安装t... [阅读全文]
  • SpringBoot集成yitter-idgenerator(雪花漂移)分布式Id自增的实现

    SpringBoot集成yitter-idgenerator(雪花漂移)分布式Id自增的实现

    目录场景实现方案基于第一种实现方案关键部分代码场景yitter-idgenerator 是基于雪花算法进行改造的分布式id自增算法,集成时需要为每个服务设置唯一... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com