wechat-miniprogram / wechat-miniprogram/api-typings

component.d.ts中关于TProperty的类型约束问题

Open
#67 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
803
Forks
117
Avg merge
24m
Merged PRs (30d)
1

Description

TProperty有两个问题:
  1. TPropertyTMethod都提示必须要补充索引签名,这个是不是有问题?
    image

  2. TProperty无法对值进行类型约束,我看component.d.ts里是根据type而不是根据value来约束的。

    • 比如数组只能约束到写死的any[]
    type ValueType<T extends PropertyType> = T extends StringConstructor
        ? string
        : T extends NumberConstructor
            ? number
            : T extends BooleanConstructor
                ? boolean
                : T extends ArrayConstructor
                    ? any[]
                    : T extends ObjectConstructor ? object : any
    
    • 我想约束成number[]都不行。这就导致了以下源码中attached中demo的问题。
源码:
interface Item {
  name: string
}

interface TData {
  list3: boolean[]
  list4: Item[]
}

interface TProperty {
  list: {
    type: typeof Array
    value: Item[]
  }
  list2: {
    type: typeof Array
    value: number[]
  }
  [key: string]: any
}

interface TMethod {
  [key: string]: any
}

Component<TData, TProperty, TMethod>({
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: [{ name: '' }]
    },
    list2: {
      type: Array,
      value: [2]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    list3: [],
    list4: []
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

  attached() {
    const a = this.data.list // any[]  异常
    const b = this.data.list2 // any[]  异常
    const c = this.data.list3 // boolean[]  正常
    const d = this.data.list4 // Item[]  正常

    const e = a[0] // any  异常
    const f = b[0] // any  异常
    const g = c[0] // boolean  正常
    const h = d[0] // Item  正常

    const i = e.name // 异常,虽然不报错,但是编辑器无法推断出name属性
    const j = e.age // 异常,没有报错
    const k = h.name // 正常,编辑器可推断出name属性
    const l = h.age // 正常,提示 类型“Item”上不存在属性“age”
  }
})

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in component.d.ts by reviewing TProperty, TMethod, and the ValueType conditional type shown in the report. Reproduce the Component<TData, TProperty, TMethod> example and verify that array property values retain Item[] and number[] types, while the reported index-signature warnings are addressed.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
api, developer-experience
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.