Quiz for Setting up React with TypeScript

Q1: Which command creates a new React app with TypeScript template?

A. A. npx create-react-app my-app --template typescript B. B. npx create-react-app my-app --template js C. C. npm install react-typescript D. D. npm start

Q2: What file extension is used for TypeScript React components?

A. A. .tsx B. B. .js C. C. .jsx D. D. .ts

Q3: Which package provides TypeScript types for React?

A. A. @types/react B. B. react-dom C. C. typescript-react D. D. react-types

Q4: How do you declare props types in a functional component?

A. A. Using an interface or type and React.FC<Props> B. B. By using PropTypes C. C. By ignoring types D. D. Using plain JavaScript

Q5: What command installs TypeScript in a React project?

A. A. npm install typescript --save-dev B. B. npm install react C. C. npm start D. D. npm install tsx

Q6: Which tsconfig.json setting is important for React projects?

A. A. "jsx": "react-jsx" B. B. "module": "commonjs" C. C. "target": "ES3" D. D. "lib": ["dom"]

Q7: What does TypeScript provide for React development?

A. A. Static type checking B. B. Runtime type checking C. C. Code styling D. D. Bundling

Q8: Which is a correct way to type a React state hook?

A. A. const [count, setCount] = useState<number>(0); B. B. const [count, setCount] = useState("0"); C. C. const [count, setCount] = useState([]); D. D. const [count, setCount] = useState(true);

Q9: How do you type an event handler for a button click?

A. A. (event: React.MouseEvent<HTMLButtonElement>) => void B. B. (event: any) => void C. C. (event: Event) => void D. D. () => void

Q10: How do you install React and React DOM types?

A. A. npm install @types/react @types/react-dom --save-dev B. B. npm install react-types C. C. npm install typescript-react D. D. npm install react

Q11: Which of these is a valid way to type default props?

A. A. Using default parameters or defaultProps with types B. B. Using PropTypes C. C. Ignoring defaults D. D. No typing required

Q12: Can you use TypeScript with React class components?

A. A. Yes, by typing props and state interfaces B. B. No, only functional components support TS C. C. Yes, but only for state D. D. No, class components don't support types

Q13: How do you define a typed context in React with TypeScript?

A. A. React.createContext<Type | undefined>(undefined) B. B. React.createContext() C. C. Using any type D. D. React.useContext()

Q14: Which of these editors offers best support for React + TypeScript?

A. A. Visual Studio Code B. B. Notepad C. C. MS Paint D. D. WordPad

Q15: What is the benefit of using TypeScript with React?

A. A. Early detection of bugs via types B. B. It makes code slower C. C. Requires no build step D. D. It removes JSX

Q16: How to handle optional props in TypeScript?

A. A. Use ? after the prop name in interface B. B. Make all props required C. C. Use defaultProps only D. D. Use PropTypes

Q17: What command checks TypeScript errors without compiling?

A. A. tsc --noEmit B. B. npm start C. C. npm test D. D. node app.js

Q18: How to type refs in React with TypeScript?

A. A. useRef<HTMLDivElement>(null) B. B. useRef() C. C. Ref typing is not required D. D. useState instead

Q19: How to fix "JSX element implicitly has type 'any'" error?

A. A. Add "jsx": "react-jsx" in tsconfig.json and install types B. B. Remove JSX C. C. Use PropTypes D. D. Ignore error