Using TypeScript in React Native Projects

TypeScript brings useful advantages to React Native apps. Not only does it help you write safer code—it also coexists seamlessly with vanilla JavaScript. You can use as much or as little TypeScript as you like.

To demonstrate TypeScript usage, Mobile SDK provides a new template app. You can view or download the new template at the ReactNativeTypeScriptTemplate directory of the SalesforceMobileSDK-Templates GitHub repo.

Source code for TypeScript apps can reside in *.ts, *.tsx, or *.js files. For example, in the new template app, app.js becomes app.tsx. A comparison between the old and new files demonstrates how unobtrusive TypeScript is.

• Imports are the same.
• Code changes for new types are minimal.

In app.tsx, the template adds the following custom types to the original JavaScript code:

The Record type is used internally in the Response interface. The new template applies the other three types to parameters of the original script. For example, Props and State apply to the constructor:

The Response type secures the response received from the SOQL query:

If Salesforce passes data to response that conflicts with definitions in the Response type, you get a compile-time error. However, the Response interface doesn’t disallow or inspect objects it doesn’t define. Thus, although Response specifies only two fields—Id and Name—accessing response.records passes muster as plain JavaScript.