工具: 使用类型导入校验

.eslintignore

@@ -7,3 +7,7 @@ public
 scripts
 coverage
 .github
+.eslintrc.js
+commitlint.config.js
+.cz-config.js
+.prettierrc.js

.eslintrc.js

@@ -4,19 +4,31 @@ module.exports = {
     node: true,
     browser: true,
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:prettier/recommended',
+  ],
   plugins: ['@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    parser: '@typescript-eslint/parser',
     ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
   },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/unbound-method': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'warn',
+    '@typescript-eslint/no-unsafe-argument': 'warn',
+    '@typescript-eslint/no-unsafe-member-access': 'warn',
+    '@typescript-eslint/no-unsafe-return': 'warn',
+    '@typescript-eslint/no-unsafe-call': 'warn',
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-empty-function': 'warn',

example/example.tsx

@@ -1,4 +1,5 @@
-import { Autobind, ComponentProps, Mut, VueComponent, VueService } from 'vue3-oop'
+import type { ComponentProps } from 'vue3-oop'
+import { Autobind, Mut, VueComponent, VueService } from 'vue3-oop'
 import { onBeforeUnmount } from 'vue'
 
 class PositionService extends VueService {

example/focus.directive.ts

@@ -1,4 +1,4 @@
-import { Directive } from 'vue'
+import type { Directive } from 'vue'
 
 export const focusDirective: Directive = {
   mounted(el: HTMLInputElement, binding) {

example/form.tsx

@@ -0,0 +1 @@
+export {}

package.json

@@ -67,7 +67,7 @@
     "@vitest/ui": "^0.1.19",
     "@vue/test-utils": "^2.0.0-rc.18",
     "@vue3-oop/plugin-vue-jsx": "^1.4.0",
-    "ant-design-vue": "^3.0.0-alpha.11",
+    "ant-design-vue": "^3.0.0-beta.8",
     "autobind-decorator": "^2.4.0",
     "c8": "^7.11.0",
     "commitizen": "^4.2.4",

src/decorators/computed.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { Hanlder } from '../type'
+import type { Hanlder } from '../type'
 import { createDecorator, getProtoMetadata } from './util'
 
 export const Computed: ComputedDecorator = createDecorator('Computed')

src/decorators/hook.ts

@@ -12,7 +12,7 @@ import {
   onUnmounted,
   onUpdated,
 } from 'vue'
-import { Hanlder } from '../type'
+import type { Hanlder } from '../type'
 import { createDecorator, getProtoMetadata } from './util'
 
 type Lifecycle =

src/decorators/link.ts

@@ -1,5 +1,5 @@
 import { getCurrentInstance } from 'vue'
-import { Hanlder } from '../type'
+import type { Hanlder } from '../type'
 import { createDecorator, getProtoMetadata } from './util'
 
 export const Link: LinkDecorator = createDecorator('Link')

src/decorators/mut.ts

@@ -1,5 +1,6 @@
-import { customRef, Ref, ref, shallowRef } from 'vue'
-import { Hanlder } from '../type'
+import type { Ref } from 'vue'
+import { customRef, ref, shallowRef } from 'vue'
+import type { Hanlder } from '../type'
 import { createDecorator, getProtoMetadata } from './util'
 
 export const Mut: MutDecorator = createDecorator<MutOptions>('Mut')

src/di/index.ts

@@ -1,14 +1,7 @@
-import {
-  ClassProvider,
-  Injectable,
-  InjectionToken,
-  Provider,
-  ReflectiveInjector,
-  ResolvedReflectiveProvider,
-  SkipSelf,
-  TypeProvider,
-} from 'injection-js'
-import { getCurrentInstance, inject, InjectionKey, provide } from 'vue'
+import type { ClassProvider, Provider, ResolvedReflectiveProvider, TypeProvider } from 'injection-js'
+import { Injectable, InjectionToken, ReflectiveInjector, SkipSelf } from 'injection-js'
+import type { InjectionKey } from 'vue'
+import { getCurrentInstance, inject, provide } from 'vue'
 import { createSymbol } from '../helper'
 
 export const InjectorKey: InjectionKey<ReflectiveInjector> = createSymbol('VUE3-OOP_ReflectiveInjector') as symbol

src/extends/component.ts

@@ -1,15 +1,14 @@
-import {
+import type {
   AllowedComponentProps,
   ComponentOptions,
   ComponentPublicInstance,
-  getCurrentInstance,
   InjectionKey,
-  provide,
   VNodeChild,
   VNodeProps,
 } from 'vue'
+import { getCurrentInstance, provide } from 'vue'
 import { getEmitsFromProps, useCtx, useProps } from '../helper'
-import { Hanlder, VueComponentStaticContructor, WithSlotTypes, WithVModel, WithVSlots } from '../type'
+import type { Hanlder, VueComponentStaticContructor, WithSlotTypes, WithVModel, WithVSlots } from '../type'
 import { MutHandler } from '../decorators/mut'
 import { ComputedHandler } from '../decorators/computed'
 import { HookHandler } from '../decorators/hook'
@@ -32,7 +31,7 @@ export abstract class VueComponent<T extends {} = {}> {
   static handler: Hanlder[] = [MutHandler, ComputedHandler, LinkHandler, HookHandler]
   /** 是否自定义解析组件 */
   static resolveComponent = resolveComponent
-  private static __vccOpts__value?: ComponentOptions
+  static __vccOpts__value?: ComponentOptions
   /** 组件option定义,vue3遇到类组件会从此属性获取组件的option */
   static __vccOpts: ComponentOptions
   /** 是否作为全局store提供外部入口，此时会在 当前app上注入2个方法，用于获取此组件的服务 */

src/extends/service.ts

@@ -2,7 +2,7 @@ import { MutHandler } from '../decorators/mut'
 import { ComputedHandler } from '../decorators/computed'
 import { HookHandler } from '../decorators/hook'
 import { provide } from 'vue'
-import { Hanlder, VueComponentStaticContructor } from '../type'
+import type { Hanlder, VueComponentStaticContructor } from '../type'
 import { LinkHandler } from '../decorators/link'
 
 export const ProviderKey = 'ProviderKey' as const

src/helper.ts

@@ -1,4 +1,5 @@
-import { getCurrentInstance, inject, InjectionKey, SetupContext } from 'vue'
+import type { InjectionKey, SetupContext } from 'vue'
+import { getCurrentInstance, inject } from 'vue'
 import autobind from 'autobind-decorator'
 
 /**
@@ -12,10 +13,10 @@ export function useProps<T>() {
   const instance = getCurrentInstance()
   return instance?.props as T
 }
-export function useCtx(): SetupContext {
+export function useCtx() {
   const instance = getCurrentInstance()
   // @ts-ignore
-  return instance?.setupContext
+  return instance?.setupContext as SetupContext
 }
 export function getCurrentApp() {
   return getCurrentInstance()?.appContext.app

src/type.ts

@@ -1,4 +1,4 @@
-import { ComponentOptions, ComponentPublicInstance, InjectionKey, Prop, SetupContext, VNodeChild } from 'vue'
+import type { ComponentOptions, ComponentPublicInstance, InjectionKey, Prop, SetupContext, VNodeChild } from 'vue'
 
 export interface VueComponentStaticContructor {
   new (...args: any[]): ComponentPublicInstance<any, any, any, any, any>

test/component.test.tsx

@@ -1,6 +1,7 @@
 import '@abraham/reflection'
 import { expect, test } from 'vitest'
-import { ComponentProps, VueComponent } from 'vue3-oop'
+import type { ComponentProps } from 'vue3-oop'
+import { VueComponent } from 'vue3-oop'
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'