I see a lot of questions who expect TypeScript to simply do something it cannot. They are based on a fundamental misunderstanding about what TypeScript does and how it works. The whole type system only exists at compile time, yet I see times and times again questions that expect:
- run time errors on a type mismatch. For example, requesting data over AJAX, declaring that the response would be of interface A but the server returns
null
or type B. - type assertions to actually have a run time effect. For example,
"42" as number
to produce a number or even more oftenmyObjOfTypeA as B
. - that types can be directly checked at run time. Like doing
myVar instanceof A
. - the compiler to do deductions based on run time logic. For example, a function with signature
(bool: boolean) => A | B
and implementationconst fn = bool ? <something of type A> : <something of type B>
. Then expectingfn(true)
to produce a result of type A.
All these do not and cannot work. So each question that asks for these or any other variation inherently suffer from a misunderstanding about how TypeScript works. This is covered by TypeScript resources like the official FAQ1, however I was wondering there is a good canonical here that explains this. I tried to look around but failed.
- What is TypeScript and why would I use it in place of JavaScript? is a good introduction but it's not explicit enough about compile time and run time difference.
- Casting a number to a string in TypeScript deals directly with only one of the issues.
- How do the different enum variants work in TypeScript? is a very good look "behind the scenes" and does clarify that there exists the ambient context. Essentially, that's the compile time information that is not retained for runtime. However, while really good, the focus isn't to clarify ambient (compile time) vs real (run time) contexts. Similar problem with the focus here
Seeing how often this comes up, I thought there would be something that directly focuses on explaining the compile/run time difference similar to What is the difference between client-side and server-side programming? yet I can't seem to find one. Am I missing failing at searching here? If it doesn't exist, I am also content with writing a self-answered Q&A myself or anybody else would also be welcome to, I would just prefer to have a singular on-site target.
1 As a side note, the FAQ also has a section called Common "Bugs" That Aren't Bugs. It's the very first thing in the FAQ. So, TypeScript does have its problem with misunderstandings.
const foo: string = 42 as string;
emitsconst foo = 42
and it's definitely surprising, without knowing what the compiler does or why.42 as string
won't work! You'd have to do e.g.42 as unknown as string
.<T extends boolean>(x: T): T extends true ? A : B
, or using function overloads(x: true): A
and(x: false): B
.fn(true)
producesA
and were asking how come that didn't work in reality. The answer is the same - it's behaviour that depends on runtime information. There is an extra layer that TS doesn't even check the implementation because the compiler just knows the signature - you could implement it asfn2 = _ => Math.random() < 0.5 ? <type A> : <type B>
and the result there cannot be statically predicted.boolean
type itself represented at runtime. It fits into a different category of question, of the form "why doesn't Typescript infer a stricter type than the one I've declared?" where the answer is that you need to declare a stricter type.fn(true)
always produce type A" or whether it's "I havefn(true)
but it doesn't produce <type A>. Why is that". Even in the former case, there is (usually) lack of understanding or knowledge about whyfn(true)
doesn't returnA
. So, understanding and properly conceptually separating compile time types and run time behaviour is a very important step.0.1 + 0.2
should the answer be an explanation about floating point arithmetic. But without the important background, any explanation is either going to just be repeating information or omitting said information. Both seem flawed - if you repeat the information it's 1. tedious 2. prone to errors. We have dupes to avoid repetition of answers. If you omit the information and just say "do this", then people reading the solution don't actually come up with a useful long term knowledge.