unplugin-auto-import icon indicating copy to clipboard operation
unplugin-auto-import copied to clipboard

RFC: Auto register for types

Open antfu opened this issue 2 years ago • 8 comments

Context:

  • https://github.com/antfu/unplugin-auto-import/pull/60#issuecomment-939341877
  • https://github.com/antfu/vue-global-api/issues/10

For example, it would be great to have common types like Ref, ComputedRef globally available when using the Vue preset. I would expect the API to be like

{
  // auto importing for import
  imports: [
    'vue'
  ],
  // auto importing for types
  types: [
    'vue', // again, we could have presets for it.
    {
      vue: ['Ref', 'ComputedRef']
    }
  ]
}

antfu avatar Oct 09 '21 18:10 antfu

@antfu

Created new branch feat/auto-register-global-types:

  • added types and split resolvedImports on TransformOptions (now has imports and types) on src/types.ts: added also some new stuff to support global types
  • created pickTypes helper function, it is exported on each unplugin to allow import partial preset types or full preset: you can see on playground vite.config.ts file with partial preset for vue using Ref and ComputedRef on HelloWorld sfc
  • added global types for vue, vue-demi, @vue/composition-api, pinia and vuex: we need to review them, maybe I forgot some types/interfaces
  • updated core to handle changes made to the types: with no breaking changes

You can find global types presets stuff on src/global-types directory.

There are some // todo@userquin comments on src/core modules, take a look when you've time.

EDIT: maybe there is a breaking change if someone is using the resolvedImports from TransformOptions.

userquin avatar Oct 10 '21 23:10 userquin

Right now I include global types on d.ts file using:

// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
import type {
  ComputedRef as __ComputedRef,
  Ref as __Ref  
} from 'vue'

declare global {
  type ComputedRef<T> = __ComputedRef<T>
  type Ref<T> = __Ref<T>
  const computed: typeof import('vue')['computed']
  ...
}
export{}

maybe we can use this another approach as suggested on issue on vue-global-api repo (both approaches work in IntelliJ, this latter would simplify the logic to generate the d.ts file and avoid adding redundant imports):

// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
  type ComputedRef<T> = import('vue').ComputedRef<T>
  type Ref<T> = import('vue').Ref<T>
  const computed: typeof import('vue')['computed']
  ...
}
export {}

userquin avatar Oct 10 '21 23:10 userquin

Current approach on IntelliJ:

image

With suggested approach on vue-global-api repo on IntelliJ:

image

userquin avatar Oct 11 '21 00:10 userquin

Pushed some changes:

  • revert changing resolvedImports, included resolvedTypes on TransformOptions
  • use import also for types on dts generation
  • added pinia, vuex and svelte types

userquin avatar Oct 12 '21 12:10 userquin

Will you release a npm package with integrated #118 soon?

jrson83 avatar Jun 01 '22 00:06 jrson83

It's not yet possible to have a .d.ts redirecting a type from another module.

https://stackblitz.com/edit/node-jjgj6g?file=index.ts

I'd consider it as a limitation of TypeScript. If anyone finds a solution, please comment with a fork of the Stackblitz playground and then we could discuss how to implement that. Thanks.

antfu avatar Aug 08 '22 08:08 antfu

According to this: https://gist.github.com/Bnaya/97080f563fa8242e26a041732185a260 it depends to some typescript flag that can (and perhaps should) be disabled?

ennioVisco avatar Sep 03 '22 08:09 ennioVisco

@antfu Maybe I misunderstood, but is this not what you want?

  • https://stackblitz.com/edit/node-v1ncfz?file=imports.d.ts%3AL11
  • https://stackblitz.com/edit/node-v1ncfz?file=global.d.ts%3AL2-L2 (commented out, but works too when L11 in imports.d.ts is commented out)

Both seems to work, at least to my needs:

  • Ref<number> in index.ts has hint type Ref<T> = Ref<any>
  • Cmd+Click directs me to the right place in imports.d.ts or global.d.ts
  • Cmd+Click in imports.d.ts or global.d.ts on V.Ref or import('vue').Ref leads to definitions in Vue.

I'm happy with that.

terran42 avatar Sep 23 '22 05:09 terran42

It's not yet possible to have a .d.ts redirecting a type from another module.

https://stackblitz.com/edit/node-jjgj6g?file=index.ts

I'd consider it as a limitation of TypeScript. If anyone finds a solution, please comment with a fork of the Stackblitz playground and then we could discuss how to implement that. Thanks.

也就是说现阶段想使用依赖的interface或其它类型定义(e.g: Ref),依旧需要通过显示引入的方式么🤔️

KeyToLove avatar Nov 15 '22 06:11 KeyToLove

@terran42 Thanks for trying. But your solution seems to throw away the generics and make them any. I think it's not good enough.

antfu avatar Nov 16 '22 17:11 antfu

@antfu TypeScript 5.0 introduces export type * from '...'. Stable release is scheduled to March 14th. https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/#support-for-export-type

Any chances that type auto-imports could be implemented in the near future after TS 5.0 release?

MKraust avatar Jan 28 '23 21:01 MKraust

dirs 配置的目标文件 中的类型 怎么自动导出

LukerSpringtree avatar Mar 27 '24 05:03 LukerSpringtree