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

第如何在TypeScript中处理日期字符串目录前言：一、模板字面量类型二、类型谓词缩小范围三、定义日期字符串总结：

前言：

在我最近的一个项目中，我必须去处理多个自定义的日期字符串表示法，比如YYYY-MM-DD和YYYYMMDD。由于这些日期是字符串变量，TypeScript默认会推断成为string类型。虽然这在技术实现上没有错，但是在工作中使用这样的类型定义是很宽泛的，使得有效处理这些日期字符串变得很困难。例如，letdog=alfie也被推断为一个string类型。

在这篇文章中，我会将我的解决方法呈现给你，通过输入这些日期字符串来改善开发者的体验并减少潜在的错误。

在进入编码之前，让我们简单回顾下实现目标需求要利用到的typescript特性，即模板字面量类型和通过类型谓词缩小范围。

一、模板字面量类型

在typescript4.1版本中引入，模板字面量类型和JavaScript的模板字符串语法相同，但是是作为类型使用。模板字面量类型解析为一个给定模板的所有字符串组合的联合。这听起来可能有点抽象，

直接看代码：

typePerson='Jeff'|'Maria'

typeGreeting=`hi${Person}!`//Templateliteraltype

constvalidGreeting:Greeting=`hiJeff!`//

//notethatthetypeof`validGreeting`istheunion`"hiJeff!"|"hiMaria!`

constinvalidGreeting:Greeting=`byeJeff!`//

//Type'"byeJeff!"'isnotassignabletotype'"hiJeff!"|"hiMaria!"

模板字面量类型非常强大，允许你对这些类型进行通用类型操作。例如，大写字母化。

typePerson='Jeff'|'Maria'

typeGreeting=`hi${Person}!`

typeLoudGreeting=UppercaseGreeting//Capitalizationoftemplateliteraltype

constvalidGreeting:LoudGreeting=`HIJEFF!`//

constinvalidGreeting:LoudGreeting=`hijeff!`//

//Type'"hiJeff!"'isnotassignabletotype'"HIJEFF!"|"HIMARIA!"

二、类型谓词缩小范围

typescript在缩小类型范围方面表现得非常好，可以看下面这个例子：

letage:string|number=getAge();

//`age`isoftype`string`|`number`

if(typeofage==='number'){

//`age`isnarrowedtotype`number`

}else{

//`age`isnarrowedtotype`string`

}

也就是说，在处理自定义类型时，告诉typescript编译器如何进行类型缩小是有帮助的。例如，当我们想在执行运行时验证后缩小到一个类型时，在这种情况下，类型谓词窄化，或者用户定义的类型守护，就可以派上用场。

在下面这个例子中，isDog类型守护通过检查类型属性来帮助缩小animal变量的类型：

typeDog={type:'dog'};

typeHorse={type:'horse'};

//customtypeguard,`petisDog`isthetypepredicate

functionisDog(pet:Dog|Horse):petisDog{

returnpet.type==='dog';

letanimal:Dog|Horse=getAnimal();

//`animal`isoftype`Dog`|`Horse`

if(isDog(animal)){

//`animal`isnarrowedtotype`Dog`

}else{

//`animal`isnarrowedtotype`Horse`

}

三、定义日期字符串

为了简洁起见，这个例子只包含YYYYMMDD日期字符串的代码。

首先，我们需要定义模板字面量类型来表示所有类似日期的字符串的联合类型

typeoneToNine=1|2|3|4|5|6|7|8|9

typezeroToNine=0|1|2|3|4|5|6|7|8|9

*Years

typeYYYY=`19${zeroToNine}${zeroToNine}`|`20${zeroToNine}${zeroToNine}`

*Months

typeMM=`0${oneToNine}`|`1${0|1|2}`

*Days

typeDD=`${0}${oneToNine}`|`${1|2}${zeroToNine}`|`3${0|1}`

*YYYYMMDD

typeRawDateString=`${YYYY}${MM}${DD}`;

constdate:RawDateString='19990223'//

constdateInvalid:RawDateString='19990231'//31stofFebruaryisnotavaliddate,butthetemplateliteraldoesntknow!

constdateWrong:RawDateString='19990299'//Typeerror,99isnotavalidday

从上面的例子可以得知，模板字面量类型有助于指定日期字符串的格式，但是没有对这些日期进行实际验证。因此，编译器将19990231标记为一个有效的日期，即使它是不正确的，只因为它符合模板的类型。

另外，当检查上面的变量如date、dateInvalid、dateWrong时，你会发现编辑器会显示这些模板字面的所有有效字符的联合。虽然很有用，但是我更喜欢设置名义类型，使得有效的日期字符串的类型是DateString，而不是19000101|19000102|19000103|...。在添加用户定义的类型保护时，名义类型也会派上用场。

typeBrandK,T=K{__brand:T};

typeDateString=BrandRawDateString,'DateString'

constaDate:DateString='19990101';//

//Type'string'isnotassignabletotype'DateString'

为了确保我们的DateString类型也代表有效的日期，我们将设置一个用户定义的类型保护来验证日期和缩小类型

/**

*Use`moment`,`luxon`orotherdatelibrary

constisValidDate=(str:string):boolean={

//...

//User-definedtypeguard

functionisValidDateString(str:string):strisDateString{

returnstr.match(/^\d{4}\d{2}\d{2}$/)!==nullisValidDate(str);

}

现在，让我们看看几个例子中的日期字符串类型。在下面的代码片段中，用户定义的类型保护被应用于类型缩小，允许TypeScript编译器将类型细化为比声明的更具体的类型。然后，在一个工厂函数中应用了类型保护，以从一个未标准化的输入字符串中创建一个有效的日期字符串。

/**

*Usageintypenarrowing

//validstringformat,validdate

constdate:string='19990223';

if(isValidDateString(date)){

//evaluatestotrue,`date`isnarrowedtotype`DateString`

//validstringformat,invaliddate(Februarydoensthave31days)

constdateWrong:string='19990231';

if(isValidDateString(dateWrong)){

//evaluatestofalse,`dateWrong`isnotavaliddate,evenifitsshapeisYYYYMMDD

*Usageinfactoryfunction

functiontoDateString(str:RawDateString):DateString{

if(isValidDateString(str))returnstr;

thrownewError(`Invaliddatestring:${str}`);

//validstringformat,validdate

constdate1=toDateString('19990211');

//`date1`,isoftype`DateString`

//invalidstringformat

constdate2=toDateString('asdf');

//Typeerror:Argumentoftype'"asdf"'isnotassignabletoparameteroftype'"19000101"|...

//validstringformat,invaliddate(Februarydoensthave31days)

co