Typescript support

[eduardborges]

Are you guys planning to add Typescript support?

[sypl]

This is my first pass at it:

import React from 'react'
import { TouchableOpacity } from 'react-native-gesture-handler'

declare module 'react-native-plaid-link-sdk' {
  export interface PlaidLinkProps {
    // Required props

    // Displayed once a user has successfully linked their account
    clientName: string

    // The Plaid API environment on which to create user accounts.
    env: 'development' | 'sandbox' | 'production'

    // A function that is called when a user has successfully onboarded their
    // account. The function should expect two arguments, the public_key and a
    // metadata object.
    onSuccess: (publicKey: string, metadata: object) => void

    // The Plaid product(s) you wish to use, an array containing some of
    // auth, identity, income, transactions, assets, liabilities, investments.
    product: Array<'auth' | 'identity' | 'income' | 'transactions' | 'assets' | 'liabilities' | 'investments'>

    // The public_key associated with your account; available from
    // the Plaid dashboard (https://dashboard.plaid.com).
    publicKey: string

    // Optional props

    // A list of Plaid-supported country codes using the ISO-3166-1 alpha-2
    // country code standard.
    countryCodes?: Array<string>

    // Allows non default customization to be retrieved by name.
    linkCustomizationName?: string

    // Plaid-supported language to localize Link. English will be used by default.
    language?: string

    // A function that is called when a user has specifically exited Link flow.
    onExit?: (error: any, metadata: Object) => void

    // Specify an existing user's public token to launch Link in update mode.
    // This will cause Link to open directly to the authentication step for
    // that user's institution.
    token?: string

    // Specify a user to enable all Auth features. Reach out to your
    // account manager or integrations@plaid.com to get enabled. See the Auth
    // [https://plaid.com/docs#auth] docs for integration details.
    userEmailAddress?: string // specify for microdeposit support
    userLegalName?: string // specify for microdeposit support
    userPhoneNumber?: string

    // Specify a webhook to associate with a user.
    webhook?: string

    // Specify an existing payment token to launch Link in payment initation mode.
    // This will cause Link to open a payment confirmation dialog prior to
    // institution selection.
    paymentToken?: string

    // An oauthNonce is required to support OAuth authentication flows when
    // launching Link within a WebView and using one or more European country
    // codes. The nonce must be at least 16 characters long.
    oauthNonce?: string

    // An oauthRedirectUri is required to support OAuth authentication flows when
    // launching or re-launching Link within a WebView and using one or more
    // European country codes.
    oauthRedirectUri?: <P>(props: P, propName: keyof P) => void | Error

    // An oauthStateId is required to support OAuth authentication and payment flows when
    // re-launching Link within a WebView and using one or more European country
    // codes.
    oauthStateId?: string

    // Underlying component to render
    component?: React.ComponentType = TouchableOpacity

    // Props for underlying component
    componentProps?: object

    children?: React.ReactNode

    // Note: onEvent is omitted here, to handle onEvent callbacks refer to
    // the documentation here: https://github.com/plaid/react-native-plaid-link-sdk#to-receive-onevent-callbacks
  }

  const PlaidLink: (props: PlaidLinkProps) => JSX.Element
  export default PlaidLink

  interface OpenLinkProps {
    onExit: (data: object) => void
    onSuccess: (data: object) => void
  }
  export function openLink(props: OpenLinkProps): Promise<void>
}

Probably children needs to be a required prop. Doesn't render anything without one.

[sypl]

I based the onSuccess callback on the description:

    // A function that is called when a user has successfully onboarded their
    // account. The function should expect two arguments, the public_key and a
    // metadata object.
    onSuccess: (publicKey: string, metadata: object) => void

However, I've found in reality the callback takes one argument, which seems to be the metadata:

{
    "status": "connected",
    "link_session_id": "f6a61708-333a-4417-8a57-8be538f7b47e",
    "institution": {
      "institution_id": "ins_4",
      "name": "Wells Fargo"
    },
    "accounts": [
      {
        "id": "PDQ5Nmawl6H6rdAdxAM8h3wM8RKdZwT76J81z",
        "mask": "0000",
        "name": "Plaid Checking",
        "subtype": "checking",
        "type": "depository"
      },
      {
        "id": "zXaQonZbeVSBoJAJ9Ax4h1NDLaV5JNioNqMVm",
        "mask": "7777",
        "name": "Plaid Student Loan",
        "subtype": "student",
        "type": "loan"
      }
    ],
    "account": {
      "id": null,
      "mask": null,
      "name": null,
      "subtype": null,
      "type": null
    },
    "request_id": "FhnKIq8LMrkMLHM",
    "public_token": "public-sandbox-c46a508b-bde1-4c73-a017-a51cdff365d9",
    "account_id": null
  }

[sypl]

Looks like callback args are related to this: https://github.com/plaid/react-native-plaid-link-sdk/issues/18

[zsweigart]

Thanks for the suggestiong @sypl would you mind opening a pull request for the changes and we can discuss on there?

[sypl]

@zsweigart Sure, I'll do that now

[sypl]

Added here: https://github.com/plaid/react-native-plaid-link-sdk/pull/71. Can't add reviewers, I'm guessing that's a team thing.

[ataravati]

@sypl

I get this typescript error:

Invalid module name in augmentation. Module 'react-native-plaid-link-sdk' resolves to an untyped module at '/Users/xxxx/xxxxx/node_modules/react-native-plaid-link-sdk/index.js', which cannot be augmented.ts(2665)

[sypl]

@ataravati I've not seen that before, sorry. I presume you've tried the solutions they mention in here? https://github.com/Microsoft/TypeScript/issues/9748

[ataravati]

@sypl Yes, I did that and it worked. Thanks!

[ljharb]

The TS type for oauthRedirectUri should be string - the type you included there is the type for its propType validator.

[JeroenMols]

We've just released a preview of our latest SDK 7.0.0-rc1 that includes typescript support. Please give that a go and we would be happy to receive any feedback!