Go all in on TypeScript

[phifa]

I just saw the hydrogen demo from Tobi and got super excited! This looks like a fun stack to use! While looking through the docs one thing irritated me. All the examples I saw, were written in JavaScript, not TypeScript.

Is this intentionally to lower the barrier of entry? Is it possible to easily set up the custom storefront hydrogen project with TypeScript? And lastly, why not go all in on TypeScript, in the examples, in the docs and screencasts?

I just did a quick local setup of a hydrogen project. Since it is packaged with vite, you can rename the files to tsx files and make it work, sort of. Of course now all types are missing and have to be added. It would be awesome to make this more configurable, like you know it from next.js: yarn create next-app --typescript.

Anyways, would love to hear some core devs talk about the choices they made with TypeScript.

[arnaudbzn]

Same here!
Typescript improves DX and dev velocity and it's the modern way to code libraries and SDKs.
Proper usage of generics can be tricky but at the end the codebase is robust and easier to refactor.

[blittle]

Thank you @phifa and @arnaudbzn for the suggestion! Hydrogen's core components are all written in TypeScript, and those types are exposed. The output of create-hydrogen-app is JavaScript, like you said, to lower the barrier of entry to get started. When you say that types are missing have to be added, which types are you referring to? Types are exposed by the core hydrogen package.

That said, I think it would be a great future enhancement to add an option for create-hydrogen-app to scaffold a TypeScript project.

[nandorojo]

I think one big improvement would be TypeScript support with the responses of useShopQuery and useQuery. There could be a codegen step for this or something. Manually casting types on a query is not ideal.

[jplhomer]

@nandorojo correct me if I'm wrong, but useShopQuery supports typed responses via generics right now: https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen/src/hooks/useShopQuery/hooks.ts

Wouldn't you be able to pass the expected typed response along with your query in a TypeScript file?

[nandorojo]

@jplhomer thanks for the reply.

Yeah, you can use a generic. But a much nicer DX is having hooks codegen their types, so that you don't have to manually pass a generic.

For example, in my graphql app, we use this: https://www.graphql-code-generator.com/

You write your queries in .graphql files, and it'll codegen typed hooks and types for each query.

[codejunky]

Same here!
While it may seem that using JS would lower the barrier to entry, I am not sure that's entirely true. Most experienced developers nowadays are familiar with Typescript or can get up to speed with it quickly. As for the beginners, I don't think starting out with Hydrogen in particular and Shopify, in general, is the right way for them to go. Any with a solid foundation in web development would have no trouble adaptin to typescript, and anyone who doesn't should focus on those before anything else in my opinion. At least, make it an option

[razzle-dazzle]

I just saw the hydrogen demo from Tobi and got super excited! This looks like a fun stack to use! While looking through the docs one thing irritated me. All the examples I saw, were written in JavaScript, not TypeScript.

Is this intentionally to lower the barrier of entry? Is it possible to easily set up the custom storefront hydrogen project with TypeScript? And lastly, why not go all in on TypeScript, in the examples, in the docs and screencasts?

I just did a quick local setup of a hydrogen project. Since it is packaged with vite, you can rename the files to tsx files and make it work, sort of. Of course now all types are missing and have to be added. It would be awesome to make this more configurable, like you know it from next.js: yarn create next-app --typescript.

Anyways, would love to hear some core devs talk about the choices they made with TypeScript.

Exactly as phifa said, I don't know why you wouldn't want to use Typescript these days by default. I went to https://hydrogen.shopify.dev/ hoping to see a TS boilerplate, only to find a bootstrapped site full of JSX files. I am trying to start a new project and I currently don't know if I should use Shopify Hydrogen or NextJS with typescript! Fallen at the first hurdle :o/

[miroo93]

So converting the template to typescript by just renaming .jsx to .tsx is all nice and easy but then the IDE starts complaining about quite a few things: Implicit any, object is of type 'unknown' (see attached snippet from index.server.tsx).
Before you guys release an official template with Typescript by default, would it make sense to create a wiki page on the repo to document how to enable typescript ourselves with all the different settings we need in tsconfig.json, fixing errors etc?

[jplhomer]

Yeah this is a good callout!

FYI, useShopQuery<T> accepts a generic which will be the return type of your data, so you can add that as you see fit.

If there are errors specifically related to TypeScript usage that you cannot fix in your own template, please open a new Bug issue for them.

[SamuelPinho]

Do you know if there's any official types library that reflects the actual data?

One that I could use like this

import { ProductType } from '@shopify/storefront'

const ProductList = () => {
  const { ... } = useShopifyQuery<ProductType[]>(...);
}

const QUERY = gql`
  query products(first: 3) {
    ...
  }
`

I found these two, but they doesn't seem the best fit for it

• https://github.com/caki0915/shopify-storefront-api-typings - it seems like it not maintained anymore
• https://github.com/Shopify/shopify-node-api - doesn't seem like a types library,

[frehner]

On 0.12 you should be able to get the types for the fragments we provide from @shopify/hydrogen/fragments

We do also keep track of the full TS object shape from the Storefront API ourselves, and could perhaps expose that directly? See https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/packages/hydrogen/src/graphql/types/types.ts

Note that we generate this file using graphql-codegen, which is also something you could setup for your own project. See our codegen.yml file as a reference.

Does this help?

[SamuelPinho]

Yes, I was able to get it like this

import {Product} from '@shopify/hydrogen/dist/esnext/graphql/types/types'

// ...

And it seems like it's working for now

Thanks @frehner.

[hankmander]

I can't seem to find this exported Product type anymore, did it move?

[sudosubin]

I have tried to change the hydrogen demo app to full TypeScript, but failed.
I think ${id}?no-proxy module name mapper by Hydrogen might be the reason. (but not sure)

• code: https://github.com/sudosubin/playground-hydrogen

[jplhomer]

Filed this as a bug: Shopify/hydrogen#426

Please let us know if you have made any progress or if the issue persists!

[bigdogvision-jeff]

I'm experiencing the same issue here

[Aleksion]

I'm hitting some interesting issues when trying to convert the default project to typescript:

It seems to use a "not exposed index.html" when running dev, which means I can't change it from entry-client.jsx to entry-client.tsx.

It works fine if I run yarn build and then yarn serve.

[Aleksion]

I created a fork with a possible solution to the issue: Allowing entrypoint overrides through vite environment variables.
It would be cleaner to specify it in the vite.config.ts or shopify.config.ts though

Aleksion@911cf34

[jplhomer]

Filed a bug here for this: Shopify/hydrogen#427

[phifa]

How do we proceed? It looks like this request has more upvotes than any other. @blittle Any thoughts, plans how to move this forward? You said it is already written in TypeScript, so it should not be too wild, to make this work. I am certain, this will be a good investment and pull more devs to use and extend hydrogen. You can also write the documentation code examples in JS and TS, if you don't want to scare the JS devs.

[jplhomer]

If you are blocked by an issue, please file it as a Bug in our issues tab. Otherwise, you are free to use TypeScript in your Hydrogen project.

We're actively exploring adding a TypeScript Hydrogen template, and we'll let you know if/when it's added to the roadmap.

[moishinetzer]

@jplhomer Any updates on this? I assume the recent burst in general usage around TS would make this a VERY sought after feature including for myself... Side point it would be lovely to have on the docs site one of those tabs that lets you change code fragments between .js and .ts do you think that would be something the team would be able to develop?

[jplhomer]

We shipped an official barebones TypeScript example this week 🚀 https://github.com/Shopify/hydrogen/tree/v1.x-2022-07/examples/typescript

I'm going to try to add some extra goodies as well, like type exports for HydrogenRouteComponent and HydrogenAPIFunction.

We don't have this wired up yet in our CLI, but you could probably create a new TS Hydrogen app using:

npx degit Shopify/hydrogen/examples/typescript my-hydrogen-app

Please let us know how it works!

[jplhomer]

Regarding TS/JS conversion tabs in our dev docs, that's maybe something @mcvinci can speak to — I assume it has been explored!

[mcvinci]

@moishinetzer @jplhomer Yes! We definitely have the capability to present code samples with language-specific tabs on Shopify.dev. We can add TS tabs to the existing docs anytime we're ready.

As a quick example, syntax-wise, it would look like this:

{% codeblock file, filename: 'server.js' %}
```js?filename: 'server.js', title: 'Javascript'
JavaScript file contents
```

```ts?filename: 'server.ts', title: 'Typescript'
Typescript file contents
```
{% endcodeblock %}

[jplhomer]

We did it, folks: Hydrogen now ships with Hello World and Demo Store templates in TypeScript!

[danielravina]

Just tried Hello World. I think there's a bug. The .gitignore file shows up as _gitignore. I accidentally committed my node_modules folder just now 😬

[jplhomer]

Thanks - opened a fix here: Shopify/hydrogen#1741