🐞 Bug: Types werden teilweise nicht korrekt aufgelöst

[Chrisdo82]

Note

• [x] Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgebe.

---

Fehlermeldung

Beschreibung des Fehlers

Der type von der Property _links der KolBreadcrumb Komponente wird nicht korrekt aufgelöst. Stattdessen wird nach any gecastet.

Reproduktion

• Link zu StackBlitz: https://stackblitz.com/edit/vitejs-vite-9dki46?file=src%2FApp.tsx

Schritte zum Reproduzieren des Verhaltens:

• hovere über die _link-Property in der App.tsx Zeile 9.

Erwartetes Verhalten

Der Type wird korrekt aufgelöst.

Screenshots

[deleonio]

Danke @Chrisdo82: Das ist aber bei Version 1.5 und 1.6 auch so.

https://stackblitz.com/edit/vitejs-vite-9dki46?file=src%2FApp.tsx

Gab es irgendein nennenswertes Vite-Update? Oder liegt es an der tsconfig.json? Wir verwenden Webpack, da ist alles i.O.

Hier unser JS-Days Projekt: https://github.com/public-ui/js-days-2023 (Vite + selber Problem)

Hier den tsconfig.json von Webpack:

{
	"compilerOptions": {
		"experimentalDecorators": true,
		"pretty": true,
		"target": "ESNext",
		"module": "ESNext",
		"preserveConstEnums": true,
		"sourceMap": true,
		"preserveSymlinks": true,
		"moduleResolution": "node",
		"lib": ["es2017", "dom"],
		"types": ["node", "react", "react-dom"],
		"typeRoots": ["node_modules/@types", "src/types"],
		"noUnusedLocals": true,
		"resolveJsonModule": true,
		"noEmit": true,
		"skipLibCheck": true,
		"noUnusedParameters": true,
		"noImplicitReturns": true,
		"noFallthroughCasesInSwitch": true,
		"forceConsistentCasingInFileNames": true,
		"importHelpers": true,
		"removeComments": true,
		"strict": true,
		"allowSyntheticDefaultImports": true,
		"jsx": "react",
		"jsxFactory": "React.createElement",
		"jsxFragmentFactory": "React.Fragment"
	},
	"include": ["src/**/*"]
}

Hier die tsconfig.json von Vite:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[deleonio]

@sdvg bitte mal reproduzieren und das Ergebnis dokumentieren.

[laske185]

Todo:

• [ ] Nachprüfen
• [ ] Bei Problemen neues Ticket anlegen

[sdvg]

Ich habe den StackBlitz testweise einmal auf die neueste KoliBri-Version aktualisiert: https://stackblitz.com/edit/vitejs-vite-dcajnp

Ergebnis: Stackblitz und ein lokales, frisch installiertes VS Code lösen die Types nicht richtig auf 🙅 Der Build funktioniert jedoch einwandfrei und Intellij IDEA hat keine Probleme, die Types aufzulösen ✅

[deleonio]

@Chrisdo82, @mello-r,

ich habe mir das Beispiel jetzt auch noch einmal ausgecheckt und unter Windows einmal im VSCode und einmal im Intellij geöffnet.

• VSCode löst die Typen nicht immer auf
• Intellij löst hingegen die Typen auf

[Chrisdo82]

@sdvg @deleonio Ist übrigens nicht nur bei BreadcrumbLinkProps so, sondern auch bei MsgPropType.

Ohne es mir genauer anzusehen, vermute ich, dass es an den adopted-style-sheets liegt. Diese werden nicht mit exportiert, TS kann da somit nicht reinschauen und castet diese dann als any.

[deleonio]

@Chrisdo82: Ich schaue mir das an. Dann würde ich mich gerne mit Dir zusammentelefonieren.

Man muss halt alle Types installieren, die man im Projekt hat. Die Generics sind auf jeden Fall im adopted-style-sheets

[deleonio]

@Chrisdo82 Ich habe mir das Beispiel jetzt genau angeschaut und die Abhängigkeit adopted-style-sheets als devDependency hinzugefügt. Daraufhin wir any tatsächlich aufgelöst.

Da adopted-style-sheets die Generics beinhaltet, die das Architektur-Konzept der WebComponents vorgibt, können die Types aus KoliBri nicht aufgelöst werden. Wir werden somit adopted-style-sheets erstmal als peerDependency hinzufügen.

Hier sind alle Deps auf den neusten Stand: https://stackblitz.com/edit/vitejs-vite-huwv6a?file=src%2Freact.main.tsx,package.json,src%2Fstyle.scss