如何使用TypeScript檢驗後端傳來的資料格式

typescript axios vue3

greenriver 2022-03-04 11:43:09 ‧ 1700 瀏覽

分享至

大家好
我想請問TypeScript能檢驗後端傳來的資料格式嗎?

我的前端使用的是vue3、vite，code是這樣。
設定了一個const theAxios = ref<string>()的字串變數去接後端的資料

const theAxios = ref<string>()//字串變數

axios.get('http://localhost/typescriptTest/returnNumber.php')
.then((res)=>{
    let data = res.data
    
    theAxios.value = data    
})
.catch((error)=>{
    console.log('error');
})

但是如果php回傳的是數字30000000時

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept');

echo 30000000;

結果是不會報錯誤。
不過變數theAxios，變成了number格式.......
我很擔心之後做TypeScript專案時，會有問題，所以想請問大大們。
還是只能自行用typeof確認回傳的格式呢?

listennn08 iT邦高手 5 級 ‧ 2022-03-04 11:57:45 檢舉

TpyeScript 不會在 runtime 去檢查型別，擔心的話還是用 typeof 去做檢查
畢竟在 TypeScript 定義的型別就是你預期後端給你的型別，不應該是別的型別才對

greenriver iT邦研究生 4 級 ‧ 2022-03-07 08:40:41 檢舉

原來如此謝謝了~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

cloudeasy

iT邦新手 5 級 ‧ 2022-03-04 15:16:50

最佳解答

TypeScript 主要是在開發階段檢查資料型別, 經過 [vue-tsc --noEmit && vite build] 後出來的 production runtime，已經不會有 type 參與了, 型別都會被移除掉

假如真的需要檢查外部API過來的資料型別，可以利用 typeof

axios.get('http://localhost/typescriptTest/returnNumber.php')
.then((res)=>{
    let data = res.data
    if (typeof data !== 'string') {
     return Promise.reject('error')
    }
    theAxios.value = data    
})
.catch((error)=>{
    console.log('error');
})

或者第三方套件例如 yup 或 zod

以zod舉例：

// 定義API schema
const userSchema = z.object({
  id: z.string().uuid(),
  name: z.string()
  login_count: z.number()
})

// 可將 zod 的 schema 透過z.infer轉為Typescript 的type來使用
const type User = z.infer<typeof userSchema>

axios.get('http://localhost/user/1')
.then((res)=>{
    let data: User = res.data
    let parsed = userSchema.safeParse(data) 
    //safeParse 會在schema不符合時回傳一個 object, 包含錯誤訊息, 不會直接噴exception
    if (parsed.success) {
        theAxios.value = parsed.data
    } else {
        return Promise.reject(parsed.error)
    }     
})
.catch((error)=>{
    console.log('error');
})

// axios.get('http://localhost/user/1')
// .then((res)=>{
//    let data: User = res.data
//    let parsed = userSchema.parse(data) 
//      // parse 會在schema不符合時噴exception
//    theAxios.value = parsed
// })
// .catch((error)=>{
//    console.log('error');
// })