Typescript types

[yoDon]

The existing arc/types.js file is sooooo close to being a typescript *.d.ts file.

I spent about an hour trying to hand edit types.js into a list of type definitions but didn't quite understand some of the types and structures well enough to do so (for example what methods should a type the implements node receive?). I'm also guessing the existing types.js file was procedurally generated, in which case it would be much faster and more maintainable for someone inside Shopify to update the generator once, but even if it was hand edited types.d.ts would still be an incredibly achievable super high value asset to the community.

What's the best way to go forward - should I take a stab at a hand-edited PR or would that be rejected because types.js is procedurally generated and types.d.ts needs to be as well?

[swalkinshaw]

Are you referring to https://github.com/Shopify/storefront-api-examples/blob/master/angular-graphql-client/src/app/shared/services/types.ts?

The Angular example was an external contribution unfortunately. I don't know how the contributor generated it originally. I imagine (and hope) it was automated somehow though!

[yoDon]

@swalkinshaw the types.ts file you mentioned still just has the GraphQL text descriptors (with types.ts probably hand-made by a contributor from the original types.js file which I'm guessing was procedurally generated by someone at Shopify). These files are soooo close to what is needed for strongly-typed access to the data, but it's just exactly not usable for that today. What we need are either class or interface descriptions like

interface ICheckout {
  appliedGiftCards:IAppliedGiftCard;
  availableShippingRates:IAvailableShippingRates,
  ...

where what the types.js/types.ts files contain are string-based lines like

const Checkout = {
  "name": "Checkout",
  "kind": "OBJECT",
  "fieldBaseTypes": {
    "appliedGiftCards": "AppliedGiftCard",
    "availableShippingRates": "AvailableShippingRates",
  ...

The content is incredibly close, just some minor grepping and editing to convert. The problem is there is some shopify-generated magic in the types.js/types.ts text that I can't figure out what to do with, for example all of the "OBJECT" type descriptors contain lines like "implementsNode": true or "implementsNode": false but I'm not seeing any definition in the file of what implentsNode means which makes me think this file came from inside Shopify (presumably implementsNode is describing some base class or interface that the individual concrete classes should extend, but I don't know what that base should contain).

Given that GraphQL is at the core a strongly-typed API, and given that you're a tiny, tiny bit of search-and-replace from having your interface fully typed, it would be a huge help to all of us that do use typescript if you folks could do that tiny last step and publish this file as an actual types.d.ts file, since its soooo close to being one already.

[swalkinshaw]

This is probably something we'd have to automate in another repository. I personally don't have any experience with TS. Are there existing tools to generate the types from a GraphQL API? Seems like something should exist since that's a benefit that a spec like GraphQL provides.

[yoDon]

Just checking if Shopify has moved towards typescript in the past six months

[cjkihl]

@swalkinshaw and @yoDon If this is still interesting, I created a package that includes all Typescript typings for Shopify Storefront API.
All typings and comments are auto-generated from the GraphQL schema version: 2020-01.
Contributions are welcome. 😊
https://github.com/caki0915/shopify-storefront-api-typings
https://www.npmjs.com/package/shopify-storefront-api-typings

[Amerr]

Wow its been 2 years but the quest remains the same, its not easy to find a shopify admin api in typescript