Rails 预编译目录中的资产 - TypeScript

在 Rails 应用程序中，要运行的所有 JavaScript 资源文件都应该位于 app/assets/javascripts 目录下。这些 JavaScript 资源文件在应用程序的生命周期内都会被预处理，并且将被生成成一个单独的 JavaScript 文件，以便在 App 中使用。但是，如果你使用的是 TypeScript，它会生成一个单独的 .js 文件和一个 .d.ts 字段，那么这些文件将如何与 Rails 预编译资产目录一同工作呢？

关于 TypeScript

TypeScript 是一个兼容 ECMAScript 6 标准的 JavaScript 超集，它包含如类型注释、类定义和接口等面向对象的概念，以及名称空间和模块等组织代码的概念。使用 TypeScript 可以解决一些常见的 JavaScript 问题，比如变量定义不明确、函数调用参数不匹配等问题。另外，TypeScript 还提供了更好的代码编辑性，包括代码补全、定义跟踪等功能。

Rails 预编译目录中的资产

在 Rails 应用程序中，预编译后的 JavaScript 文件位于 public/assets 目录下，这些文件按照指定的命名约定生成。比如，一个名为 application.js 的文件包含了所有在 app/assets/javascripts 目录下的 JavaScript 文件，而一个名为 application.js.erb 的文件包含了所有在 app/assets/javascripts 目录下的 ERB 模板。

TypeScript 文件在 Rails 中的处理

因为每个 TypeScript 文件都生成了一个相应的 .js 文件和一个 .d.ts 文件，所以当需要处理 TypeScript 文件时，需要遵循一些特定的步骤。

首先，在 config/application.rb 文件中，添加如下配置：

config.assets.precompile += %w(*.js *.jsx *.ts *.tsx)

这行代码告诉 Rails 预编译资产目录要同时处理 .js、.jsx、.ts 和 .tsx 文件。

接下来，在 app/assets/javascripts 目录下创建一个新的文件夹 typescript，所有的 TypeScript 文件都应该放在这个文件夹中。这将确保 Rails 不会自动处理 TypeScript 文件，而是将它们传递给 TypeScript 编译器处理。注意，该文件夹名可以是任意名称，只需自行修改代码即可。

然后，在 app/assets/javascripts/application.js 文件中，添加以下代码：

//= require_tree ./typescript

这将包含在 app/assets/javascripts/typescript 目录下的所有 TypeScript 文件。

最后，在 tsconfig.json 文件中，将 outDir 属性设置为 public/assets/typescript：

{
  "compilerOptions": {
    "outDir": "public/assets/typescript",
    "baseUrl": ".",
    "paths": {
      "*": ["typings/*"]
    }
  },
  "include": [
    "app/assets/javascripts/typescript/**/*"
  ]
}

这将告诉 TypeScript 编译器将生成的 JavaScript 文件放在 Rails 的预编译目录中。

总结

在 Rails 应用程序中处理 TypeScript 文件需要遵循一些特定的步骤，但是这些步骤都是相当简单的。从 config/application.rb 到 app/assets/javascripts/application.js ，再到 tsconfig.json。按照上面的步骤完成后，就可以让 TypeScript 文件与 Rails 预编译目录中的资产一同工作了。