查阅官方文档，更换执行命令
我又看了一圈官方文档，说是让用node --loader ts-node/esm来执行
image-20210814152034219
于是，我就换了这个命令，结果又换了新错误。
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的配置才行😂。
image-20210814154002027
image-20210814153733411
要改的地方有2处，如下所示：
{ "compilerOptions": { "module": "CommonJS", "types": [ "node" ] } }
做完上述配置后，我们把刚才在package.json修改的项目类型删掉，以及在导入时添加的js后缀也一起删掉。
最后在终端执行ts-node handle-themes-file/main.ts，成功执行。
image-20210814154507894
添加运行变量
每次都要进入终端，敲一边命令才能执行ts文件，这太麻烦了，我希望的是可以在编辑器中点一下就能运行当前可视区域的ts文件。
在WebStorm中是支持这个操作的，只需简单的配置即可，步骤如下：
- 在package.json中配置一条脚本运行命令
{ "ts-node": "ts-node" }
- 打开
Run/Debug Configurations面板
image-20210814155153643
在弹出的面板中，添加一条执行命令。
image-20210814155236491
image-20210814155306162
填写命令名称、执行脚本、环境变量，最后点OK即可完成配置。
image-20210814155508125
配置完成后，我们就可以通过点击工具栏的 运行图标 来运行了。
image-20210814155714093
如果你没玩过webstorm，可以移步我的另一篇文章：合理使用WebStorm-环境配置篇，亲自上手体验一波。
项目地址
本文创建的项目，GitHub地址为：ts-node-utils
项目中还加入了其他的一些规范代码的东西，如果你对此感兴趣，请移步：
- 独立使用ESLint+Prettier对代码进行格式校验
- 使用commitizen实现按团队规范提交代码
写在最后
至此，文章就分享完毕了。
我是神奇的程序员，一位前端开发工程师。
如果你对我感兴趣，请移步我的个人网站，进一步了解。
- 公众号无法外链，如果文中有链接，可点击下方阅读原文查看😊
