搭建一套支持TS的Node运行环境(下)

简介: 搭建一套支持TS的Node运行环境(下)

查阅官方文档,更换执行命令

我又看了一圈官方文档,说是让用node --loader ts-node/esm来执行


640.png

                           image-20210814152034219


于是,我就换了这个命令,结果又换了新错误。


640.png

                               image-20210814152131588


(node:65419) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/src/index.ts:693
    return new TSError(diagnosticText, diagnosticCodes);
           ^
TSError: ⨯ Unable to compile TypeScript:
handle-themes-file/lib/HandleThemes.ts:1:25 - error TS2307: Cannot find module 'fs' or its corresponding type declarations.
1 import { readdir } from "fs";
                          ~~~~
handle-themes-file/lib/HandleThemes.ts:5:20 - error TS7006: Parameter 'errStatus' implicitly has an 'any' type.
5     readdir(path, (errStatus, fileList) => {
                     ~~~~~~~~~
handle-themes-file/lib/HandleThemes.ts:5:31 - error TS7006: Parameter 'fileList' implicitly has an 'any' type.
5     readdir(path, (errStatus, fileList) => {
                                ~~~~~~~~
    at createTSError (/Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/src/index.ts:693:12)
    at reportTSError (/Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/src/index.ts:697:19)
    at getOutput (/Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/src/index.ts:884:36)
    at Object.compile (/Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/src/index.ts:1186:30)
    at /Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/src/esm.ts:146:38
    at Generator.next (<anonymous>)
    at /Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/dist/esm.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/dist/esm.js:4:12)
    at transformSource (/Users/likai/Documents/WebProject/ts-node-utils/node_modules/ts-node/dist/esm.js:88:16) {
  diagnosticText: "\x1B[96mhandle-themes-file/lib/HandleThemes.ts\x1B[0m:\x1B[93m1\x1B[0m:\x1B[93m25\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2307: \x1B[0mCannot find module 'fs' or its corresponding type declarations.\n" +
    '\n' +
    '\x1B[7m1\x1B[0m import { readdir } from "fs";\n' +
    '\x1B[7m \x1B[0m \x1B[91m                        ~~~~\x1B[0m\n' +
    "\x1B[96mhandle-themes-file/lib/HandleThemes.ts\x1B[0m:\x1B[93m5\x1B[0m:\x1B[93m20\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS7006: \x1B[0mParameter 'errStatus' implicitly has an 'any' type.\n" +
    '\n' +
    '\x1B[7m5\x1B[0m     readdir(path, (errStatus, fileList) => {\n' +
    '\x1B[7m \x1B[0m \x1B[91m                   ~~~~~~~~~\x1B[0m\n' +
    "\x1B[96mhandle-themes-file/lib/HandleThemes.ts\x1B[0m:\x1B[93m5\x1B[0m:\x1B[93m31\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS7006: \x1B[0mParameter 'fileList' implicitly has an 'any' type.\n" +
    '\n' +
    '\x1B[7m5\x1B[0m     readdir(path, (errStatus, fileList) => {\n' +
    '\x1B[7m \x1B[0m \x1B[91m                              ~~~~~~~~\x1B[0m\n',
  diagnosticCodes: [ 2307, 7006, 7006 ]
}


正确的解决方案


折腾到这里,我已经用尽自己所能去找解决方案了,仍然没解决,只好去寻求网友的帮助,最后在@皮的很的帮助下,解决了这个问题。


在他的帮助下,我才知道,原来要改tsconfig.json的配置才行😂。


640.png

                                  image-20210814154002027

640.png

                          image-20210814153733411


要改的地方有2处,如下所示:


{
  "compilerOptions": {
      "module": "CommonJS",
      "types": [
       "node"
     ]
  }
}


做完上述配置后,我们把刚才在package.json修改的项目类型删掉,以及在导入时添加的js后缀也一起删掉。


最后在终端执行ts-node handle-themes-file/main.ts,成功执行。


640.png

                                    image-20210814154507894


添加运行变量


每次都要进入终端,敲一边命令才能执行ts文件,这太麻烦了,我希望的是可以在编辑器中点一下就能运行当前可视区域的ts文件。


在WebStorm中是支持这个操作的,只需简单的配置即可,步骤如下:


  • 在package.json中配置一条脚本运行命令
{
   "ts-node": "ts-node"
}


  • 打开Run/Debug Configurations面板


640.png

                                  image-20210814155153643

在弹出的面板中,添加一条执行命令。

640.png

                                 image-20210814155236491

640.png

                                    image-20210814155306162


填写命令名称、执行脚本、环境变量,最后点OK即可完成配置。


640.png

                                image-20210814155508125


配置完成后,我们就可以通过点击工具栏的 运行图标 来运行了。


640.png

                           image-20210814155714093  


如果你没玩过webstorm,可以移步我的另一篇文章:合理使用WebStorm-环境配置篇,亲自上手体验一波。


项目地址


本文创建的项目,GitHub地址为:ts-node-utils


项目中还加入了其他的一些规范代码的东西,如果你对此感兴趣,请移步:


  • 独立使用ESLint+Prettier对代码进行格式校验
  • 使用commitizen实现按团队规范提交代码


写在最后


至此,文章就分享完毕了。


我是神奇的程序员,一位前端开发工程师。


如果你对我感兴趣,请移步我的个人网站,进一步了解。


  • 公众号无法外链,如果文中有链接,可点击下方阅读原文查看😊
相关文章
|
8月前
|
Web App开发 JavaScript 前端开发
跨平台的JavaScript运行环境:Node.js
Node.js是一个跨平台的JavaScript运行环境,使开发者可以搭建服务器端的JavaScript应用程序 作用:使用Node.js编写服务器端程序
92 3
|
8月前
|
JavaScript
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
|
10月前
|
JavaScript 前端开发 数据挖掘
node + ts 读取csv文件为二维数组
node + ts 读取csv文件为二维数组
135 0
|
资源调度 JavaScript API
搭建一套支持TS的Node运行环境(上)
搭建一套支持TS的Node运行环境(上)
搭建一套支持TS的Node运行环境(上)
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
怎么用node执行ts文件
怎么用node执行ts文件
1374 0
|
20天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
|
3天前
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
18 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
|
22天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
|
2月前
|
JavaScript
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
237 26

热门文章

最新文章