It all started on the evening of April 7th, when You Tweeted that Vue2 had received a PR to move the entire code base to TypeScript.

Take a look at Chore on Github: Move to typescript This PR is basically a 10W line of code change that moves the entire Vue2 code base from flow to typescript, including the code, build system, various Lint tools, and so on.

The contributor to this PR is Carlos Rodrigues, who introduces himself below:

Fullstack developer, interested in @vuejs, @dotnet and @nodejs.

The Typescript 🧙 came ️

Consultant 🕵 ️ came ️

Full stack development engineer, Vue. Js, dotnet, Node.js fan.

TypeScript Wizard 🧙♂️

Consultant 🕵 ️ came ️.

The origin of

Why did Vue2 initially choose Flow as its type system? In a 2016 question, why does Vue 2.0 use Flow for static code checking instead of TypeScript? Yu Has elaborated on this question, and here is what he had to say:

The most fundamental choice is the cost and benefit of the project.

Vue 2.0 itself was written in ES2015 during the initial rapid iteration phase, and the entire build chain follows Vue 1.x’s ES-based ecosystem (Babel, ESLint, Webpack, Rollup…). , all replacement TS cost is too high, not realistic in the short term.

Flow, by contrast, has very low in-and-out costs for existing ES2015 code:

  1. You can migrate file by file, you don’t have to do it all at once.
  2. Both Babel and ESLint have corresponding Flow plugins to support the syntax and can use the existing build configuration entirely;
  3. Closer to the ES specification. Except for the Flow type declaration, everything else is standard ES. If you don’t want to use Flow any more, use babel-plugin-transform-flow-strip-types to get ES of the specification.
  4. Retain the flexibility of ES where needed, with better control over the size of the generated code (rollup/custom Babel plug-in)

In 2018, however, the university updated its answer, repeating the law of true fragrance:

This is why Vue3 chose TypeScript as its type system from the start.

troubled

So why bother to move so much code to TypeScript when Vue2 is already stable? Vue 2.7 will add some features that are more similar to Vue3 syntax:

  • Incorporate the @vue/ composition-API plugin into Vue2. This will allow libraries developed using the Composition API to support both Vue2 and Vue3.
  • Script Setup syntax in single-file components (SFC).
  • emitsOptions.
  • Improve TypeScript type support.
  • Official support for Vue 2 in Vite (currently via unofficial plug-ins)

The development and adaptation of these features, if continued with Flow, will inevitably lead to a somewhat fragmented development experience. Some libraries already developed with TS are also unable to do code merging. In fact, someone on Twitter asked the same question, and the PR writer answered it:

In short, this is to prepare for the development of Vue 2.7, especially the comic-API code consolidation.

The specific content

Here’s the author’s brief description of the update:

  1. Code formatting style updated.
  2. Refactoring.
  3. Build related changes.
  4. Code base updates are written in TypeScript.

It is worth mentioning that the size of the generated code increases slightly after the replacement of TS, which is caused by the addition of some Runtime code:

In the first Commit, the author changes the type of the code to.ts, removes the flow flag at the beginning of the file, and replaces the type syntax with TypeScript:

The author uses TS import type syntax to reconstruct the type import. Personally, I also prefer this type import, which is more helpful to distinguish the imported content:

Test tool update, and TS support, using TS-Loader to do compilation:

A major upgrade to RollUp:

ESLint also needs some changes, using @typescript-eslint/parser, and inheriting some recommended presets to @typescript-eslint/eslint-recommended.

TSC –noEmit is also used for TS type checking in CI.

evaluation

The terrible thing is that this huge PR is completed by the author in a few days, and the fighting power is amazing.

One Twitter comment asked, “How long will it take to migrate such a large code base to TypeScript?”

Rename files, rewrite flow types to TS and fix bugs in a few hours, then spend the next few days building and testing related work.

Foreign twitter users were also shocked:

“You are such aThe machine“:

“He lives in a universe where an hour is worth 24 hours, or maybe he isThe speed of lightCoding.”

CamiloR: “It’s great. It’s nice to have people outside the core working so hard.”

Carlos: “I’m part of the core team 😆”

conclusion

Have to sigh, ten times engineer is real… Such a huge code base migration took only a few days, reflecting the author’s familiarity with TS ecology, build, and testing.

Thanks to the Vue core team members for their exaggerated fighting ability, bringing such a great framework to the front end and continuing to iterate and optimize.

Vue 3 is the future, but Vue 2 will not be abandoned either. Vue 2 will be more promising with stronger code portability after migrating to TS.

Thank you for your

My name is SSH, and I am currently working in the Web Infra team of Bytedance. Currently, the team is still short in Beijing, Shanghai, Guangzhou, Shenzhen and Hangzhou (especially Beijing).

I have formed a recruitment community with a good atmosphere, where we can discuss our ideas and questions about the interview. You are also welcome to join and send your resume to me at any time.