reactjs - การอัปเกรด yarn 2 ดูเหมือนจะทำให้ typescript types เสียหาย ในขณะที่การติดตั้งด้วย yarn 1 ของโปรเจกต์เดียวกันสำเร็จ?

ฉันพยายามอัปเกรด monorepo ของ TypeScript เพื่อใช้งานกับ Yarn 2 แต่เจอปัญหาที่ TypeScript ไม่สามารถตรวจสอบ props บางตัวของ React ได้อีกต่อไป เนื่องจากเรื่องนี้ใช้งานได้ใน Yarn 1.x ฉันคิดว่าน่าจะมี dependencies แบบไม่ชัดเจนบางตัวที่ถูกเพิ่มใน Yarn 1.x แต่ต้องระบุอย่างชัดเจนใน Yarn 2.x หลังจากใช้เวลาหลายชั่วโมงในการดู dependencies ของโปรเจกต์และ node_modules ฉันก็ไม่สามารถระบุได้ว่าต้องเปลี่ยนอะไรใน production repo จึงตัดสินใจสร้างโปรเจกต์ตัวอย่างขึ้นมาเพื่อทำซ้ำปัญหา หวังว่ามีใครสักคนจะสามารถชี้ให้เห็นสิ่งที่ฉันพลาดไป

/lib/component/Button.tsx

import React from "react";
import { Button as MuiButton, ButtonProps as MuiButtonProps } from "@material-ui/core";

type ButtonProps = {
  name: "alice" | "bob";
} & MuiButtonProps;

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps, ref) => {
  const { name, ...other } = props;
  return <MuiButton ref={ref} {...other}>hello {name}, click me</MuiButton>;
});

export default Button;
export type { ButtonProps };

/apps/ts-example/App.jsx

import { Button } from "components";

const App = () => {
  return <Button name="bob" variant="outlined" />;
};

export default App;

เมื่อทุกอย่างถูกติดตั้งผ่าน yarn 1.x แล้ว ฉันสามารถวางเมาส์เหนือ prop "name" และรับข้อมูลประเภทตามที่แสดงด้านล่าง นอกจากนี้ หากมีการส่งค่าของ prop ที่ไม่ใช่ "alice" หรือ "bob" คุณจะได้รับข้อผิดพลาดของประเภทตามที่คาดไว้

หลังจากติดตั้งผ่าน yarn 2.x เมื่อฉันวางเมาส์เหนือ prop "name" ฉันจะเห็นเพียงประเภท "string" (แสดงด้านล่าง) นอกจากนี้ typescript ก็ไม่เคยแจ้งข้อผิดพลาดสำหรับ prop แม้ว่าสิ่งที่ถูกส่งมาไม่ใช่ "alice" หรือ "bob" ซึ่งก็สมเหตุสมผลเพราะดูเหมือนว่า typescript จะไม่เข้าใจคำจำกัดความประเภทนั้นอีกต่อไป

ฉันได้สังเกตว่าฉันสามารถเรียกข้อมูลชนิดกลับมาได้สำหรับ prop "name" หากฉันลบการรวมชนิดกับ MuiButtonProps ในไฟล์ lib/components/Button.jsx อย่างไรก็ตาม สิ่งนี้มีผลทำให้ชนิดไม่รู้จัก prop "base" จากปุ่ม Material-UI พื้นฐาน ด้านล่างนี้คือการกำหนดชนิดที่แก้ไขแล้ว

type ButtonProps = {
  name: "alice" | "bob";
};

ซึ่งส่งผลให้เกิดสิ่งต่อไปนี้:

ฉันหวังว่าปัญหาจะเห็นได้ชัดจากสิ่งที่ฉันสรุปไว้ข้างต้น แต่ถ้ามันไม่เพียงพอ นี่คือรีโพสิตอรีตัวอย่างที่ทำให้เกิดปัญหา https://github.com/jereklas/ts-example

• สาขา "หลัก" คือการติดตั้ง yarn 1.x ที่ทำงานได้
• สาขา "yarn2" เป็นการติดตั้ง yarn 2.x ที่ไม่ทำงาน

คำตอบ #1

ปรากฏว่าไฟล์ yarn.lock ของฉันถูกลบและสร้างขึ้นใหม่ด้วยเวอร์ชัน @material-ui/types ที่ต่างออกไป ซึ่งเป็นสาเหตุของปัญหาทั้งหมดของฉัน มันควรจะเป็น 5.1.0 แต่กลับเป็น 5.1.8

- "@material-ui/types@^5.1.0":
-   version "5.1.0"
-   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
-   integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+ "@material-ui/types@npm:^5.1.0":
+   version: 5.1.8
+   resolution: "@material-ui/types@npm:5.1.8"
+   peerDependencies:
+     "@types/react": "*"
+   peerDependenciesMeta:
+     "@types/react":
+       optional: true
+   checksum: 543af1b4c0ba8c62f6b4a7f64fd17c8b705c4942c62d4971604e07bb207b834fe7bda97f31d223dc448f66673eb39ceb80b151ddb5ad076506fe515360d572ea
+   languageName: node
+   linkType: hard