主页 / user-214446

mb21's questions

Martin Hope
mb21
Asked: 2024-10-01 19:14:38 +0800 CST
  • 7

在下面简化的我的问题的示例中：

const factory = <T extends unknown[]>(
  fn: (...args: T) => void
) => {
  const transformedFn = (...args: T) => {
    console.log('called with', ...args)
    return fn(...args)
  }

  // init
  transformedFn() // TypeScript error here

  return transformedFn
}

// usage:
const fn = (num?: number, str?: string) => {
  return JSON.stringify({ num, str })
}
factory(fn)()

我收到 TypeScript 错误：

类型“[]”的参数不能分配给类型“T”的参数。“[]”可以分配给类型“T”的约束，但“T”可以用约束“unknown[]”的不同子类型来实例化。

操场

令人困惑的是，这是有效的：

const fn = <T extends unknown[]>(...args: T) => {
  return args
}
fn()

我如何才能让 TypeScript 相信T在两种情况下它是相同的？

typescript
Martin Hope
mb21
Asked: 2024-09-22 16:29:51 +0800 CST
  • 5

我正在尝试实现一个极简的类型安全函数，该函数针对类型化的服务器 API 执行 HTTP 请求，但类型问题让我很头疼。具体来说，如何使第三个参数（HTTP 请求负载）对于GET和请求为可选，同时对于和DELETE为经过验证且非可选。POSTPUT

一个简化的示例（TypeScript 游乐场）：

export type Method = 'GET' | 'DELETE' | 'POST' | 'PUT'

// attempt 1:
const httpRequest1 = <M, D>(method: M, url: string, data?: D) =>
  'not implemented yet' as any


// attempt 2:
type HttpRequest <M extends Method, D, R=unknown> = M extends 'GET' | 'DELETE'
  ? (method: M, url: string) => Promise<R>
  : (method: M, url: string, data: D) => Promise<R>

const httpRequest2: HttpRequest = (method, url, data) =>
  'not implemented yet' as any


// expected usage:
interface Data {
  title: string;
}
httpRequest<'POST', Data>('POST', '/', { title: 'test' }) // should typecheck
httpRequest<'POST', Data>('POST', '/', { titleoops: 'test' }) // should NOT typecheck
httpRequest<'POST', Data>('POST', '/') // should NOT typecheck
httpRequest<'GET', undefined>('GET', '/') // should typecheck

我从来没有同时按照预期对全部四个条件进行类型检查。至少有一个条件总是不成立。

编辑：如果您好奇，完整的用例，已使用工作解决方案进行了更新。

typescript
Martin Hope
mb21
Asked: 2024-05-08 01:08:10 +0800 CST
  • 6

我有以下生成器函数：

async function * filterIterable (iter, predicate) {
  let i = 0
  for await (const val of iter) {
    if (predicate(val, i++)) {
      yield val
    }
  }
}

我想针对以下两种情况输入：

// type predicate
const nonNullable = <T>(val: T | undefined | null): val is T =>
  val !== undefined && val !== null

async function * gen1 () {
  yield 1
  yield 2
  yield 3
}

async function * gen2 () {
  yield 1
  yield undefined
  yield 3
}

const it1 = filterIterable(gen1(), n => n % 2 === 0)
const it2 = filterIterable(gen2(), nonNullable) // should be AsyncIterable<1 | 2>

我想出了这个界面：

interface FilterIterable {
  <T> (
    iter: AsyncIterable<T>,
    predicate: (val: T, index: number) => boolean,
  ): AsyncIterable<T>;
  <T, S extends T> (
    iter: AsyncIterable<T>,
    predicate: (val: T, index: number) => val is S,
  ): AsyncIterable<S>;
}

我可以将其应用于函数表达式，但显然不适用于如何将函数类型应用于函数声明的函数声明。这不就是生成器吗？

typescript
Martin Hope
mb21
Asked: 2023-08-28 20:59:25 +0800 CST
  • 5

考虑这个片段（游乐场）：

<textarea onInput={event => {
  console.log(event.key) // TypeScript error and undefined at runtime
  setState(event.currentTarget.value)
}} />

我想检测用户是否按下了 Enter 键或 Shift-Enter 键。

浏览器本机事件具有key和shiftKey属性，而 Solid 事件中没有这些属性。我也找不到与 React 的event.nativeEvent属性相当的东西。

我真的需要使用useKeyDownEvent吗？onInput不过，当在文本区域内使用该方法时，该方法似乎会遇到竞争条件......

keyboard-events