TypeScript环境搭建的实现步骤

 更新时间:2022年01月14日 15:59:43   作者:草木红  
本文主要介绍了TypeScript环境搭建的实现步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前提是已经装好了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环境搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript DOM 学习总结(五)

    JavaScript DOM 学习总结(五)

    当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。文档对象模型定义访问和处理HTML文档的标准方法,本篇文章给大家介绍javascript dom 学习总结(五),感兴趣的朋友一起学习吧
    2015-11-11
  • 通过实例解析JavaScript for in及for of区别

    通过实例解析JavaScript for in及for of区别

    这篇文章主要介绍了通过实例解析JavaScript for in及for of区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JavaScript实现购物车案例

    JavaScript实现购物车案例

    这篇文章主要为大家详细介绍了JavaScript实现购物车案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Javascript 鼠标移动上去 滑块跟随效果代码分享

    Javascript 鼠标移动上去 滑块跟随效果代码分享

    这篇文章主要介绍了Javascript 鼠标移动上去 滑块跟随效果代码,有需要的朋友可以参考一下
    2013-11-11
  • js模拟hashtable的简单实例

    js模拟hashtable的简单实例

    本篇文章主要是对js模拟hashtable的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JS判断两个对象内容是否相等的方法示例

    JS判断两个对象内容是否相等的方法示例

    这篇文章主要介绍了JS判断两个对象内容是否相等的方法,结合具体实例形式分析了javascript针对字符串、数组及对象的相关判断技巧,需要的朋友可以参考下
    2017-04-04
  • 解析Javascript中大括号“{}”的多义性

    解析Javascript中大括号“{}”的多义性

    这篇文章主要介绍了Javascript中大括号“{}”的多义性。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 详解JS函数重载

    详解JS函数重载

    本文主要介绍了利用JavaScript中的特殊对象arguments来模拟函数重载的解决方案,非常的实用,给需要的小伙伴参考下
    2014-12-12
  • JavaScript中var的重要性实例分析

    JavaScript中var的重要性实例分析

    这篇文章主要介绍了JavaScript中var的重要性,结合实例形式分析了javascript变量定义、作用范围、作用域及相关操作注意事项,需要的朋友可以参考下
    2019-07-07
  • js DOM的学习笔记

    js DOM的学习笔记

    DOM是Document Object Model文档对象模型的缩写;使用JavaScript操作DOM进行DHTML开发
    2011-12-12

最新评论