Q403: Implementation Drill TypeScript Practice Feedback Panel and Error Classification

What Interviewers Want To Evaluate

This drill tests whether you can make TypeScript feedback useful for learning.

A TypeScript practice tool should not dump every message into the same console area.

The interviewer wants to see error classification, clear UI states, and separation between type feedback and runtime output.

Short Interview Answer

I would add a TypeScript feedback panel that separates compile or transpile feedback from runtime console logs. The panel should classify syntax errors, type errors, and tooling failures, show short actionable messages, and prevent runtime execution when the TypeScript step fails. If the compile step passes, then runtime logs can appear in the console panel.

Feedback Panel Purpose

The panel answers:

did TypeScript accept the code
what error happened
where did it happen
what concept is involved
can the code run

This is different from runtime console output.

Learners need both signals.

State Model

Use:

idle
checking
valid
type-error
syntax-error
tooling-error
runtime-ready

The exact state names can vary.

The important part is that compile feedback is not mixed with runtime feedback.

Error Classification

Classify:

syntax error
type mismatch
missing property
possibly null or undefined
generic constraint issue
unknown compiler failure
runtime error after success

This classification helps learners map errors to concepts.

It also supports future cheat-sheet links.

UI Design

Show:

status pill
short summary
line or location if available
full message collapsed or copyable
suggested concept
copy feedback action

Keep the first message readable.

Raw compiler output can be available, but it should not be the only view.

Runtime Gate

If TypeScript feedback fails:

do not run runtime code
show feedback
keep previous runtime console clearly old or cleared

This prevents confusion.

The learner should know the code did not reach runtime.

Successful Flow

When feedback passes:

mark TypeScript valid
transpile or prepare JavaScript
run code
capture runtime logs
show runtime errors separately

This reinforces the difference between type safety and runtime behavior.

Copy Feedback

Allow:

copy TypeScript feedback
copy runtime console
copy code

These are separate artifacts.

A learner may want to ask for help with a type error without copying runtime logs.

Testing Plan

Test snippets:

valid code
syntax error
possibly null error
missing property error
generic constraint error
runtime throw after valid compile
copy feedback
clear feedback

This covers the most common learning paths.

Common Mistakes

• Running code after compile feedback fails.
• Showing type errors only as generic console errors.
• Hiding line information.
• Overwhelming beginners with raw compiler output.
• Not letting users copy the feedback.
• Treating syntax and type errors as identical.
• Forgetting dark theme readability for error panels.

Final Mental Model

TypeScript feedback should be:

separate
classified
actionable
copyable
runtime-aware
learning-oriented

Good feedback turns an error into a lesson.