Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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:

1interface Response {
2    records: Record[]
3}
4            
5interface Record {
6    Id: String,
7    Name: String
8}
9            
10interface Props {
11}
12            
13interface State {
14    data : Record[] 
15}

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:

1class ContactListScreen extends React.Component<Props, State> {
2    constructor(props:Props) {
3        super(props);
4        this.state = {data: []};
5    }

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

1(response:Response) => that.setState({data: response.records}),
2    (error) => console.log('Failed to query:' + error)

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.

Mobile SDK Development Guide

Using TypeScript in React Native Projects