🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[success] # 联合类型 ~~~ 1.联合类型表示一个值可以是几种类型之一,用'|' 来表示 ~~~ ~~~ const getLenFunc = (content:number|string)=>{ if (typeof content === 'string'){ return content.length} else {return content.toString().length} } // getLenFunc(true) // 报错 只能是string 或者是number类型中的一个 ~~~ >[danger] ##### 没有联合类型 ~~~ 1.如果没有联合类型可能使用时候需要'any' 或'unknown' ~~~ ~~~ // 只想让参数接受 string 和 number 参数,需要不停的缩小参数范围 function getParams(param: unknown) { if (typeof param === 'string') return param else if (typeof param === 'number') return param else throw Error('只能是字符类型') } ~~~ ![](https://img.kancloud.cn/42/f2/42f2fe084b5098546cce38a280c3cb7e_686x161.png) * 用联合类型 ~~~ function getParams1(param: string | number) { return param } ~~~ ![](https://img.kancloud.cn/dd/69/dd6929731ffafa639d9f0acd3fc38df5_766x120.png) >[danger] ##### 接口用联合类型 ~~~ 1.如果一个值是联合类型,我们只能访问此联合类型的所有类型里共有的成员 简单的说'使用一个联合类型的参数只能使用共有成员',下面案例中c虽然有age属性,但是会报错 只能使用他们的共有成员name ~~~ ~~~ interface a { name:string, age:number } interface b { name:string, sex:string } // const c:(a|b) = { // age:13, // sex:'nan' // } // 报错 const c:(a|b) = { name:'fff', age:12, sex:'w' } // c.age// 报错 c.name ~~~ >[danger] ##### 可辨识联合类型 ~~~ 1.在中增加 和 修改 这两个需求的时候往往,新增不需要id 但是修改需要id,往往这种处理一般都会集中在一个公共方法中 举个例子 ~~~ ~~~ type Add = { name: string age: number } type Edit = { id: number name: string age: number } function submit(params: Add | Edit) { // ....... console.log(params.id) // 报错 } ~~~ * 解决方法缩小范围 ~~~ 1.使用 if 等流程控制语句,下面案例只能使用'in' ~~~ ~~~ type Add = { name: string age: number } type Edit = { id: number name: string age: number } function submit(params: Add | Edit) { // 无效 // if(params.id){ // // console.log(params.id) // } // 无效 // if(Reflect.has(params,"id")){ // console.log(params.id) // } // 无效 // if(Reflect.get(params,"id")){ // console.log(params.id) // } if ('id' in params) { console.log(params.id) } } ~~~