前言:

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

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

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

一、模板字面量类型

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

直接看代码:

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在缩小类型范围方面表现得非常好,可以看下面这个例子:

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编译器如何进行类型缩小是有帮助的。例如,当我们想在执行运行时验证后缩小到一个类型时,在这种情况下,类型谓词窄化,或者用户定义的类型守护,就可以派上用场。

在下面这个例子中,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日期字符串的代码。

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

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标记为一个有效的日期,即使它是不正确的,只因为它符合模板的类型。

另外,当检查上面的变量如datedateInvaliddateWrong时,你会发现编辑器会显示这些模板字面的所有有效字符的联合。虽然很有用,但是我更喜欢设置名义类型,使得有效的日期字符串的类型是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);
}

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

/**
 *   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

总结:

我希望这篇文章能让我们了解TypeScript在输入自定义字符串方面的能力。请记住,这种方法也适用于其他自定义字符串,如自定义user-idsuser-xxxx,以及其他日期字符串,像YYYY-MM-DD

当结合用户定义的类型防护、模板字面字符串和名义类型时,可能性是无穷的。

到此这篇关于如何在TypeScript中处理日期字符串的文章就介绍到这了,更多相关TypeScript处理字符串内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

如何在TypeScript中处理日期字符串的更多相关文章

  1. 简单总结JavaScript中的String字符串类型

    就像其他语言那样,js中的字符串类型可以表示一串字符,由双引号包住,这里简单总结JavaScript中的String字符串类型的一些基础知识

  2. Java日期工具类的封装详解

    在日常的开发中,我们难免会对日期格式化,对日期进行计算,对日期进行校验,为了避免重复写这些琐碎的逻辑,我这里封装了一个日期工具类,方便以后使用,直接复制代码到项目中即可使用,需要的可以参考一下

  3. Python图像运算之图像阈值化处理详解

    这篇文章将详细讲解图像阈值化处理,涉及阈值化处理、固定阈值化处理和自适应阈值化处理,这是图像边缘检测或图像增强等处理的基础,感兴趣的可以了解一下

  4. iOS中字符串换行的实现方法

    大家应该都有所体会,单行字符数过多会影响美观,所以下面这篇文章主要给大家介绍了关于iOS中字符串换行的实现方法,文中通过图文介绍的非常详细,需要的朋友可以参考下

  5. php获取指定数量随机字符串的方法

    这篇文章主要介绍了php获取指定数量随机字符串的方法,涉及php针对数组的遍历及字符串运算相关操作技巧,需要的朋友可以参考下

  6. 使用typescript类型实现ThreeSum

    这篇文章主要介绍了使用typescript类型实现ThreeSum,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以一下,希望对你学习又是帮助

  7.  typeScript入门基础介绍

    这篇文章主要介绍了 typeScript入门基础,TypeScript 是由微软开发的开源、跨平台的编程语言,是 javaScript 的超集,最终被编译为 javaScript代码。常常被简称为TS支持JS、ES语法,下文将继续其他基础介绍,需要的朋友可以参考一下

  8. 微信小程序实现根据日期和时间排序功能

    这篇文章主要为大家详细介绍了微信小程序实现根据日期和时间排序功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. 基于jQuery对象和DOM对象和字符串之间的转化实例

    下面小编就为大家带来一篇基于jQuery对象和DOM对象和字符串之间的转化实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. typescript返回值类型和参数类型的具体使用

    本文主要介绍了typescript返回值类型和参数类型的具体使用文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部