why is React source code written in JavaScript instead of TypeScript, but still have types?

Question

I'm reading through the React source code recently, and just found all the files are .js instead of .ts

what blows up my mind more is, in those .js files, they are actually using TypeScript syntax, including types and everything...

this could be super ignorant, but is this some kind of high-level black magic?

here's an image of my vsCode freaked out with me...

---

---

answering my own question several days later: (thanks to @Evert)

just in case anyone else has the same question in the future, React source code is written in Flow. the file extension is still .js, and there are types in those files. if Flow isn't installed, vsCode doesn't understand what it is and just reports a bunch of bugs...

Whittemore

Yes. 1,000 years ago a wizard cast a powerful spell, and said that in a millenium, all JS files shall have the option of being interpreted as TS files, if they so choose. And thus it was........seriously though, file extensions aren't as meaningful as you think. They're just used as labels so that computers have a hint as to what kind of file something might be. A PDF file given a .rofl extension is STILL a PDF. Literally nothing has changed for its content. If you tell a webapp tool to treat JS as TS files, then it will do so, applying the syntax checks and so on – Spahi

@Spahi thanks, that explains a lot – Whittemore

@Jayce444, I'm pretty sure react is written in Flow, not Typescript. Flow files do use the .js extension by default. – Unarmed

React uses Flow. Instead of having its own extension, it specifies that it's Flow by having a @flow tag in the beginning of the file (within a comment) – Illfated

Answer 1

You can stick types to JavaScript code, that's named "TypeScript Type Declaration", and the extension is .d.ts. When TypeScript (or also an editor with intellisense) sees a javascript file and a .d.ts file with the same name, it will import the type definitions from that file.

There's a project that aims to provide type definitions for every JavaScript library, maybe you've heard talking about DefinitelyTyped.

For example:

// example.js
function hello(name) {
  console.log(`Hello ${name}!`);
}


// example.d.ts
function hello(name: string);


// main.ts
import { hello } from 'example';
hello(42); // Error! "name" must be a string

The same system has been used to provide types in React

Puttee

right, good explanation, thanks a lot. follow up questions (if I may): 1. do you have any idea why the React team chose to use TypeScript but in .js file extension? what's the benefit of this, instead of just use .ts ? 2. any idea how to set up vsCode so it doesn't freak out seen TS syntax in .js file? – Whittemore

oh for 1: probably they were originally using Flow? – Whittemore

@Whittemore you can use a JavaScript library in a TypeScript project, but you cannot use a TypeScript library in a JavaScript project. If you want to use React without TypeScript, you can! And you don't need any build – Puttee