test: test types in module and fixtures

.github/workflows/ci.yml

@@ -45,6 +45,7 @@ jobs:
       - run: pnpm lint
       - run: pnpm test
       - run: pnpm build
+      - run: pnpm test:types
       - run: pnpm dev:build
       - name: Release Edge
         if: |

package.json

@@ -21,7 +21,8 @@
     "lint": "eslint --ext .ts --ext .vue .",
     "prepack": "pnpm build",
     "release": "pnpm test && standard-version && git push --follow-tags && npm publish",
-    "test": "nuxi prepare playground && pnpm vitest run"
+    "test": "nuxi prepare playground && pnpm vitest run",
+    "test:types": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck example"
   },
   "dependencies": {
     "@nuxt/kit": "^3.5.1",
@@ -50,7 +51,8 @@
     "playwright": "^1.34.3",
     "standard-version": "latest",
     "typescript": "5.0.4",
-    "vitest": "^0.30.1"
+    "vitest": "^0.30.1",
+    "vue-tsc": "^1.6.5"
   },
   "optionalDependencies": {
     "ipx": "1.1.0"

src/runtime/components/_base.ts

@@ -32,12 +32,12 @@ export const baseImageProps = {
   crossorigin: {
     type: [Boolean, String] as unknown as () => 'anonymous' | 'use-credentials' | boolean,
     default: undefined,
-    validator: val => ['anonymous', 'use-credentials', '', true, false].includes(val)
+    validator: (val: any) => ['anonymous', 'use-credentials', '', true, false].includes(val)
   },
   decoding: {
     type: String as () => 'async' | 'auto' | 'sync',
     default: undefined,
-    validator: val => ['async', 'auto', 'sync'].includes(val)
+    validator: (val: any) => ['async', 'auto', 'sync'].includes(val)
   }
 }
 
@@ -73,7 +73,7 @@ export const useBaseImage = (props: ExtractPropTypes<typeof baseImageProps>) =>
   })
 
   const attrs = computed<BaseImageAttrs>(() => {
-    return <BaseImageAttrs>{
+    return <BaseImageAttrs> {
       width: parseSize(props.width),
       height: parseSize(props.height),
       alt: props.alt,

src/runtime/components/nuxt-img.ts

@@ -26,7 +26,7 @@ export default defineComponent({
       'data-nuxt-img'?: string
     }
 
-    const sizes = computed(() => $img.getSizes(props.src, {
+    const sizes = computed(() => $img.getSizes(props.src!, {
       ..._base.options.value,
       sizes: props.sizes,
       modifiers: {
@@ -55,7 +55,7 @@ export default defineComponent({
         ? placeholder
         : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number]
 
-      return $img(props.src, {
+      return $img(props.src!, {
         ..._base.modifiers.value,
         width: size[0],
         height: size[1],
@@ -66,7 +66,7 @@ export default defineComponent({
     const mainSrc = computed(() =>
       props.sizes
         ? sizes.value.src
-        : $img(props.src, _base.modifiers.value, _base.options.value)
+        : $img(props.src!, _base.modifiers.value, _base.options.value)
     )
 
     const src = computed(() => placeholder.value ? placeholder.value : mainSrc.value)

src/runtime/composables.ts

@@ -1,5 +1,6 @@
+import { $Img } from '../types'
 import { useNuxtApp } from '#imports'
 
 export const useImage = () => {
-  return useNuxtApp().$img
+  return useNuxtApp().$img as $Img
 }

src/runtime/ipx.ts

@@ -16,7 +16,7 @@ export default lazyEventHandler(() => {
   const middleware = createIPXMiddleware(ipx)
 
   return eventHandler(async (event) => {
-    event.node.req.url = withLeadingSlash(event.context.params._)
+    event.node.req.url = withLeadingSlash(event.context.params!._)
     await middleware(event.node.req, event.node.res)
   })
 })

tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": [
+    "dist",
+    "playground",
+    "docs"
+  ]
 }