appUse.test-d.ts 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { type App, type Plugin, createApp, defineComponent } from 'vue'
  2. const app = createApp({})
  3. // Plugin without types accept anything
  4. const PluginWithoutType: Plugin = {
  5. install(app: App) {},
  6. }
  7. app.use(PluginWithoutType)
  8. app.use(PluginWithoutType, 2)
  9. app.use(PluginWithoutType, { anything: 'goes' }, true)
  10. type PluginOptions = {
  11. option1?: string
  12. option2: number
  13. option3: boolean
  14. }
  15. const PluginWithObjectOptions = {
  16. install(app: App, options: PluginOptions) {
  17. options.option1
  18. options.option2
  19. options.option3
  20. },
  21. }
  22. for (const Plugin of [
  23. PluginWithObjectOptions,
  24. PluginWithObjectOptions.install,
  25. ]) {
  26. // @ts-expect-error: no params
  27. app.use(Plugin)
  28. // @ts-expect-error option2 and option3 (required) missing
  29. app.use(Plugin, {})
  30. // @ts-expect-error type mismatch
  31. app.use(Plugin, undefined)
  32. // valid options
  33. app.use(Plugin, { option2: 1, option3: true })
  34. app.use(Plugin, { option1: 'foo', option2: 1, option3: true })
  35. }
  36. const PluginNoOptions = {
  37. install(app: App) {},
  38. }
  39. for (const Plugin of [PluginNoOptions, PluginNoOptions.install]) {
  40. // no args
  41. app.use(Plugin)
  42. // @ts-expect-error unexpected plugin option
  43. app.use(Plugin, {})
  44. // @ts-expect-error only no options is valid
  45. app.use(Plugin, undefined)
  46. }
  47. const PluginMultipleArgs = {
  48. install: (app: App, a: string, b: number) => {},
  49. }
  50. for (const Plugin of [PluginMultipleArgs, PluginMultipleArgs.install]) {
  51. // @ts-expect-error: 2 arguments expected
  52. app.use(Plugin, 'hey')
  53. app.use(Plugin, 'hey', 2)
  54. }
  55. const PluginOptionalOptions = {
  56. install(
  57. app: App,
  58. options: PluginOptions = { option2: 2, option3: true, option1: 'foo' },
  59. ) {
  60. options.option1
  61. options.option2
  62. options.option3
  63. },
  64. }
  65. for (const Plugin of [PluginOptionalOptions, PluginOptionalOptions.install]) {
  66. // both version are valid
  67. app.use(Plugin)
  68. app.use(Plugin, undefined)
  69. // @ts-expect-error option2 and option3 (required) missing
  70. app.use(Plugin, {})
  71. // valid options
  72. app.use(Plugin, { option2: 1, option3: true })
  73. app.use(Plugin, { option1: 'foo', option2: 1, option3: true })
  74. }
  75. // still valid but it's better to use the regular function because this one can accept an optional param
  76. const PluginTyped: Plugin<PluginOptions> = (app, options) => {}
  77. // @ts-expect-error: needs options
  78. app.use(PluginTyped)
  79. app.use(PluginTyped, { option2: 2, option3: true })
  80. // vuetify usage
  81. const key: string = ''
  82. const aliases: Record<string, any> = {}
  83. app.component(
  84. key,
  85. defineComponent({
  86. ...aliases[key],
  87. name: key,
  88. aliasName: aliases[key].name,
  89. }),
  90. )