[Typescript] Constraint inputs types

const returnsValueOnly = <T>(t: T) => {
    return t;
}
const result = returnsValueOnly("a"); // const returnsValueOnly: <"a">(t: "a") => "a"

const returnsValueInAnObject = <T1>(t: T1) => {
  return {
    t,
  };
};
const result2 = returnsValueInAnObject("abc");
/**
 const result2: {
    t: string;
 }
 */

// With a constraint, it narrows it to its literal
const returnsValueInAnObjectWithConstraint = <T1 extends string>(t: T1) => {
  return {
    t,
  };
};
const result3 = returnsValueInAnObjectWithConstraint("abc");

// With a constraint, it narrows it to its literal
const returnsValueInAnObjectWithConstraint2 = <const T1>(t: T1) => {
  return {
    t,
  };
};
const result31 = returnsValueInAnObjectWithConstraint("abc");

/*
const result3: {
    t: "abc";
}
 */

const acceptsValueInAnObject = <T>(obj: { input: T }) => {
  return obj.input;
};
const result4 = acceptsValueInAnObject({ input: "abc" }); //string

const acceptsValueInAnObjectFieldWithConstraint = <T extends string>(obj: {
  input: T;
}) => {
  return obj.input;
};
const result5 = acceptsValueInAnObjectFieldWithConstraint({ input: "abc" });
/*
const acceptsValueInAnObjectFieldWithConstraint: <"abc">(obj: {
    input: "abc";
}) => "abc"
 */

const acceptsValueWithObjectConstraint = <
  T extends {
    input: string;
  },
>(
  obj: T,
) => {
  return obj.input;
};
const result7 = acceptsValueWithObjectConstraint({ input: "abc" });

const result4WithAsConst = acceptsValueWithObjectConstraint({
  input: "abc",
} as const);

 

posted @   Zhentiw  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2021-02-25 [Graphql] Apollo Client Example
2021-02-25 [Graphql + Netlify] Solve @Apollo/client CORS problem
2020-02-25 [Unit testing Angular] Complete component code
2020-02-25 [Javascript] Objects and Functions
2020-02-25 [HTML5] Element id binding
2019-02-25 [Functional Programming] Working with two functors(Applicative Functors)-- Part1 --.ap
2019-02-25 [React] Preventing extra re-rendering with function component by using React.memo and useCallback
点击右上角即可分享
微信分享提示