在 TypeScript 中输入 gql-tag

Posted 2023-03-08

【中文标题】在 TypeScript 中输入 gql-tag

【英文标题】：Type gql-tag in TypeScript

【发布时间】：2019-01-28 19:00:09

【问题描述】：

我正在使用 GraphQL，我希望严格输入 gql。是否可以将 result 变量设置为 ResultData 的形状，即使用最新版本的 TypeScript。这只是关于打字，而不是关于运行时。

interface Data 
    one: string;
    two: number;
    three: 
        four: string;
        five: 
            six: Date;
        ;
    ;


// true means that this field must be added to query
type RecursivePartial<T> = [P in keyof T]?: RecursivePartial<T[P]> | true;

function gql<T>(fields: RecursivePartial<T>) 
  // Some code about generating GraphQL query


const result = gql<Data>(one: true, three: five: six: true);

// type ResultData 
//     one: string;
//     three: 
//         five: 
//             six: Date;
//         ;
//     ;
// 

【参考方案1】：

这在操场上对我有用：

interface Data 
    one: string;
    two: number;
    three: 
        four: string;
        five: 
            six: Date;
        ;
    ;


// Prevent widening of true to boolean in queries
type RecursivePartial1 =  [k: string]: RecursivePartial1 | true ;
// true means that this field must be added to query
type RecursivePartial<T> = RecursivePartial1 &  [P in keyof T]?: RecursivePartial<T[P]> | boolean ;

type RecursivePick<T, Q extends RecursivePartial<T>> =
   [P in keyof T & keyof Q]:
    Q[P] extends RecursivePartial<T[P]> ? RecursivePick<T[P], Q[P]> : T[P] ;

function gql<T, Q extends RecursivePartial<T>>(data: T, fields: Q): RecursivePick<T, Q> 
  // Some code about generating GraphQL query


declare const data: Data;
const result = gql(data,  one: true, three:  five:  six: true   );

// type ResultData 
//     one: string;
//     three: 
//         five: 
//             six: Date;
//         ;
//     ;
// 

【讨论】：

感谢您的回答。我将此代码复制到 TypeScript 操场上，TS 允许我访问我在 gql const result = gql(data, one: true, three: 五: Six: true 中没有选择的属性); const another = result.three.four； // 没有错误，但是我没有选择上面的four属性

糟糕，为了简化RecursivePick 的定义，我把它弄坏了。请重试。