【译】Typescript, React Native and Sourcemaps

原文：http://www.reactnative.tools/...
翻译水平有限，欢迎交流，不喜勿喷，仅为了自己好理解一点。

项目结构

Project Layout

对于TypeScript，我们推荐把所有的.tsx文件都放在一个专门的目录下，以便与在.gitignore设置需要忽略的输出目录，避免提交编译的代码。components, containers, actions等不同的文件，可以根据你已经在使用习惯进行组织。tsconfig.json将会根据rootDir指向这个源文件目录。

For TypeScript, our recommendation is to place all the .tsx files under a dedicated sources folder so that you easily .gitignore the output folder and avoid committing compiled code. Different files for components, containers, actions, etc. could follow any conventions you already use. The tsconfig.json file will point to this source folder as the rootDir.

tsc编译器会把转换好的.js文件和sourcemap放到一个output或bin目录下。不要忘记把输出目录添加到.gitignore中。tsconfig.json文件中也应该进行相关的配置，来生成sourcemap、兼容jsx，还有包含和不包含哪些文件。

The tsc compiler can then place the converted .js files and sourcemaps in an output or bin folder. Remember to add the output folder to .gitignore. The tsconfig.json file should also be configured to emit sourcemaps, understand JSX and include/exclude the appropriate files.

对于不同的平台，React Native应用以index.android.js和index.ios.js作为入口启动。然而这可以通过编辑平台目录来指向任何文件（这段我就不知道该怎么说合适。。。），我们推荐的模式是尽可能保持这些文件的的精简并把顶级组件放到源文件目录下的，比如说src/App.jsx。或者，入口文件可以映射对应的index.android.tsx和index.ios.tsx（包含针对不同平台的顶级组件），和例子仓库中的一样。

A React Native application starts at the entry points in the index.android.js and index.ios.js for the respective platforms. While it is possible to change this to point to any file by editing the platforms folder, we recommend the pattern of keeping these file as lean as possible and moving the top level component into the sources folder, say src/App.jsx.Alternatively, the entry files can also be mirrored with corresponding index.android.tsx and index.ios.tsx that would contain the top level components for the respective platforms, as in the example repository.

组件的类型定义

Type definitions for components

React Native项目中类型定义的获取和配置，和在其他TypeScript项目中的流程是没有区别的。或许typings工具是获取JavaScript编写的第三方组件类型定义的最普遍的方法。如果使用了typings工具，确保创建了typings.json文件，并且已将像react和react-native这样的类库添加到了全局依赖。对于那些没有类型定义的组件，可以把.d.ts和源码放在一起。如果使用了TypeScript 2.0,类型是使用npm通过@types组织，typings将会在node_modules中。

Fetching type definitions and configuring them in a React Native project is no different from the workflow in other TypeScript projects. The typings tool is probably the most common way to fetch type definations for third party components that are written in JavaScript. If the typings tool is used, ensure that a typings.json is created and libraries like react and react-native are added as global dependencies. For components that may not have a type defination, the .d.ts files could be placed alongside the sources. If TypeScript 2.0 is used and the types are fetched using npm from the @types organization, the typings will be in node_modules.

启用Sourcemap

Enabling Sourcemaps

TypeScript使用中最普遍的问题，就是调试React Native应用时缺少sourcemap。现在大部分工作流中，断点被放在通过tsc编译器生成的文件中。为了缓解这个问题，我们可以使用react-native-sm-transformer模块。当使用react-native start启动一个React Native Packager时，可以通过使用-- transformer标记重写默认的Babel transformer。默认的transformer得到一个以下类似的信号

The most common problem with using TypeScript is the lack of sourcemaps when debugging the React Native application. Most workflows today place breakpoints in files that are generated by the tsc compiler. To mitigate this problem, we can use the react-native-sm-transformer module. When starting a React Native packager using react-native start, the default Babel transformer can be overridden using the --transformer flag. The default transformer has a signature that looks like the following

function transform(src: string, filename: string, options: any): {
      ast: any,
      code: string,
      map: string,
      filename: string,
    };

react-native-sm-transformer仅仅添加了一个transformer，将生成的JavaScript文件中附带的任何中间sourcemap添加到最终的bundle中。

The react-native-sm-transformer simply adds another transformer that appends any intermediate sourcemaps alongside the generated JavaScript files to the final bundle.

因此，使用react-native start --transformer node_modules/react-native-sm-transformer将会为TypeScript启用sourcemaps。额外的--skipflow选项可以通过TypeScript的类型检查。

Thus, using react-native start --transformer node_modules/react-native-sm-transformer would enable sourcemaps for TypeScript. An additional --skipflow option may be passed since TypeScript is already helping with type checking.

把tsc添加到transformer管道

Adding TSC to transformer pipeline

理想情况下，tsc应该被添加到转换管道中。然而，React Native的文件监听器仅仅只选择['js', 'json']文件。即使如果tsc被当做一个转换器添加，ts文件最后也不会因此被选择。这也导致源文件被转换了2次（一次由tsc从src/*.ts转换到out/*js，再从由Babel从out/*.js转到*.js）。

In an ideal scenario, tsc should be added to the transformation pipeline. However, React Native’s file watcher only picks up ['js', 'json'] files. Even if tsc is added as a transformer, the .ts files will not be picked up as a result. This also results in the source files to be transformed twice - once from src/*.ts to out/*.js by tsc and again from out/*.js to *.js by Babel.

React Native仓库中有一个启用自定义被选中的文件表达式的问题,。我们计划提交一个pull request来解决这个问题。一旦这个问题被解决，我们可以为React Native创建一个自定义的TypeScript转换器，并更新本文来显示变化

The React Native repository has an issue that enables customizing the files patterns that are picked up. We plan to submit a pull request to resolve this issue. Once the issue is fixed, we could create a custom, TypeScript transformer for React Native and update this post to reflect the changes.

下一步

Next steps

你通过克隆这个github上简单的工程来尝试下TypeScript。或者只着眼于tsconfig.json和package.json，在你自己的工程中进行实践。如果你已经在使用VSCode来获取极好的TypeScript支持，React Native extension for VSCode可以增加编辑器调试中的支持。

You can try out Typescript by cloning the sample project on github on github, or just looking at the tsconfig.json and package.json and implementing them into your own project. If you are already using VSCode to take advantage of the excellent TypeScript support, the React Native extension for VSCode could add in support for in-editor debugging.