vscode svg-deklarasjonsfil løst i stedet for svg-filbane med react-native og typescript

Spørsmål

Finnes det en måte å få Visual Studio Code (VScode) til å løse en svg-fil med dens stiplassering i stedet for plasseringen til declaration.d.ts-filen?

Bakgrunn

Problemet har dukket opp i alle personlige og arbeidsrelaterte react-native-prosjekter som bruker typescript og svgs. Dette problemet har eksistert i årevis...

Problemet:

Svgs løser seg ikke til sin definisjonsplassering når de får en deklarasjon. I stedet løser de seg til sine typedeklarasjoner

Dette skjer bare med en SVG-deklarasjonsfil som brukes for å løse typescript-feil ved SVG-importer. Uten denne deklarasjonen vil vscode korrekt referere til assets/svg/close.svg-filen i stedet for declaration.d.ts-filen, og det gir en typefeil for den importerte filen.

Eksempel

import Close from '../../../assets/svg/close.svg'

Klikking på "gå til definisjon" for '../../../assets/svg/close.svg' vil vise deklarasjonen.

declarations.d.ts

declare module '*.svg' {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'
  const content: React.FC<SvgProps>
  export default content
}

tsconfig.json-fil. Merk at typeRoots src/types er plasseringen av declaration.d.ts-filen som legger til svg-deklarasjonen.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "typeRoots": ["./src/types", "node_modules/@types"],
    "baseUrl": ".",
    "composite": true,
    "declarationMap": true,
    "paths": {
      "assets/*": ["src/assets/*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Eksempel på visuelt navigasjons høyreklikkmeny. Filen kan også åpnes ved å trykke CMD + klikke på den.

  • Alternativet for å gå til definisjon bør alltid løse filstien. I stedet løser det deklarasjonsfilen vist ovenfor.
  • Alternativet Gå til Type-definisjon vil åpne React.Element-filen.

Relaterte artikler