International replacement of external interface exportation

Question

International replacement of external interface exportation

Currently, I am utilizing the @react-native-firebase/messaging library and invoking the method

messaging().onNotificationOpenedApp(remoteMessage => ....)

I am aiming to replace the property data within the type of remoteMessage in order to benefit from TypeScript intellisense when sending notifications.

The updated data type that I am looking to achieve is:

data: {
  page: PageType
  pageProps: {
    id: string
    ....
  }
}

I have attempted to define a global.d.ts file in the root directory of my project with the following:

declare global {
  namespace FirebaseMessagingTypes {
    interface RemoteMessage extends MyCustomDataType { }
  }
}

Unfortunately, this approach did not yield the desired outcome. Is there a way to globally override this type without explicitly setting the function's property type?

Thank you =D

typescript typescript-typings

Answer 1

Answer №1

Create a custom function that utilizes data types

type MyInfo = {
  page: string,
  pageDetails: string,
}

type UserData = {
  age: string,
  fullName: string,
}

type MessageWithMyInfo = Omit<Message, 'data'> & {data: MyInfo}
type MessageWithUserData = Omit<Message, 'data'> & {data: UserData}

function processMyInfo(payload: MessageWithMyInfo) {
  console.log(payload.data.pageDetails)
}

function processUserData(payload: MessageWithUserData) {
  console.log(payload.data.age)
}

function isUserPayload (msg: Message): msg is MessageWithUserData  {
 if (msg.data && 'age' in msg.data) return true
 return false
}

function isMyInfoPayload (msg: Message): msg is MessageWithMyInfo  {
 if (msg.data && 'page' in msg.data) return true
 return false
}

function handleNotificationOpenEvent(rm: Message) {
  if (isMyInfoPayload(rm)) {
   processMyInfo(rm)
  } else if (isUserPayload(rm)){
    processUserData(rm)
  }

}

onNotificationOpenedApp((data: Message) => handleNotificationOpenEvent(data))

Answer 2

Create a custom function that utilizes data types

type MyInfo = {
  page: string,
  pageDetails: string,
}

type UserData = {
  age: string,
  fullName: string,
}

type MessageWithMyInfo = Omit<Message, 'data'> & {data: MyInfo}
type MessageWithUserData = Omit<Message, 'data'> & {data: UserData}

function processMyInfo(payload: MessageWithMyInfo) {
  console.log(payload.data.pageDetails)
}

function processUserData(payload: MessageWithUserData) {
  console.log(payload.data.age)
}

function isUserPayload (msg: Message): msg is MessageWithUserData  {
 if (msg.data && 'age' in msg.data) return true
 return false
}

function isMyInfoPayload (msg: Message): msg is MessageWithMyInfo  {
 if (msg.data && 'page' in msg.data) return true
 return false
}

function handleNotificationOpenEvent(rm: Message) {
  if (isMyInfoPayload(rm)) {
   processMyInfo(rm)
  } else if (isUserPayload(rm)){
    processUserData(rm)
  }

}

onNotificationOpenedApp((data: Message) => handleNotificationOpenEvent(data))

International replacement of external interface exportation

Answer №1

Similar questions

Encountering an issue: a function is required to return a value if its declared type is not 'undefined', 'void', or 'any'

Struggling to set up a Jest testing module for a NestJs service. Encountering an issue where Nest is unable to resolve dependencies of the UsersService, specifically the Config

The Angular Animation constantly resets with each new action taken

The attribute 'map' is not found on the object of type 'List'

Obtaining undefined values for req and resolvedUrl in GetServerSideProps function

I am experiencing difficulties with bringing in node modules into my project

The global variable in TypeScript is not specified; it is initialized within the declaration `declare global{}`

Use the rowTemplate in a Kendo grid without replacing the existing one

In Angular 5, a variable's value becomes undefined once it is subscribed to outside of its assigned

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)

Running the `npm start` command in Angular tends to be quite time-consuming

The module declaration is triggering a lint error that reads "Unexpected token, expecting '{'"

Implementing unique behaviors based on data types in Typescript

Put Jest to the test by testing the appendFileSync function

Testing the NestJS service with a real database comparison

Display an API generated popup list using Vue's rendering capabilities

Retrieve the structure from a React application

Deactivate the button while the form is being submitted

selectize.js typescript: Unable to access values of an undefined object (reading '0')

The element 'loginToken' is not found within the type '{ loginToken: string; } | { error: Error; } | { username: string; password: string; }'