style: strong type

alibaba · Jun 27, 2023 · 81489f3 · 81489f3
1 parent c5d7cc4
commit 81489f3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/hooks/src/useFavicon/__tests__/index.test.tsx b/packages/hooks/src/useFavicon/__tests__/index.test.tsx
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import useFavicon from '../index';
+import useFavicon, { HrefType } from '../index';
 
 describe('useFavicon', () => {
   it('should set the favicon', () => {
@@ -9,7 +9,7 @@ describe('useFavicon', () => {
   });
 
   it('should support svg/png/ico/gif', () => {
-    const { rerender } = renderHook((url: string) => useFavicon(url));
+    const { rerender } = renderHook((url: HrefType) => useFavicon(url));
     const suffixs = ['svg', 'png', 'ico', 'gif'];
     const imgTypeMap = {
       svg: 'image/svg+xml',
@@ -18,7 +18,7 @@ describe('useFavicon', () => {
       png: 'image/png',
     };
     suffixs.forEach((suffix) => {
-      const url = `favicon.${suffix}`;
+      const url: HrefType = `favicon.${suffix as 'svg' | 'png' | 'ico' | 'gif'}`;
       rerender(url);
       const link = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
       expect(link).toHaveAttribute('type', imgTypeMap[suffix]);

diff --git a/packages/hooks/src/useFavicon/demo/demo1.tsx b/packages/hooks/src/useFavicon/demo/demo1.tsx
@@ -8,13 +8,14 @@
 
 import React, { useState } from 'react';
 import { useFavicon } from 'ahooks';
+import { HrefType } from '..';
 
 export const DEFAULT_FAVICON_URL = 'https://ahooks.js.org/simple-logo.svg';
 
 export const GOOGLE_FAVICON_URL = 'https://www.google.com/favicon.ico';
 
 export default () => {
-  const [url, setUrl] = useState<string>(DEFAULT_FAVICON_URL);
+  const [url, setUrl] = useState<HrefType>(DEFAULT_FAVICON_URL);
 
   useFavicon(url);
 

diff --git a/packages/hooks/src/useFavicon/index.ts b/packages/hooks/src/useFavicon/index.ts
@@ -9,7 +9,11 @@ const ImgTypeMap = {
 
 type ImgTypes = keyof typeof ImgTypeMap;
 
-const useFavicon = (href: string) => {
+export type HrefType = `${string}.${any extends ImgTypes | Lowercase<ImgTypes>
+  ? ImgTypes | Lowercase<ImgTypes>
+  : null}`;
+
+const useFavicon = (href: HrefType) => {
   useEffect(() => {
     if (!href) return;