get/post 方法封装：从javascript改写为typescript

/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
 export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {      
            resolve(res.data);             
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
 export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, params)        
        .then(res => {            
            resolve(res);     
        })        
        .catch(err => { 
            if(err.statusText == 'Internal Server Error'){
                this.$confirm({
                    title: '程序错误',
                    content: '联系后端工程师进行处理',
                    okText: 'OK', 
                });
            }      
            reject(err.data)        
        })    
    });
}

改为ts文件后，运行会报错如下：

ERROR in src/common/request.ts:38:22
TS7006: Parameter 'url' implicitly has an 'any' type.
    36 |  * @param {Object} params [请求时携带的参数] 
    37 |  */
  > 38 |  export function get(url, params){    
       |                      ^^^
    39 |     return new Promise((resolve, reject) =>{        
    40 |         axios.get(url, {            
    41 |             params: params        

ERROR in src/common/request.ts:38:27
TS7006: Parameter 'params' implicitly has an 'any' type.
    36 |  * @param {Object} params [请求时携带的参数] 
    37 |  */
  > 38 |  export function get(url, params){    
       |                           ^^^^^^
    39 |     return new Promise((resolve, reject) =>{        
    40 |         axios.get(url, {            
    41 |             params: params        

ERROR in src/common/request.ts:57:23
TS7006: Parameter 'url' implicitly has an 'any' type.
    55 |  * @param {Object} params [请求时携带的参数] 
    56 |  */
  > 57 |  export function post(url, params) {    
       |                       ^^^
    58 |     return new Promise((resolve, reject) => {         
    59 |         axios.post(url, params)        
    60 |         .then(res => {            

ERROR in src/common/request.ts:57:28
TS7006: Parameter 'params' implicitly has an 'any' type.
    55 |  * @param {Object} params [请求时携带的参数] 
    56 |  */
  > 57 |  export function post(url, params) {    
       |                            ^^^^^^
    58 |     return new Promise((resolve, reject) => {         
    59 |         axios.post(url, params)        
    60 |         .then(res => {            

ERROR in src/common/request.ts:65:17
TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
    63 |         .catch(err => { 
    64 |             if(err.statusText == 'Internal Server Error'){
  > 65 |                 this.$confirm({
       |                 ^^^^
    66 |                     title: '程序错误',
    67 |                     content: '联系后端工程师进行处理',
    68 |                     okText: 'OK', 

url 和 params 参数没有类型注解，所以url 和 params 参数可以是任何类型的值，可能会导致类型错误。我们应该为 url 和 params 参数添加类型注解，例如 string 和 Record<string, any>。

在 TypeScript 中，this 关键字的类型注解通常在类或对象的方法中添加。不能在一个非类、非对象的函数中使用的，这在 TypeScript 中是不允许的。

我们需要在Vue 中处理这个错误。因为 this.$confirm 是 Vue 实例的方法，不能在普通的 TypeScript 函数中使用。可以选择在调用 post 函数的 Vue 组件中处理这个错误。

修改为如下代码后报错消失：

/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url: string, params: Record<string, any>): Promise<any> {    
    return new Promise((resolve, reject) => {        
        axios.get(url, {            
            params: params        
        })        
        .then((res: AxiosResponse) => {      
            resolve(res.data);             
        })        
        .catch((err: AxiosError) => {            
            reject(err.response?.data)        
        })    
    });
}

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url: string, params: Record<string, any>): Promise<any> {    
    return new Promise((resolve, reject) => {         
        axios.post(url, params)        
        .then((res: AxiosResponse) => {            
            resolve(res);     
        })        
        .catch((err: AxiosError) => { 
            if(err.message == 'Internal Server Error'){
                // Note: This part has to be handled in a Vue component
                // this.$confirm({
                //     title: '程序错误',
                //     content: '联系后端工程师进行处理',
                //     okText: 'OK', 
                // });
            }      
            reject(err.response?.data)        
        })    
    });
}

我们添加了类型注解到 url 和 params 参数中，以及 get 和 post 函数的返回类型。在 catch 块中，我们使用了可选链操作符（?.）来安全地访问 err.response.data，这样即使 err.response 是 undefined，代码也不会抛出错误。