Types for Typescript users of react-quiz-component (.d.ts)

[d3vAdv3ntur3s]

Nice job with the library, I was trialing the component, doesn't quite fit for my use case, but I thought it might be useful to have some Types to assist for Typescript users. Quickly put this together whilst I was trying out the component, hopefully helpful to you if not onlookers.

File: react-quiz-component.d.ts

    declare module 'react-quiz-component' {
      import { ReactElement } from 'react';
      
      type QuestionType = "text" | "photo"
      
      type AnswerSelectionType = "single" | "multiple"
  
      type Question = {
          question: string
          questionType: QuestionType
          answers: string[]
          correctAnswer: string
          answerSelectionType: AnswerSelectionType
          messageForCorrectAnswer?: string
          messageForIncorrectAnswer?: string
          explanation?: string
          point?: string
          segment?: string
      }
  
      type QuizStructure = {
          quizTitle: string
          questions: question[]
      }
  
      type QuizProps = {
          quiz: QuizStructure;
          disableSynopsis?: boolean;
          shuffleAnswer?: boolean;
          shuffle?: boolean;
          showDefaultResult?: boolean;
          showInstantFeedback?: boolean;
          continueTillCorrect?: boolean;
          timer?: number;
          allowPauseTimer?: boolean
      }
  
      const Quiz: (props: QuizProps) => ReactElement;
      export default Quiz;
  }
`

[diegoroccia]

@d3vAdv3ntur3s thank you for this! I am using this library in one project of mine and I want to add the types. can I do it outside of the library?

[d3vAdv3ntur3s]

@diegoroccia Yes that's what I've done here if I'm understanding what you mean.

The declare module just needs to match the name of the library that you are adding the types for.

Good luck ^_^

[Julix91]

Couple typos: at the end, lowercaseq` in Questions - but I'll make a PR to add this to the project (and the typing in the package.json to point at the new file).

How big a lift do you think it would be to convert the whole project to typescript? Maybe worth doing that vs just typing.

[julix-unity]

Also see https://www.danielfullstack.com/article/stop-using-d-ts-files-in-typescript - ideally we'd make the whole thing TypeScript and have it auto generate the .d.ts files with a source map so you can still get straight back to the ts implementation if you want to see how something works.