ウェブサイト検索

TypeScript - なぜ <T extends { [K in keyof T]?: string }={}> を使うのですか?なぜ直接 <T> を使わないのですか?


なぜ <T extends { [K in keyof T]?: string }={}> なのですか?なぜ直接 <T> を使わないのですか?

    function useQuery<T extends { [K in keyof T]?: string } = {}>(): { [K in keyof T]?: string } {
      const location = useLocation()
      const searchStr = location.search.split('?')[1]
      // 参数对象
      let params: any = {}
      if (searchStr) {
        const searchArr = searchStr.split('&')
        searchArr.forEach((item) => {
          let key = item.split('=')[0]
          let value = item.split('=')[1]
          if (key && value) {
            params[key] = value
          }
        })
      }
      const [query] = useState<{ [K in keyof T]?: string }>(params)
    
      return query
    }
    
    const { id } = useQuery<{ id: string }>()   

回答 #1

これにより、型 T の各キーの値が string であることが保証されます。

例えば、もし T が { a: 1 } であれば、制約は { a?: string } にマッピングされます。{ a: 1 } は { a?: string } のサブタイプではないため、コンパイラはそれを拒否します。

一方で、もし T が { b: 'some literal' } の場合、その制約は { b?: string } にマッピングされます。{ b: 'some literal' } は { b?: string } のサブタイプであるため、コンパイラはこれを受け入れます。