我們在使用 Yup 時,很常會使用 Yup.addMethod 來新增自訂的驗證方式,但如果專案是 Typescript 的卻沒有加上適當的 Type,會使編譯時出現錯誤。

這時候我們為加上正確的 Type,不只不會出現錯誤,使用上也更方便。

為自訂驗證方法新增支援 Typescript

  1. 首先我們先使用 Yup.addMethod 建立一個驗證方法,以下使用「驗證是否為有效 json」為範例。

yup.ts

import * as Yup from 'yup';

Yup.addMethod(Yup.string, 'json', function (
    this: Yup.DateSchema,
    message?: string
) {
    return this.test('json', message || '這不是一個有效的 Json', function (this: TestContext, value: string) {
        return isEmpty(value) || (typeof value === 'string' && isValidJson(value));
    });
});
  1. 接下來只要透過 declare module 'Yup' 來宣告這個驗證方法的 Type 即可。如果自訂驗證是新增在 string() 則介面部分就必須指定 StringSchema,其他型態的也是如此,且一次就可以宣告多個方法。

yup.ts

declare module 'Yup' {
    interface StringSchema {
        /**
         * 確認字串是否是 Json 格式
         */
        json (message?: string): StringSchema;
    }
}
  1. 最後要記得在剛剛設定 declare 的檔案,最後使用 export 去匯出 Yup,並在專案的頂層去載入它,以下範例用 Index.tsx

yup.ts

export default Yup;

Index.tsx

import './lib/yup';

const Index: React.FC = () => {
    return <App />;
}

使用時就跟其他內建的 Yup 驗證方式一樣。

import { string } from 'yup';

const schmea = object({
    json: string().json()
})

這樣為自訂驗證新增 Type 後,不僅使用上會有自動補全,也可利用 IDE 找到所有有用到這個驗證方法的地方。

完整 Code

yup.ts

import * as Yup from 'yup';

declare module 'Yup' {
    interface StringSchema {
        /**
         * 確認字串是否是 Json 格式
         */
        json (message?: string): StringSchema;
    }
}

Yup.addMethod(Yup.string, 'json', function (
    this: Yup.DateSchema,
    message?: string
) {
    return this.test('json', message || '這不是一個有效的 Json', function (this: TestContext, value: string) {
        return isEmpty(value) || (typeof value === 'string' && isValidJson(value));
    });
});

export default Yup;

參考資料


感謝閱讀!

喜歡這篇文章或是有幫助到你嗎? 歡迎分享給你的朋友!

有任何問題、回饋或您認為我會感興趣的任何東西嗎? 請在下面發表評論,或者是直接聯絡我


Puck Wang

Puck Wang

Hi! 我是 Puck Wang,這個部落格的作者,是一位全端網站開發者,常使用 .Net Core 和 React 開發網站,你可以在這個部落格看到我精選的筆記內容,希望對你會有所幫助。

更多關於我的訊息,可至關於關於頁面。