Managing Experimental / Test Component Files in TypeScript React/React Native Projects - ChatGPT

Given below is a summary note from ChatGPT based on an exchange I had with it today.

Scenario

You have a component overview.tsx and want to keep a variation for testing or experimentation without affecting the main project or TypeScript build.

---

Current Practical Approach

• Save the experimental file as .txt, e.g.:

overview-dummy-working-parallax.tsx.txt

• Advantages:

  1. Same folder location as original — easy to relate to the original component.

  2. Avoids TypeScript complaints — TS compiler ignores .txt.

  3. Safe from accidental execution/import — won’t be picked up in builds.

• Disadvantage:

  • No syntax highlighting or IntelliSense in VSCode.

• Practical usage:

  • Rename back to .tsx when you want to reuse or edit with full TypeScript support.

---

Alternative / More Standard Approaches

1. Sandbox / experimental folder

   • Example: src/components/sandbox/overview-parallax-test.tsx

   • Add the folder to tsconfig.json exclude so TS ignores it.

   • Pros: Keeps .tsx extension, syntax highlighting, and editor tooling works.

   • Cons: Requires replicating subfolder structure to maintain context.

2. Special suffix / dev file

   • Example: overview.dev.tsx or overview-playground.tsx

   • Keeps it in same folder as original.

   • Can add // @ts-nocheck at the top to prevent TS errors.

3. Storybook / test harness

   • Place variations in stories or separate test screens.

   • Useful if experimenting frequently or for multiple variations.

---

// @ts-nocheck in TypeScript

• Placed at the top of a .ts or .tsx file:

// @ts-nocheck

• Purpose: Tells TypeScript to skip type checking for that entire file.

• Effects:

  1. No TypeScript errors or warnings in that file, even if types are missing or incorrect.

  2. VSCode still provides syntax highlighting and IntelliSense for valid TypeScript/JSX syntax.

• Use case: Useful for experimental, backup, or third-party code that you don’t want to interfere with your main TypeScript build.

---

Tradeoffs

Approach	Pros	Cons
.txt backup (quick & dirty)	Keeps folder context, safe from TS/build, quick	No syntax highlighting
Sandbox folder + exclude	Full syntax highlighting, editor support, safe from build	Needs subfolder replication, extra tsconfig tweak
.dev.tsx / .playground.tsx	Clear separation, editor support	Might still show TS warnings without @ts-nocheck
Storybook / test harness	Clean, multiple variations, easy to run/test	Requires Storybook setup

---

Recommendation for Tutorial / Non-Production Projects

• For quick backups / experiments, the .txt approach is pragmatic and efficient.

• When using the file: rename to .tsx to edit with TypeScript support.

• For more systematic experimentation in larger projects, consider a sandbox folder or .dev.tsx naming convention with // @ts-nocheck.

---

This summary provides a practical reference for safely keeping experimental or test .tsx files without interfering with the main TypeScript build or VSCode workflow.

---