Why is React source code written in JavaScript instead of TypeScript, but still has types?

Question

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

What's more is, in those .js files, they are actually using TypeScript syntax, including types and everything.

Is this some kind of high-level magic?

Here's an image of VS Code showing errors

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 — Jayce444
– Jayce444, Commented May 26, 2021 at 10:03
@Jayce444, I'm pretty sure react is written in Flow, not Typescript. Flow files do use the .js extension by default. — Evert
– Evert, Commented May 26, 2021 at 16:11
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) — ShamPooSham
– ShamPooSham, Commented May 31, 2021 at 9:43

Christian Vincenzo Traina · Accepted Answer · 2021-05-26 14:49:19Z

2

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

edited May 26, 2021 at 14:49

answered May 26, 2021 at 10:14

Christian Vincenzo Traina

10.6k4 gold badges45 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ff_lol Over a year ago

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?

ff_lol Over a year ago

oh for 1: probably they were originally using Flow?

Christian Vincenzo Traina Over a year ago

@ff_lol 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

jonrsharpe · Accepted Answer · 2024-10-27 14:21:44Z

0

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, VS Code doesn't understand what it is and just reports a bunch of bugs.

answered Oct 27, 2024 at 14:21

community wiki

jonrsharpe

Collectives™ on Stack Overflow

Why is React source code written in JavaScript instead of TypeScript, but still has types?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related