0

stripeのサンプルコードをTypeScript化しようとしているのですが、なぜかストリングリテラルが当たる場所でちゃんと文字列を渡しているのにエラーを起こします。

エラー内容 - options の箇所で出てきます。

Optional Elements configuration options. Once the stripe prop has been set, these options cannot be changed.

Type '{ clientSecret: string; appearance: { theme: string; }; }' is not assignable to type 'StripeElementsOptions'.
  The types of 'appearance.theme' are incompatible between these types.
    Type 'string' is not assignable to type '"stripe" | "night" | "flat" | "none" | undefined'.ts(2322)
react-stripe.d.ts(445, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & ElementsProps & { children?: ReactNode; }'

コード

import React, { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";

import CheckoutForm from "./CheckOutForm";
import "./App.css";

// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
// loadStripe is initialized with a fake API key.
// Sign in to see examples pre-filled with your key.
const stripePromise = loadStripe('pk_test_46zswMCbz39W2KAqKj43vDRu')

export default function App() {
  const [clientSecret, setClientSecret] = useState("");

  useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

  const appearance = {
    theme: "stripe",
  };
  const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="App">
      {clientSecret && (
        <Elements stripe={stripePromise} options={options}>
          <CheckoutForm />
        </Elements>
      )}
    </div>
  )
}

追記

型注釈とは下記のように明示的に型を指定してあげるという事でしょうか?

type Options = {
  clientSecret: string;
  appearance: {
    theme: 'stripe' | 'night' | 'flat' | 'none';
  }
}

// 一部抜粋...

const appearance = {
    theme: 'stripe',
  };
  const options : Options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="App">
      {clientSecret && (
        <Elements stripe={stripePromise} options={options}>
          <CheckoutForm />
        </Elements>
      )}
    </div>
  )

追記2
こういう事ですね!

import React, { useState, useEffect } from "react";
import { loadStripe, StripeElementsOptions, Appearance } from "@stripe/stripe-js";
import { Elements} from "@stripe/react-stripe-js";


import CheckoutForm from "./CheckOutForm";
import "./App.css";

// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
// loadStripe is initialized with a fake API key.
// Sign in to see examples pre-filled with your key.
const stripePromise = loadStripe('pk_test_46zswMCbz39W2KAqKj43vDRu')

export default function App() {
  const [clientSecret, setClientSecret] = useState("");

  useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

  const appearance: Appearance = {
    theme: 'stripe',
  };
  const options : StripeElementsOptions = {
    clientSecret,
    appearance,
  };

  return (
    <div className="App">
      {clientSecret && (
        <Elements stripe={stripePromise} options={options}>
          <CheckoutForm />
        </Elements>
      )}
    </div>
  )
}

1 件の回答 1

0

options.appearance.theme につく型の説明として、

  • "stripe" | "night" | "flat" | "none" | undefined:書かれている文字列リテラルのどれかか undefined かが期待されている
  • string:何かしら文字列が期待されている

となっているところ、前者の型がつく場所に後者の型がつく値を代入しようとしているのでエラーになっていそうです。後者の型は任意の文字列を許している一方、前者はそうではないからです。

で、前者の型は Elements を提供している @stripe/react-stripe-js から来ていて後者の型は引数に渡している変数 options から来ているので、自分で用意している options の型を明示的に詳細に付けてあげると良さそうです。文字列リテラルを渡している箇所でも、そこで型注釈なしに推論される型は string であることに注意してください。後から変更されうるからです。簡単には、StripeElementsOptions で型注釈してあげると良さそうです。

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。