javascript - How to properly type the IdTokenData function component in TypeScript? - Stack Overflow

admin管理员组

文章数量:1183750

I'm trying to migrate the MSAL React SPA example to a TypeScript + React Vite project. While converting the DataDisplay.jsx file, I'm encountering typing issues.

Here’s the relevant code snippet from DataDisplay.tsx:

export const IdTokenData = (props: any) => {
  const tokenClaims = createClaimsTable(props.idTokenClaims);

  const tableRow = Object.keys(tokenClaims).map((key, index) => {
    return (
      <tr key={key}>
        {tokenClaims[key].map((claimItem) => (
          <td key={claimItem}>{claimItem}</td>
        ))}
      </tr>
    );
  });

Element implicitly has an 'any' type because index expression is not of type 'number'.

Parameter 'claimItem' implicitly has an 'any' type.

The createClaimsTable function used above is defined in claimUtils.js. Here's what it looks like:

export const createClaimsTable = (claims) => {
    let claimsObj = {};
    let index = 0;

    Object.keys(claims).forEach((key) => {
        if (typeof claims[key] !== 'string' && typeof claims[key] !== 'number') return;
        switch (key) {

        ...

What are the appropriate TypeScript types for:

• The idTokenClaims prop in IdTokenData?
• The createClaimsTable function's parameter and return type?

本文标签： javascriptHow to properly type the IdTokenData function component in TypeScriptStack Overflow