- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这段带有泛型的代码片段工作得很好( Link to Simple and Working Code )
const state: Record<string, any> = {
isPending: false,
results: ['a', 'b', 'c']
}
const useValue = <T extends {}>(name: string): [T, Function] => {
const value: T = state[name]
const setValue: Function = (value: T): void => {
state[name] = value
}
return [value, setValue]
}
const [isPending, setIsPending] = useValue<boolean>('isPending')
const [results, setResults] = useValue<string[]>('results')
在这里我可以确定 isPending
是一个 bool 值并且 setIsPending
接收一个 bool 值作为参数。同样适用于 results
和 setResults
作为字符串数组。
然后我用另一种方法包装代码 useStore
( Link to Extended Broken Code )
interface UseStore {
state: Record<string, any>
useValue: Function
}
const state: Record<string, any> = {
isPending: false,
results: ['a', 'b', 'c']
}
const useStore = (): UseStore => {
const useValue = <T extends {}>(name: string): [T, Function] => {
const value: T = state[name]
const setValue: Function = (value: T): void => {
state[name] = value
}
return [value, setValue]
}
return { state, useValue }
}
const { useValue } = useStore()
const [isPending, setIsPending] = useValue<boolean>('isPending')
const [results, setResults] = useValue<string[]>('results')
最后两行给我 typescript 错误:Untyped function calls may not accept type arguments.
我怀疑 useStore
接口(interface)有问题,但由于它的动态特性,我想不出更好的解决方案。
如何在使用泛型类型时消除错误以获得正确的类型提示和代码完成?
最佳答案
由于useValue
的类型是Function
,所以传递泛型参数是没有意义的。他们对谁有利?运行时没有得到它们,它们在编译时被删除。编译器无法使用它们,因为 Function
只是一个未类型化的函数,因此没有任何好处。传递类型参数是无用的,并且可以说是一个错误(即用户不期望这是 Function
并且认为它们有一些效果而传递了类型参数)。
删除类型参数并放弃以任何方式键入的假装:
const { useValue } = useStore()
const [isPending, setIsPending] = useValue('isPending')
const [results, setResults] = useValue('results')
更有趣的问题是你为什么要写这样的代码,因为有一种方法可以完全键入这段代码中的所有内容:
const state = {
isPending: false,
results: ['a', 'b', 'c']
}
type State = typeof state;
const useStore = () => {
const useValue = <K extends keyof State>(name: K) => {
const value = state[name]
const setValue = (value: State[K]): void => {
state[name] = value
}
return [value, setValue] as const
}
return { state, useValue }
}
type UseStore = ReturnType<typeof useStore>;
const { useValue } = useStore()
const [isPending, setIsPending] = useValue('isPending')
const [results, setResults] = useValue('results')
上面的版本是完全类型安全的,不需要任何重复的名称或类型(您当然可以将其拆分为多个文件,但根据您的要求,可能需要进行一些重复)。如果这不适用于您的情况,我很想知道原因。
编辑
如果您只想让类型在最后几行运行并在那里有一些类型安全性,您只需要使用泛型指定函数的签名:
interface UseStore {
state: Record<string, any>
useValue: <T,>(name: string) => [T, (value: T)=> void]
}
const state: Record<string, any> = {
isPending: false,
results: ['a', 'b', 'c']
}
const useStore = (): UseStore => {
const useValue = <T,>(name: string): [T, (value: T)=> void] => {
const value: T = state[name]
const setValue = (value: T): void => {
state[name] = value
}
return [value, setValue]
}
return { state, useValue }
}
const { useValue } = useStore()
const [isPending, setIsPending] = useValue<boolean>('isPending')
const [results, setResults] = useValue<string[]>('results')
编辑 - 接口(interface)实现的开放式
您可以将State
定义为接口(interface),因为接口(interface)是开放式的,您可以在需要时添加成员。好处是如果其他人定义了一个名称相同但类型不同的属性,你会得到一个错误
界面状态{
}
// Don't know what is in here, empty object for starters
const state : State = {
} as State
const useStore = () => {
const useValue = <K extends keyof State>(name: K) => {
const value = state[name]
const setValue = (value: State[K]): void => {
state[name] = value
}
return [value, setValue] as const
}
return { state, useValue }
}
type UseStore = ReturnType<typeof useStore>;
const { useValue } = useStore()
interface State { isPending: boolean }
state.isPending = false; // no guarantee people actually intialize, maybe initial value can be passed to useValue ?
const [isPending, setIsPending] = useValue('isPending')
interface State { results: string[] }
state.results = ['a', 'b', 'c'];
const [results, setResults] = useValue('results')
interface State { results: number[] } // some else wants to use results for something else, err
const [results2, setResults2] = useValue('results')
关于javascript - typescript 泛型包装器 : Untyped function calls may not accept type arguments,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55790728/
我在stackoverflow上查过很多类似的问题,比如call.call 1 , call.call 2 ,但我是新人,无法发表任何评论。我希望我能找到关于 JavaScript 解释器如何执行这些
“strace 是一个系统调用跟踪器,即一个调试工具,它打印出另一个进程/程序进行的所有系统调用的跟踪。”如果系统调用递归工作或一个系统调用调用另一个系统调用怎么办。我怎样才能得到这些信息? 可能的解
我的问题很简单:我正在将一个函数传递给其他一些稍后调用的函数(示例回调函数),问题是何时、为何以及最佳做法是什么。 样本:我有 xxx() 函数,我必须传递它,如下面的 window.onload 事
我是 Java 新手,我正在尝试学习 ScheduledExecutorService 接口(interface)。我在网上看到了下面的代码。 我没有看到任何对 Callable.call() 方法的
这是我的调用过程: System.out.println
在 typescript 中,我有一个 DataAccess 类,以便所有 Ajax 调用都通过单个对象进行路由,以节省应用程序中许多地方的代码重复。 在使用这种方法时,我需要使用回调将响应返回到调用
如何使用模拟来计算通过 call 或 apply 进行的函数调用 // mylib.js module.exports = { requestInfo: function(model, id) {
每次我尝试roxygenize 一个包我都会得到这个错误: Error: is.call(call) is not TRUE traceback() 的结果: 11: stop(sprintf(nge
这里如果我有一个记录“调用我的函数”的函数 function myFunction() { console.log('called my function') } Function.prototy
在 Javascript 中,Function.call() 可以在给定 this 值和零个或多个参数的情况下调用 Function。 Function.call 本身就是一个函数。所以理论上,Fun
这个问题已经有答案了: "object is not a function" when saving function.call to a variable (3 个回答) a is a functi
在调用 UITableView 上的 reloadData 方法后,我曾多次遇到此问题,但我不明白为什么? 这是一个问题,因为如果更新 TableView 的数据,tableview将不必要地查询不存
我继承了大约 400 行写得非常奇怪的 Fortran 77 代码,我正在尝试逐步分析它以使其在我的脑海中清晰。 无论如何,我有一个类似 header 的文件(实际上是一个 .h,但其中的代码是 fo
这是我的代码 class AuthAction(callbackUri:String) extends ActionBuilder[UserRequest] with ActionRefiner[
我继承了大约 400 行写得非常奇怪的 Fortran 77 代码,我正在尝试逐步分析它以使其在我的脑海中清晰。 无论如何,我有一个类似 header 的文件(实际上是一个 .h,但其中的代码是 fo
我知道这个问题之前在这里被问过 iOS 6 shouldAutorotate: is NOT being called .但我的情况有点不同。 最初,在应用程序启动时,我加载了一个 viewContr
我是 headfirst 设计模式的读者,我注意到了这一点。 “好莱坞原则,别叫我们,我们叫你” 这意味着高级组件告诉低级组件“不要调用我们,我们调用你” High-Level Component 是
这个问题在这里已经有了答案: Why does passing variables to subprocess.Popen not work despite passing a list of ar
我刚找到一个覆盖 OnPaintBackground 的表单。奇怪的是它从来没有被调用过!就像,完全一样。为什么是这样?表单被刷新、移动、调整大小等等,所以它应该一些重新绘制,对吧? 最佳答案 是否设
调用函数的方式 考虑这个简单的函数: function my(p) { console.log(p) } 我可以这样调用它: my("Hello"); 也像这样: my.call(this, "Hel
我是一名优秀的程序员,十分优秀!