如何在TypeScript中處理日期字符串

更新時間：2022年04月25日 17:17:38 作者：旭鋇?

這篇文章主要介紹了如何在TypeScript中處理日期字符串，主要通過輸入日期字符串來改善開發(fā)者的體驗并減少潛在的錯誤，下文實現(xiàn)操作的分享需要的小伙伴可以參考一下

前言：

在我最近的一個項目中，我必須去處理多個自定義的日期字符串表示法，比如YYYY-MM-DD和YYYYMMDD。由于這些日期是字符串變量，TypeScript默認會推斷成為string類型。雖然這在技術實現(xiàn)上沒有錯，但是在工作中使用這樣的類型定義是很寬泛的，使得有效處理這些日期字符串變得很困難。例如，let dog = 'alfie'也被推斷為一個string類型。

在這篇文章中，我會將我的解決方法呈現(xiàn)給你，通過輸入這些日期字符串來改善開發(fā)者的體驗并減少潛在的錯誤。

在進入編碼之前，讓我們簡單回顧下實現(xiàn)目標需求要利用到的typescript特性，即模板字面量類型和通過類型謂詞縮小范圍。

一、模板字面量類型

在typescript4.1版本中引入，模板字面量類型和JavaScript的模板字符串語法相同，但是是作為類型使用。模板字面量類型解析為一個給定模板的所有字符串組合的聯(lián)合。這聽起來可能有點抽象，

直接看代碼：

type Person = 'Jeff' | 'Maria'
type Greeting = `hi ${Person}!` // Template literal type
const validGreeting: Greeting = `hi Jeff!` // 
// note that the type of `validGreeting` is the union `"hi Jeff!" | "hi Maria!`
const invalidGreeting: Greeting = `bye Jeff!` // 
// Type '"bye Jeff!"' is not assignable to type '"hi Jeff!" | "hi Maria!"

模板字面量類型非常強大，允許你對這些類型進行通用類型操作。例如，大寫字母化。

type Person = 'Jeff' | 'Maria'
type Greeting = `hi ${Person}!`
type LoudGreeting = Uppercase<Greeting> // Capitalization of template literal type
const validGreeting: LoudGreeting = `HI JEFF!` // 
const invalidGreeting: LoudGreeting = `hi jeff!` // 
// Type '"hi Jeff!"' is not assignable to type '"HI JEFF!" | "HI MARIA!"

二、類型謂詞縮小范圍

typescript在縮小類型范圍方面表現(xiàn)得非常好，可以看下面這個例子：

let age: string | number = getAge();
// `age` is of type `string` | `number`
if (typeof age === 'number') {
  // `age` is narrowed to type `number`
} else {
  // `age` is narrowed to type `string`
}

也就是說，在處理自定義類型時，告訴typescript編譯器如何進行類型縮小是有幫助的。例如，當我們想在執(zhí)行運行時驗證后縮小到一個類型時，在這種情況下，類型謂詞窄化，或者用戶定義的類型守護，就可以派上用場。

在下面這個例子中，isDog類型守護通過檢查類型屬性來幫助縮小animal變量的類型：

type Dog = { type: 'dog' };
type Horse = { type: 'horse' };
//  custom type guard, `pet is Dog` is the type predicate
function isDog(pet: Dog | Horse): pet is Dog {
  return pet.type === 'dog';
}
let animal: Dog | Horse = getAnimal();
// `animal` is of type `Dog` | `Horse`
if (isDog(animal)) {
  // `animal` is narrowed to type `Dog`
} else {
  // `animal` is narrowed to type `Horse`
}

三、定義日期字符串

為了簡潔起見，這個例子只包含YYYYMMDD日期字符串的代碼。

首先，我們需要定義模板字面量類型來表示所有類似日期的字符串的聯(lián)合類型

type oneToNine = 1|2|3|4|5|6|7|8|9
type zeroToNine = 0|1|2|3|4|5|6|7|8|9
/**
 * Years
 */
type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`
/**
 * Months
 */
type MM = `0${oneToNine}` | `1${0|1|2}`
/**
 * Days
 */
type DD = `${0}${oneToNine}` | `${1|2}${zeroToNine}` | `3${0|1}`
/**
 * YYYYMMDD
 */
type RawDateString = `${YYYY}${MM}${DD}`;
const date: RawDateString = '19990223' // 
const dateInvalid: RawDateString = '19990231' //31st of February is not a valid date, but the template literal doesnt know!
const dateWrong: RawDateString = '19990299'//  Type error, 99 is not a valid day

從上面的例子可以得知，模板字面量類型有助于指定日期字符串的格式，但是沒有對這些日期進行實際驗證。因此，編譯器將19990231標記為一個有效的日期，即使它是不正確的，只因為它符合模板的類型。

另外，當檢查上面的變量如date、dateInvalid、dateWrong時，你會發(fā)現(xiàn)編輯器會顯示這些模板字面的所有有效字符的聯(lián)合。雖然很有用，但是我更喜歡設置名義類型，使得有效的日期字符串的類型是DateString，而不是"19000101" | "19000102" | "19000103" | ...。在添加用戶定義的類型保護時，名義類型也會派上用場。

type Brand<K, T> = K & { __brand: T };
type DateString = Brand<RawDateString, 'DateString'>;
const aDate: DateString = '19990101'; // 
// Type 'string' is not assignable to type 'DateString'

為了確保我們的DateString類型也代表有效的日期，我們將設置一個用戶定義的類型保護來驗證日期和縮小類型

/**
 * Use `moment`, `luxon` or other date library
 */
const isValidDate = (str: string): boolean => {
  // ...
};
//User-defined type guard
function isValidDateString(str: string): str is DateString {
  return str.match(/^\d{4}\d{2}\d{2}$/) !== null && isValidDate(str);
}

現(xiàn)在，讓我們看看幾個例子中的日期字符串類型。在下面的代碼片段中，用戶定義的類型保護被應用于類型縮小，允許TypeScript編譯器將類型細化為比聲明的更具體的類型。然后，在一個工廠函數(shù)中應用了類型保護，以從一個未標準化的輸入字符串中創(chuàng)建一個有效的日期字符串。

/**
 *   Usage in type narrowing
 */
// valid string format, valid date
const date: string = '19990223';
if (isValidDateString(date)) {
  // evaluates to true, `date` is narrowed to type `DateString` 
}
//  valid string format, invalid date (February doenst have 31 days)
const dateWrong: string = '19990231';
if (isValidDateString(dateWrong)) {
  // evaluates to false, `dateWrong` is not a valid date, even if its shape is YYYYMMDD 
}
/**
 *   Usage in factory function
 */
function toDateString(str: RawDateString): DateString {
  if (isValidDateString(str)) return str;
  throw new Error(`Invalid date string: ${str}`);
}
//  valid string format, valid date
const date1 = toDateString('19990211');
// `date1`, is of type `DateString`
//  invalid string format
const date2 = toDateString('asdf');
//  Type error: Argument of type '"asdf"' is not assignable to parameter of type '"19000101" | ...
//  valid string format, invalid date (February doenst have 31 days)
const date3 = toDateString('19990231');
//  Throws Error: Invalid date string: 19990231