H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】TypeScript Interface 疑惑?

TypeScript中函数通过Interface来描述参数时,如何设置参数的默认值?

interface Opts {
  method: string;
  header: object;
  body: object;
}

function request(url: string, opts: Opts) {
  // opts.method,opts.header等参数如何设置默认值?
  // 省略代码...
}

回答:

interface Opts {
  method: string;
  header: object;
  body: object;
}

function request(url: string, { method = 'get', header, body }: Partial<Opts> = {}) {
  // opts.method,opts.header等参数如何设置默认值?
  // 省略代码...
}

回答:

interface Opts {
  method: string;
  header: object;
  body: object;
}
const defaultOpts:Opts = {
  method='get',
  header= {},
  body={}
}
function request(url: string, opts: Opts) {
  opts = Object.assign(defaultOpts,opts)
  //或者
  opts = {...defaultOpts,...opts}
  
}

请注意

上面答案存在一个潜在隐患:无论 assign还是结构赋值,都只能进行第1层的替换,无法对比第2层属性值。
像上面代码中,假设默认 defaultOpts.body = {a:1,b:2},但是传递过来的参数中,props.body = {a:3},那么2者合并之后的值是不存在 xxx.body.b 这个属性的。

回答:

interface只是ts的东西,负责编译前的类型检查,不会影响js代码
你这个需求需要用解构赋值来实现

回答:

上面的其实都对,interface 里面确实没有所谓的默认值,这个和 react 的 PropType 或者 vue 里面的属性都不太一样

本文地址:H5W3 » 【前端问题精选】TypeScript Interface 疑惑?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址