1

I am new to React and Typescript. I have a page that sends such URL to another one thru GET as below

http://localhost:8080/merchant-partner/0d593974-ff15-4650-a66b-76df7b701faf

As you can see, the URL parameter is based on an UUID String.

I use this UUID parameter to another page

Its code is based on below

export interface IMerchantPartnerProps extends StateProps, DispatchProps,   RouteComponentProps<{ merchantId: string }> {}

export const MerchantPartner = (props: IMerchantPartnerProps) => {

useEffect(() => {
    props.getEntities(Number(props.match.params.merchantId);
}, []);

I try to convert this UUID String to Typescript Number, but I get a NaN. How can I convert that?

VLAZ
  • 26,331
  • 9
  • 49
  • 67
Luís Palma
  • 249
  • 1
  • 7
  • 15
  • A UUID consists of non-numeric characters. How do you expect those to be translated to digits/numbers? What do you expect the corresponding number value of `0d593974-ff15-4650-a66b-76df7b701faf` to be? – Felix Kling Feb 11 '21 at 14:53
  • 1
    @FelixKling a UUID is a very big number expressed in hex and with separators for readability. But it's much larger than `Number.MAX_SAFE_INTEGER`. – VLAZ Feb 11 '21 at 14:55
  • 1
    @FelixKling - Well, a [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier) is an 128-bit number canonically expressed as hex digits with specific groupings. So it's entirely possible to convert it to number, but not `number`. :-) – T.J. Crowder Feb 11 '21 at 14:55
  • You should read the answers to [How to create a GUID / UUID](https://stackoverflow.com/q/105034/215552); they won't answer your question, but they will give you are better understanding around how they are formed. – Heretic Monkey Feb 11 '21 at 14:58
  • 1
    Fair enough :D I think I kind of knew that but I also haven't seen UUIDs as numbers so far... – Felix Kling Feb 11 '21 at 14:58
  • @FelixKling - I tend to think of them as strings as well. :-) Maybe I shouldn't, but... – T.J. Crowder Feb 11 '21 at 15:04

1 Answers1

2

I try to convert this UUID String to Typescript Number

You can't reliably convert a UUID to a JavaScript/TypeScript number. The number type is a floating-point type and becomes potentially imprecise after the number 9,007,199,254,740,991, which a UUID could easily be much, much larger than.

Instead, ensure that the UUID is formatted in a consistent way (all lowercase or all uppercase, dashes in the canonical places or no dashes at all, etc.), and use string.

Alternatively, you could convert it to a bigint if your target environments are very up-to-date (bigint is a new type in JavaScript in ES2020). You'd convert the individual segments to bigint according to the standard grouping rules, preface it with 0x, and pass it in to BigInt():

const uuid = "0d593974-ff15-4650-a66b-76df7b701faf";
const bigIntValue = BigInt(
    "0x" + uuid.replace(/-/g, "")
);
console.log(bigIntValue.toString());

So it could be a bigint (in up-to-date modern environments), but not a number.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • All right @T.J Crowder, thanks, but if I try to use string, I mean export interface IMerchantPartnerProps extends StateProps, DispatchProps, RouteComponentProps<{ merchantId: string }> {} export const MerchantPartner = (props: IMerchantPartnerProps) => { useEffect(() => { props.getEntities((props.match.params.merchantId); }, []); I got error like TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. How can I overcome this? – Luís Palma Feb 11 '21 at 14:57
  • @LuísPalma - Ensure it's `string` all the way through the type system. So apparently you're passing it to something that expects a `number`. That thing needs to be changed, because you can't reliably pass a UUID as a JavaScript/TypeScript `number`. – T.J. Crowder Feb 11 '21 at 15:03