Is TypeScript really a superset of JavaScript?

Question

I just started using TypeScript and sometimes get compiler errors "use of undeclared variable". For example the following works in plain JavaScript :

var foo = {};
foo.bar = 42;

If I try to do the same in TypeScript it won't work and give me the mentioned error above. I have to write it like that:

var foo :any = {};
foo.bar = 42;

In plain JavaScript the type definition with any is neither required nor valid, but in TypeScript this seems to be mandatory. I understand the error and the reason for it, but I always heard in Videos and read in the documentation:

typescriptlang.org:

"TypeScript is a typed superset of JavaScript [...]"

Introduction Video @minute 3:20:

"All JavaScript code is TypeScript code, simply copy and paste"

Is that a thing that changed during the development of TypeScript or do I have to pass a specific compiler setting to make this work?

Answer 1

The reason for TypeScript's existence is to have a compiler and language which can enforce types better than vanilla Javascript does. Any regular Javascript is valid TypeScript, syntactically. That does not mean that the compiler must be entirely happy with it. Vanilla Javascript often contains code which is problematic in terms of type security. That doesn't make it invalid TypeScript code, but it's exactly the reason why TypeScript exists and it's exactly the compiler's job to point out those problems to you.

The languages as such are still sub/supersets of one another.

Answer 2

Theorem: TypeScript is neither a subset nor a superset of JavaScript.

Proof:

When we say language A is a subset of language B, we mean all valid A-programs are also valid B-programs.

Here is a valid TypeScript program that is not a valid JavaScript program:

let x: number = 3;

You identified a valid JavaScript program that is not a valid TypeScript program:

var foo = {};
foo.bar = 42;

Complicating factor 1: TypeScript is almost a superset. TypeScript is intended to be a near superset of JavaScript. Most valid JS is also valid TS. What JS is not can usually be easily tweaked to compile without errors in TS. In other words, most valid JS is also valid TS.

Complicating factor 2: non-fatal errors The TypeScript compiler generates the JavaScript code you intend sometimes even if there are errors. The your example that I referenced earlier emits this error

error TS2339: Property 'bar' does not exist on type '{}'.

but also this JS code

var foo = {};
foo.bar = 42;

The TS documentation notes

You can use TypeScript even if there are errors in your code. But in this case, TypeScript is warning that your code will likely not run as expected.

I think we can call this a failed compilation (and thus invalid TypeScript) for the following reasons:

1. The compiler seems to use the term warning in the conventional sense, so we should interpret error in the conventional sense too: an error indicates the compilation failed.
2. The documentation indicates that the resulting JavaScript is not necessarily correct as to what was intended. An incorrect output seems just as bad as (if not worse than) no output. They should both be considered failed.
3. The TypeScript compiler exits with a non-zero status code, which conventionally indicates that the process failed in some way.
4. If we call any TypeScript program that outputs JavaScript "valid", then we would have to call the following TypeScript program valid, because it a dot compiles to the empty string after issuing errors:

.

Complicating factor 3: TS accepts JS files: The TypeScript compiler can passthrough files ending in .js (see compiler documentation for --allowJs). In this sense TypeScript is a superset of JS. All .js files can be compiled with TypeScript. This is probably not what people who visit this question are meaning to ask.

I think complicating factor 1 is the thing that Anders Hejlsberg is getting at. It might also justify the misleading marketing on TypeScript's homepage. The other answers have fallen prey to complicating factor 2. However the general advice given in the other answers is correct: TypeScript is a layer on top of JavaScript designed to tell you when you do something bad. They are different tools for different purposes.

Answer 3

No. In other answers I believe the technical reason has been well explained, but I notice an example that could immediately serve as a contradiction to the claim in the question (different semantics):

// In TypeScript
function f<A>(a: A) { return a; };

console.log(f<Function>(f)); // <-- This line. It will print the function f since it is an identify function that in this case takes self and returns self.

Comparing to the below JavaScript example

// In JavaScript
function f(a) { return a; };

console.log(f<Function>(f)); // <-- This line. This is VALID JavaScript

At first glance you might think there should be a syntax error for the JavaScript example. HOWEVER, once you examine it closely, you'll notice that actually the line is executed as

console.log((f < Function) > f); // Evaluate to false

which is completely valid in JavaScript. This essentially means the same line of code resulted in 2 completely different interpretation in JavaScript and TypeScript, therefore a counterexample to the question.

Answer 4

The definition

"All JavaScript code is TypeScript code, simply copy and paste"

is true. Because any JavaScript code can passed to the TypeScript compiler.

So it's sort of a Layer on top of JavaScript. So, of course the underlaying Layer (JavaScript) can be passed through the layers to the top (TypeScript), but not the other way around.

Why not?

Think of it as a bike (JavaScript) and a motorcycle (TypeScript). The basics are the same (two wheels, a frame), but the motorcycle as an engine and some enhanced features.

So, you can use your motorcycle (TypeScript) as a bike (JavaScript), but you cannot use a bike as a motorcycle.

EDIT:

If your compiler throws a warning, why does it make the statement wrong? It just says: Hey, you are using TypeScript, and it's more strict than what you gave me.

See this example, it compiles perfectly to JavaScript, but throws a warning.