TypeScript Templates: Confusion around ReadOnly

[jinmayamashita]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.13.1
  npm: 10.5.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.48 // Latest available version is detected (15.0.0-canary.48).
  eslint-config-next: 15.0.0-canary.48
  react: 19.0.0-rc.0
  react-dom: 19.0.0-rc.0
  typescript: 5.5.2
Next.js Config:
  output: N/A

Which example does this report relate to?

packages/create-next-app/templates/app-tw/ts/app/layout.tsx and packages/create-next-app/templates/app/ts/app/layout.tsx

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

TypeScript template's read-only props added in #58845 doesn't type check correctly.

As mentioned here, when you destructure props, new variables are created. TypeScript does not consider the 'children' variable as readonly.

Therefore, using ReadOnly with destructuring props can cause confusion.

Expected Behavior

TypeScript templates should not enforce read-only props.

To Reproduce

1. Run the npx create-next-app@latest
2. Check the src/app/layout.tsx