Início / user-11196771

K i's questions

Martin Hope
K i
Asked: 2025-04-11 16:35:35 +0800 CST
  • 4

A função axiosGet:

export const axiosGet = async <TData>({
    url,
    params = {},
    onDone,
    onError
}: TypeAxiosArgs<TData>) => {
    
    try {
        const r = await axios.get<TypeAxiosData<TData, typeof params.paginate>>(url, { params })
        let ret
        if (params?.paginate) {
            ret = r.data
        } else {
            ret = r.data.data // <--- causing typescript to scream, check below
        }
        onDone?.(ret)
        return ret
    } catch (e) {
        console.error(e)
        onError?.(e)
    }
}

Os tipos:

export type TypeAxiosArgs<TData> = {
    url: string
    params?: { paginate?: number } & Record<string, any>
    onDone?: (response: TypeAxiosData<TData, undefined>) => void
    onError?: (error: any) => void
}

export type TypeAxiosData<
    TData,
    TPaginate extends number | undefined
> = TPaginate extends undefined
    ? TData
    : {
            data: TData
            meta: {
                from: number
                to: number
                total: number
                last_page: number
            }
      }

Estou recebendo um erro r.data.datase params.paginatefor indefinido

Property 'data' does not exist on type 'TypeAxiosData<TData, number | undefined>'.
  Property 'data' does not exist on type 'TData'.ts(2339)

Sinto que o problema está no axios.getgenérico, que precisa ser algo diferente, mas não consigo descobrir o quê.

Editar: TypeAxiosData corrigido e tentativa de conversão manual.

export const axiosGet = async <TData>({
    url,
    params = {},
    onDone,
    onError
}: TypeAxiosArgs<TData>) => {
    
    try {
        const r = await axios.get<TypeAxiosData<TData, typeof params.paginate>>(url, { params })
        let ret
        if (params?.paginate) {
            ret = r.data as TypeAxiosData<TData, number>
        } else {
            ret = r.data.data as TypeAxiosData<TData, undefined>
        }
        onDone?.(ret)
        return ret
    } catch (e) {
        console.error(e)
        onError?.(e)
    }
}

axiosGet<{ id: number, name: string }>({ url: "", params: { paginate: undefined } })
    .then((result) => {})

O problema que estou tendo é que o tipo de resultado está sendo declarado como:

(parameter) result: {
    id: number;
    name: string;
} | {
    data: {
        id: number;
        name: string;
    };
    meta: {
        from: number;
        to: number;
        total: number;
        last_page: number;
    };
} | undefined

Em vez de:

(parameter) result: {
    id: number;
    name: string;
} | undefined
typescript
Martin Hope
K i
Asked: 2025-04-10 16:29:10 +0800 CST
  • 4

Usando Vite, TypeScript e React. Enfrentando um problema com a importação automática de .d.tsarquivos personalizados no VS Code.

As importações manuais funcionam bem, o .d.tsarquivo é detectado pelo TypeScript. Problema com o VS Code que não detecta importações automáticas para o formato Button.d.ts. O VS Code consegue detectar o .d.tsarquivo e importá-lo automaticamente se eu renomeá-lo para index.d.ts.

Estrutura de pastas:

src/
  ├── components/
  │    ├── Button/
  │    │    ├── Button.tsx
  │    │    └── Button.d.ts

Button.d.ts:

export type TypeButton = {className?:string}

Button.tsx:

import type {TypeButton} from "./Button.d"
const Button = ({className=""}:TypeButton) =>{
    return <button className={className}></button>
}
export default Button

package.json:

{
  "name": "made-you-look",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}

tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "./",
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

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

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true,
        "declaration": true
    },
    "include": ["src"]
}
reactjs