在前端开发中，静态类型检查是一项非常重要的工具。Flow 是流行的静态类型检查工具之一，它可以在编译期间检查 JavaScript 代码中的类型错误。在使用 Flow 进行开发时，我们希望能够快速地查看添加类型后代码的表现，并且可以及时地了解类型检查的错误信息。而 flow-preview-service 正是为此而生的一个 npm 包，它可以将 TypeScript 转换为 JavaScript 并提供一个实时的类型检查工具，在我们开发时能够快速地查看代码的类型检查结果。
安装
使用 npm 进行安装：
npm install --save-dev flow-preview-service
安装完成后，我们可以在 package.json 文件中添加以下命令：
{
"scripts": {
"flow-preview": "flow-preview start"
}
}在终端中运行 npm run flow-preview 命令即可启动 flow-preview-service 服务。
使用
使用 flow-preview-service 服务很简单。我们可以在代码中添加 Flow 注释，并启动服务后在浏览器中查看类型检查信息。
例如，我们在代码中添加以下 Flow 注释：
// @flow
function square(n: number): number {
return n * n;
}
square('2');在终端中运行 npm run flow-preview 命令启动服务后，在浏览器中访问 http://localhost:7777/，即可看到以下结果：
可以看到，square 函数的参数类型为 number，而在代码中却传入了字符串类型，并且在浏览器中也能够即时看到这个类型错误信息。
配置
除了默认的配置外，我们还可以通过 flow-preview-service 的配置文件进行自定义配置。在项目根目录下创建 flow-preview.config.js 文件，即可覆盖默认配置。
例如，我们可以在 flow-preview.config.js 中添加以下配置，来添加额外的静态文件目录：
module.exports = {
publicDirectories: [
'./public'
]
}在这个例子中，我们向 flow-preview-service 服务添加了一个 public 目录，用于存放静态文件。
总结
flow-preview-service 是一个非常好用的 npm 包，它为我们提供了一个实时的类型检查工具，可以快速地查看代码的类型检查信息。其安装和使用都非常简单，只需几步操作即可完成配置，帮助我们优化开发效率，减少代码错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671681e8991b448e3695