返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何在TypeScript中处理日期字符串
  • 348
分享到

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

2024-04-02 19:04:59 348人浏览 独家记忆
摘要

目录前言:一、模板字面量类型二、类型谓词缩小范围三、定义日期字符串总结:前言: 在我最近的一个项目中,我必须去处理多个自定义的日期字符串表示法,比如YYYY-MM-DD和YYYYMM

前言:

在我最近的一个项目中,我必须去处理多个自定义的日期字符串表示法,比如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

type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`

type MM = `0${oneToNine}` | `1${0|1|2}`

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

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类型也代表有效的日期,我们将设置一个用户定义的类型保护来验证日期和缩小类型


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编译器将类型细化为比声明的更具体的类型。然后,在一个工厂函数中应用了类型保护,以从一个未标准化的输入字符串中创建一个有效的日期字符串。


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

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处理字符串内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何在TypeScript中处理日期字符串

本文链接: https://lsjlt.com/news/147328.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何在TypeScript中处理日期字符串
    目录前言:一、模板字面量类型二、类型谓词缩小范围三、定义日期字符串总结:前言: 在我最近的一个项目中,我必须去处理多个自定义的日期字符串表示法,比如YYYY-MM-DD和YYYYMM...
    99+
    2024-04-02
  • 怎么在TypeScript中处理日期字符串
    这篇文章主要讲解了“怎么在TypeScript中处理日期字符串”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在TypeScript中处理日期字符串”吧!一、模板字面量类型在typescr...
    99+
    2023-06-30
  • DOS批处理下如何格式化日期字符串
    小编给大家分享一下DOS批处理下如何格式化日期字符串,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在Linux下,简单的一句话:date '+%Y%m%d...
    99+
    2023-06-08
  • JavaScript中字符串如何转换为日期
    这篇文章主要介绍JavaScript中字符串如何转换为日期,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaSc...
    99+
    2023-06-15
  • php sql字符串如何转日期
    本篇内容主要讲解“php sql字符串如何转日期”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php sql字符串如何转日期”吧!php sql字符串转日期的方法:1、通过“date("...
    99+
    2023-06-25
  • vb中如何把字符串转化成日期
    在VB中,可以使用`Date.Parse`或`Date.TryParse`方法将字符串转换为日期。```vbDim dateStri...
    99+
    2023-09-12
    vb
  • mysql如何将日期转为字符串
    这篇文章主要介绍“mysql如何将日期转为字符串”,在日常操作中,相信很多人在mysql如何将日期转为字符串问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”mysql如何将日期...
    99+
    2024-04-02
  • javascript字符串和日期如何互转
    小编给大家分享一下javascript字符串和日期如何互转,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器...
    99+
    2023-06-14
  • vuejs如何实现字符串转日期
    本篇内容主要讲解“vuejs如何实现字符串转日期”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vuejs如何实现字符串转日期”吧!vuejs实现字符串转日期的方法:1、安装moment包;2、在...
    99+
    2023-06-25
  • php字符串如何转换为日期
    今天小编给大家分享一下php字符串如何转换为日期的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用PHP内置函数将字符串转换...
    99+
    2023-07-06
  • oracle如何将日期转为字符串
    在 Oracle 数据库中,可以使用 TO_CHAR 函数将日期转换为字符串。TO_CHAR 函数的语法如下: TO_CHAR...
    99+
    2024-05-21
    oracle
  • JavaScript如何将日期转换为字符串
    这篇文章主要介绍“JavaScript如何将日期转换为字符串”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何将日期转换为字符串”文章能帮助大家...
    99+
    2024-04-02
  • javascript如何实现日期转换字符串
    小编给大家分享一下javascript如何实现日期转换字符串,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript有什么特点1、js属于一种解释性脚本...
    99+
    2023-06-14
  • vue如何把日期转换为字符串
    本文小编为大家详细介绍“vue如何把日期转换为字符串”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue如何把日期转换为字符串”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。以下是一个简单的例子,展示如何使用vu...
    99+
    2023-07-06
  • oracle如何把日期转换成字符串
    在Oracle中,可以使用TO_CHAR函数来将日期转换为字符串。以下是一个示例: SELECT TO_CHAR(S...
    99+
    2024-04-09
    oracle
  • oracle日期转换字符串如何实现
    在Oracle中,可以使用TO_CHAR函数将日期转换为字符串。 语法如下: TO_CHAR(date_value, for...
    99+
    2024-04-02
  • Java中字符串与日期转换
    1.Date转String 1.1Date->String //date->String Date date = new Date(); String format = dateF...
    99+
    2023-09-01
    java servlet 开发语言
  • 如何批处理将字符串或日期输出到Windows剪贴板
    这篇文章主要介绍如何批处理将字符串或日期输出到Windows剪贴板,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如下操作需要借助于clip.exe(C:\Windows\System32\clip.exe),系统自带...
    99+
    2023-06-08
  • php中文日期字符串如何转时间格式
    本文小编为大家详细介绍“php中文日期字符串如何转时间格式”,内容详细,步骤清晰,细节处理妥当,希望这篇“php中文日期字符串如何转时间格式”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。php中文日期字符串转时间...
    99+
    2023-07-05
  • python如何处理字符串
    这篇文章主要为大家展示了“python如何处理字符串”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“python如何处理字符串”这篇文章吧。字符串处理技巧1. 清理用户输入对输入的的值进行清理处理...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作