主页 / user-1068446

dwjohnston's questions

Martin Hope
dwjohnston
Asked: 2025-04-15 11:33:04 +0800 CST
  • 5

如果我有一些类似这样的代码：

type Bravo = {
  b?: string; 
}

type Charlie = {
  c:Bravo['b']
}

function acceptsCharlie(value: Charlie){
  //'value.c' is possibly 'undefined'.(18048)
  value.c.split('');
}

这是有道理的——该类型Charlie从继承了可选字符串Bravo。

我们可以通过使用Required实用程序类型来解决这个问题：

type Bravo = {
  b?: string; 
}

type Charlie = {
  //  👇
  c:Required<Bravo>['b']
}

function acceptsCharlie(value: Charlie){
  // no error here 
  value.c.split('');
}

简单的。

但是，如果我再添加一层键入查找：

type Alpha = {
  a?: string; 
}

type Bravo = {
  b: Alpha['a']; 
}

type Charlie = {
  c: Required<Bravo>['b']
}

function acceptsCharlie(value: Charlie){
  //'value.c' is possibly 'undefined'.(18048)
  value.c.split('');
}

这Required不再能解决我的问题。

怎么回事？

typescript
Martin Hope
dwjohnston
Asked: 2025-03-24 15:04:11 +0800 CST
  • 4

如果你有如下代码：

//other.js|ts

console.log("module sideffect") 
export function foo() {

}


//main.js|ts 
import {foo} from "./other"; // foo is not used  

console.log("do something else");

那么 JavaScript 和 TypeScript 在这种情况下的行为会有所不同。

TypesScript 将省略 的导入"./other"，并且console.log("module sideeffect")将不会触发。

而 JavaScript 将执行导入并且它将触发。

另一方面，如果我们进行如下导入：

import "./other";

模块的副作用将会激发。

这里有一个相关问题：

导入语句中的副作用

还有这里：

导入仅针对节点的 Typescript 模块以产生副作用

两者都在谈论这个问题，但不幸的是，两个答案现在都指向不再存在的 TypeScript 文档。

我正在寻找 TypeScript 为何会省略此内容的规范原因，以及这是否是可配置的行为。（可以想象这样一种情况：由于不再使用导入，代码停止工作）。

typescript
Martin Hope
dwjohnston
Asked: 2025-02-07 08:00:07 +0800 CST
  • 5

我正在寻找cookieStore.get函数的 MDN 文档。

CookieStore尚未被 TypeScript 类型化，所以我需要创建自己的定义。

我的问题是，在 MDN 文档中，MDN 表示函数的可选参数 - 但在返回类型上，我还没有看到返回类型的可选值。这是否意味着我可以假设cookieStore.get应该/将存在上列出的所有值？

cookiestore
Martin Hope
dwjohnston
Asked: 2024-12-16 07:21:43 +0800 CST
  • 4

我正在尝试创建一个 promisify 样式的钩子，想法是最终将它与 Redux Toolkit 一起使用，以允许使用新的 React 19use钩子。

以下是这个东西的工作原理：

function usePromise(input: {
    isLoading: true,
    data: null
} | {
    isLoading: false,
    data: string;
}) {


    // Store the resolve function in a ref 
    const resRef = useRef<(data: string) => void>(null);

    // Create a new promise 
    // Store the resolve function in the ref 
    const promiseRef = useRef(
        new Promise((res) => {
            resRef.current = res;

            //res("xxx") // 👈 this will resolve though
        })
    );

    // When input changes, if there is data, resolve the promise
    useEffect(() => {
        if (!input.isLoading) {
            resRef.current?.(input.data);
        }

    }, [input]);

    // Return the promise 
    return promiseRef.current;
}

用法如下：

export function MyComponent() {

    const [value, setValue] = useState<null | string>(null);

    const prom = usePromise(value ? {
        isLoading: false,
        data: value
    } : {
        isLoading: true,
        data: null
    });

    prom.then((v) => alert(v))

    return <div >

        <button onClick={() => setValue("123")}>Click me</button>
    </div>
}

在这里，我期望当我们点击按钮时，承诺会得到解决，我们会看到警报。然而，事实并非如此。

这里发生了什么事？

我在这里复制了此问题：https ：//github.com/dwjohnston/react-promise-issue

reactjs
Martin Hope
dwjohnston
Asked: 2024-10-03 10:14:24 +0800 CST
  • 5

我有一些如下所示的代码：

type UserTypes = "user" | "super-user" | "admin"  ;


function getUserType() : UserTypes {

}

function getAdminPrivs(userType: "user" | "super-user") : null  
function getAdminPrivs(userType: "admin") :  string 
// nb. we need to double declare the final line
// see: https://stackoverflow.com/questions/70146081/why-does-an-overloaded-function-declaration-sometimes-force-useless-type-narrowi
function getAdminPrivs(userType: UserTypes) : null | string
function getAdminPrivs(userType: UserTypes) : null | string {

  if(userType === "admin"){
    return "hello"
  }

  return null; 
}


// "user" | "super-user" | "admin"
const userType = getUserType();

// string| null  
const result = getAdminPrivs(userType);


if(userType === "user" || userType === "super-user"){

}
else {
  // string | null 
  // I really want this to be just string
  result
}

在这里，我希望 TypeScriptresult通过检查 的类型来缩小 的类型userType。这可能吗？

举个例子，如果我稍微变换一下代码：

const userType = getUserType();
if(userType === "user" || userType === "super-user"){
  // null
  const result = getAdminPrivs(userType);
}
else {
  //string 
  const result = getAdminPrivs(userType);
}

这在语义上是类似的，但是我们获得了类型缩小的优势。（我无法在实际用例中使用这种技术，因为它getAdminPrivs实际上是一个 React hook，并且不允许有条件地调用 React hook）

typescript
Martin Hope
dwjohnston
Asked: 2024-06-25 09:18:24 +0800 CST
  • 6

我正在尝试实现这样的目标：

const input = {a: 1, b: "hello"}; 
const result = renameProperties(input,{a: "alpha", b: "beta"}); 
result.alpha // number
result.beta // string
result.foo //Property 'foo' does not exist on type...

所以我的转换函数如下所示：


export function renameProperties<
  TInput extends Record<string, unknown>,
  TConversionMap extends Record<keyof TInput, string>,
  TOutput extends // heres where I get stuck 
>(input: TInput, conversionMap: TConversionMap): TOutput {

}

作为第一步我已经得到：

TOutput extends {[K in TConversionMap[keyof TInput]] : string}

这不完全符合我的要求——我希望结果只包含转换后的键。

result.alpha // string
result.beta // string

result.foo //string  - but really was hoping to see an error here

第二部分将涉及保留输入的价值，我正在考虑类似的事情：

TOutput extends {[K in TConversionMap[keyof TInput]] : TInput[The Input key, if we can retain a reference to it]}

我该怎么做？这可能吗？

typescript