How can I build TypeScript using the react-native-typescript-transformer?

Ever since Expo SDK 31, TypeScript support has been seamlessly integrated. This is a fantastic development.

However, it appears that babel-typescript is being used. In my project on Expo SDK 33, I require the use of 

react-native-typescript-transformer
. Is there a way to make this switch? How can I go about configuring this change?

PS: The necessity for utilizing 

react-native-typescript-transformer
arises from my need for support with TypeScript namespaces and enums. I employ swagger-codegen to generate my REST client layer. However, all available generators utilize namespaces (and also enums not supported by Babel 7 from what I gather).

typescriptreact-nativeexposwagger-codegen

Answer №1

It's a breakthrough moment!

During the process of building and running your React Native project, an essential component called Metro packager kicks into action. The packager undertakes several tasks such as consolidating all your Javascript code into a single file and converting any JavaScript code that may not be compatible with your device - like JSX and TypeScript (shout out to mahdi).

To seamlessly integrate and circumvent the need for 'babel-typescript' by utilizing 'react-native-typescript-transformer,' you simply have to create a file named 'metro.config.js' in the root directory of your project. Here's the configuration setup:

module.exports = {
    transformer: {
        babelTransformerPath: require.resolve(
            'react-native-typescript-transformer',
        ),
    },
};

This method has been successfully tested on Expo SDK 33 along with TypeScript 3.4.5. I've triumphantly utilized 'swagger-codegen' to generate my REST client layer at last!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for automatically increasing the ID of a parameter in Angular using TypeScript

I am working on creating a gallery using the @ks89/angular-modal-gallery library, and the only remaining task is to assign different ids to each image in the gallery. I attempted to use a for loop, but it returned undefined. https://i.sstatic.net/7TmEN.pn ...

angulartypescript

Converting a string into a component name (class name) in Angular 2

How can I convert the string "BoxOneComponent" into a class name BoxOneComponent in Angular 2? Is there a method similar to .toString() that allows for typecasting to a class name? ...

angulartypescript

Executing the outer function from within the inner function of a different outer function

Imagine this scenario: function firstFunction() { console.log("This is the first function") } secondFunction() { thirdFunction() { //call firstFunction inside thirdFunction } } What is the way to invoke firstFunction from thirdFunction? ...

javascripttypescript

Display a symbol retrieved from the backend server

After receiving a response from the backend server for my Angular 2/4 application, I am presented with an attribute called "connectionStatus". This attribute indicates the status of a database connection, either as "UP" or "DOWN". In order to display this ...

htmlangulartypescripticons

How can we identify all the foreign_key1 ids from a MySQL join table that have a specific foreign_key2 assigned to them that is within a specified list?

I have a scenario where I have two tables, Table A and Table B, connected by a many-to-many relationship. Table A: ID --- 1 2 3 Table B: ID --- 4 5 6 7 Table AB: ID | A_ID | B_ID ---------------- 8 | 1 | 4 9 | 1 | 5 10 | 1 | 6 11 | 1 | 7 ...

javascriptmysqlnode.jstypescriptsequelize.js

Encountering an issue while trying to initiate a fresh React Native Project

As I work through the setup steps outlined in the React Native Documentation on my M1 MacBook Pro, I encounter a stumbling block. Despite successfully running React projects and Expo projects on this machine before, I hit a snag when trying to create a new ...

javascriptnode.jsreact-nativenpx

organizing strings in alphabetical order using TypeScript

My md-collection is set up to display a list of emails like this: <md-collection-item repeat.for="u of user" class="accent-text"> <div class="row"> <di ...

javascripttypescriptaureliaalphabetical

"Customizing the template of the Angular Material 2 datepicker: A step-by-step

Looking to make changes to the templates of the angular 2 material date-picker? These templates are located within various internal components in @angular/material/esm5/datepicker.es5.js. One option is to directly modify the template in the node package, ...

angulartypescriptoverridingangular-materialangular2-template

Do constructors in TypeScript automatically replace the value of `this` with the object returned when using `super(...)`?

I’m having some trouble grasping a concept from the documentation: According to ES2015, constructors that return an object will automatically replace the value of “this” for any instances where “super(…)” is called. The constructor code must ...

typescript

Passing data from Angular 2 to a modal component

Within my app component, I have implemented a table that triggers a modal to appear when a user clicks on any row. The modal displays details related to that specific row. The functionality is achieved through the following HTML code within the component c ...

twitter-bootstrapangulartypescript

Troubles encountered while attempting to properly mock a module in Jest

I've been experimenting with mocking a module, specifically S3 from aws-sdk. The approach that seemed to work for me was as follows: jest.mock('aws-sdk', () => { return { S3: () => ({ putObject: jest.fn() }) }; }); ...

node.jstypescriptunit-testingjestjsaws-sdk

Error: UserService (?) is missing parameters and cannot be resolved

Upon compiling my application, an error is appearing in the console: Uncaught Error: Can't resolve all parameters for UserService (?) Despite having @Injectable() present for the UserService, I am unsure where to troubleshoot further. import {Inj ...

angulartypescript

The parameter 'combined' cannot be assigned to the type 'FormatFn' in this argument

Can someone please help me figure out how to use morgan with a winston logger? I keep getting this error message that says: "[ts] Argument of type 'combined' is not assignable to parameter of type 'FormatFn'." I tried using the combined ...

typescriptwinstonmorgan

Unspecified data stored within an object

I am looking to populate a page with data from the server and have the ability to update the information. To achieve this, I am using formbuilder to fetch data from the server as the default value. Here's how I am implementing it: createForm(){ ...

javascriptangulartypescriptionic-frameworkionic4

Tips for determining the overall percentage breakdown of 100% based on the individual denominator for every column within angular 8

In my code, I have a simple function that calculates the sum of numbers and strings in columns within a table. The sum calculation itself works fine and provides accurate results. However, the problem arises when I attempt to divide the total sum of each c ...

angulartypescript

What is the best way to perform a deep copy in Angular 4 without relying on JQuery functions?

Within my application, I am working with an array of heroes which are displayed in a list using *ngFor. When a user clicks on a hero in the list, the hero is copied to a new variable and that variable is then bound to an input field using two-way binding. ...

angulartypescriptclonedeep-copy

Restrict the prop in Typescript to only accept a specific element

Is there a way to restrict the type of elements passed as props to a component? For example, I want a prop called divider in my component that only allows <svg> elements to be passed. import { ElementType, ReactElement } from 'react'; typ ...

reactjstypescript

Vue3 TypeScript may potentially have an object that is 'undefined'

This piece of code is Vue3 with TypeScript-based. export interface TenantDto { uuid: string; name: string; } export const useTenantStore = defineStore('tenant', { state: () => ({ tenants: [], }), actions: { setMyTenants: (pa ...

javascripttypescriptvue.jsvuejs3pinia

Issue encountered in Ionic/React/Typescript - Incorrect props supplied to React.FC<'erroneous props provided here'>

Having struggled with this issue for a while now without any success, I have searched through numerous questions here but none seem to address my specific case. Therefore, I kindly request your assistance. I am encountering difficulties passing props thro ...

javascripttypescriptionic-frameworkreact-redux

Status:0 was received as the response from URL:null during the REST call made from my iOS Ionic application

I am currently facing an issue with a rest call in my Ionic app. The call works fine on Android devices but encounters problems on iOS devices. Below is the implementation of the rest call in my Ionic service. import { Http } from '@angular/http&apos ...

iosangulartypescriptionic2ionic3