Typescript support

[Avataw]

Quick discussion: I followed the first half of the redwood tutorial purely using typescript. Now in the intermission it is heavily suggested to use this repo instead.

I was quite surprised to see that no typescript version of this repo exists - I think it'd be neat to have in the future!

I am also volunteering to implement it - I'm just wondering where to put it :x

Options: A) different branch B) different repo C) same branch, relevant files exist in .js/x and .ts/x

[adriatic]

@Avataw your ideas on expanding the Redwood tutorial is very appealing to me. Please check the section Current list of authors, articles, and tools which indicates the need for your Typescript Redwood Blog app creation.

[thedavidprice]

I am also volunteering to implement it - I'm just wondering where to put it :x

Thank you for offering @Avataw That would be helpful, indeed 🚀 (And no small task.)

Because we want this repo to be maintainable, using automation as much as possible, we need to keep things in one repo using one main branch. For this initiative, what I suggest is:

• Work against this Repo via PR(s), which could be separated into a PR per directory
• replace the current main branch codebase with TS equivalent
• when devs clone this repo, they can:
  1. keep it as TS
  2. convert to JS using the yarn rw ts-to-js command

Additionally, this repo README and the Tutorial will need to be updated with instructions to clone and either keep as TS or convert to JS.

What do you think?

[Tobbe]

@Avataw Sorry I didn't see this one earlier. You did a great job on the PRs and discussions on the tutorial docs. I'd love to work with you on converting this repo to TS. Just let me know if there's anything I can do for you.

[adriatic]

@awataw - I found your message first, because it hits a sweet spot for me (looking for RW customers that would be willing to add articles to the Redwood Application Development Cookbook - an important piece of documentation, a project that might function on it's own, without adding to the workload for core team members).

On the first glance, I thought that you are a perfect match for the RADC project, but realized later that a company founder (@thedavidprice) and a core team member (@Tobbe) responded to your initial post so enthusiastically, please consider their responses first 😄,

[Avataw]

@thedavidprice sounds great! I'd love to do that and help :) I won't be able to do that before the mid of june though :/ @Tobbe thanks for offering - I'll let you know if something comes up :)

@adriatic thanks! I do like the idea of the RADC project :) For example an in-depth example of debugging redwood applications would be incredibly helpful - I'm just not sure if it should be outsourced into a different repo, instead of putting it into the main documentation somewhere :)

[adriatic]

@Avataw - the Typescript version of Redwood Blog application (called here Redwood Tutorial) is missing a lot and would be very important to Redwood users.

By the time you plan to create the Typescript version (my advice would be to do it in your own repository, worrying about its final destination later), I will likely finish the set of articles on in-depth debugging practices. Then we can both focus on adding Typescript to that set. Stay in touch 😄

[cubu]

This is the typescript version I work from scratch (not following the suggestion in intermission): https://github.com/cubu/redwood-tutorial-ts/

Basically if user follow the current tutorial, they will have no trouble completed most of the work. Only the services function in comments.ts file need to be updated. As in the tutorial, it use Prisma and CreateCommentArgs interface. However the new generated code use QueryResolvers. To make it work, we added the function createComment & deleteComment as below:

export const createComment: QueryResolvers['comment'] = ({ input }) => {
  return db.comment.create({
    data: input,
  })
}

export const deleteComment: QueryResolvers['comment'] = ({ id }) => {
  requireAuth({ roles: 'moderator' })
  return db.comment.delete({
    where: { id },
  })
}

We also need to update this function to make it display properly at the end of Chapter 6 (this is a nightmare to troubleshoot with beginners):

export const comments: QueryResolvers['comments'] = ({ postId }) => {
  return db.comment.findMany({ where: { postId } })
}

Another trouble is testing, tests still failed due to discrepancy in tutorial code and create-redwood-app generated code. But I haven't touched it yet.

Hope that's help someone who have trouble follow the tutorials.

[rushabhhere]

@thedavidprice @Tobbe here's my attempt at an example intermission repo in TypeScript: https://github.com/rushabhhere/redwood-tutorial-ts/

I have tried my best to cover all additional tests and styles. I am willing to make necessary changes per your suggestions and help roll this out as soon as possible. I hope this is helpful!

[Tobbe]

@rushabhhere Thank you!

Did you also try ts-to-js as David suggested? I mean, it shouldn't cause any problems, but just wanted to make sure your repo still works fine as a JS project 🙂

[rushabhhere]

@Tobbe yes, I did try it out. It worked fine for me.

[Tobbe]

@rushabhhere If you could make a PR against this repo with your changes, that would be fantastic! And also update the Readme with instructions for both TS and JS.

Thanks!

[rushabhhere]

@Tobbe Done https://github.com/redwoodjs/redwood-tutorial/pull/71!