在TypeScript中定义Promise返回值

简介: 在TypeScript中定义Promise返回值

我有一个异步函数,试图返回一个object或null。

但是我在定义类型时出错了。


如何定义此数据类型?


const checkIsValidConnection = async (number: string): Promise<string | null> => {
  const defaultConnection = await GetDefaultConnection()
  const wbot = getWbot(defaultConnection.id)
  const contactId = await wbot.getNumberId(`${number}`)
  return contactId
}
export default checkIsValidConnection
复制代码


类型“ContactId | null”不可分配给类型“string | null”。类型“ContactId”不可分配给类型“string”。


首先要在tsconfig.json中配置ES2015.promise的lib,不然TypeScript无法支持Promise


网络异常,图片无法展示
|


接下来随意定义一个异步函数


export default function onLoginFn(param) {
   return new Promise(resolve => {
       axios.get('/login', param).then(r => {
          resolve(r) 
       }
   }
}
复制代码


然后用TypeScript声明文件定义期望返回的数据类型


declare namespace Service {
   interface login {
      id: number
      name: string
      <T = any> (date: T): Promise<T>
   }
}
复制代码


最后再结合之前的异步函数


export default function login(): Promise<Service.login> {
   return new Promise(resolve => {
      axios.get('/login', param).then(r => {
         resolve(r) 
      }
   }
}
复制代码


只是多了个Promise返回值定义,但可以从then方法中看到返回值的代码提示了,还是很方便的。


网络异常,图片无法展示
|


总结



  • 当Promise的回调函数返回非Promise对象的值时,thencatch都生成一个状态为fulfilled的Promise对象,并把该返回值传入Promise链的下一环节。
  • 当Promise的回调函数返回值为Promise对象时,生成的Promise对象的状态由被返回的Promise对象决定,传入Promise链下一环节的值也由这个被返回的Promise决定。
  • 当Promise的回调函数中抛出错误时,thencatch都生成一个状态为rejected的Promise对象,并把抛出的错误对象传入Promise链的下一环节。
相关文章
|
1月前
|
JavaScript 前端开发 编译器
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
|
4月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
71 1
|
4月前
|
存储 JavaScript 前端开发
TypeScript 中的 Map 对象定义、基本操作和常见用法
TypeScript 中的 Map 对象定义、基本操作和常见用法
421 7
|
4月前
|
JavaScript
TypeScript 联合类型的定义、使用场景和注意事项
TypeScript 联合类型的定义、使用场景和注意事项
120 1
|
4月前
|
存储 设计模式 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(三)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
4月前
|
存储 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(二)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
4月前
|
缓存 JavaScript 前端开发
TypeScript 类的基础:从定义到实例化,让你快速掌握(一)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
4月前
|
JavaScript
如何在 TypeScript 中定义类
如何在 TypeScript 中定义类
36 0
|
4月前
|
JavaScript 前端开发 编译器
TypeScript 接口之基本接口定义
TypeScript 接口之基本接口定义
70 0
|
JavaScript
TypeScript void 无返回值
TypeScript void 无返回值
80 0