旧习难改,但养成新习惯是必要的。充分利用TypeScript的技巧

111 阅读8分钟

DZone>Web Dev Zone>旧习难改,但养成新习惯是必要的。从TypeScript中获得最大利益的技巧

旧习难改,但养成新习惯是必要的。从TypeScript中获得最大利益的技巧

本文探讨了TypeScript如此受开发者欢迎的主要原因,并给出了一些提示,以帮助你从TypeScript中获得最大收益。

Sergey Laptick user avatar通过

Sergey Laptick

-

Mar. 28, 22 - Web Dev Zone -教程

喜欢 (2)

评论

保存

鸣谢

2.43K浏览次数

加入DZone社区,获得完整的会员体验。

免费加入

在Web开发中,当一个新的框架或库进入舞台时,没有人会感到惊讶。仅仅利用特定编程语言的力量来实现复杂的功能和从头开始创建UI元素,并不总是最理想的方式。相反,开发人员要么依靠现有的框架,要么创建自己的框架供内部使用。在编程语言的情况下,情况就比较复杂了。

相当多的编码员对他们每天使用的编程语言的限制感到不满意。因此,我们不时可以听到新的编程语言的发布。问题是,开发社区是否会采用它作为成熟技术的替代?作为一个例子,我们可以看一下Dart。它最初是在2011年发布的,但在2017年Flutter框架推出之前,仍然相当不受欢迎。

TypeScript可以被视为这一规则的例外。这项技术只有不到10年的历史,但它在开发者中的受欢迎程度相当高。例如,在过去6个月中,每周TypeScript npm包的下载量已经超过3100万。

今天,我们将考虑这种流行背后的主要原因,并分享一些提示,以帮助你从TypeScript中获得最大利益。

关于TypeScript的所有大惊小怪来自哪里?

顾名思义,TypeScript更强调在创建应用程序时使用类型。它的创造者们吸取了JavaScript的精华,并通过添加类型定义向前迈进了一步。TypeScript是一种开源语言,因此任何有足够好奇心和技能的开发者都可以通过GitHub深入研究源代码并做出贡献。

类型很重要

乍一看,TypeScript 应用程序可能看起来像用 JavaScript 编写的东西,并夹杂着类型数据。在实践中,对类型的密切关注可以防止开发人员对数据的错误使用。让我们看看任何开发人员都可以在他或她的一个函数中看到的例子。

TypeScript

let doggo: string = "Snoopy";
let age: number = 2;
function makeOlder(age:number){
    return age + 1;
}

在TypeScript中,当你运行这段代码并试图使用类似makeOlder(doggo) ,你会收到一个错误,因为这个函数不期望是一个字符串。在JavaScript中,你会收到Snoopy1的结果,没有错误通知。这样的行为会导致在代码的某个地方出现问题,你必须展示你最好的错误跟踪技能来找到它的来源。

TypeScript将交叉兼容性提升到了新的水平

如今,技术进步的速度令人叹为观止。可能,对每个人来说,除了网络开发者。让网络运行的代码并不总是能跟上事物变化的速度。TypeScript可以在一定程度上帮助解决这个问题。为了确保所有系统正常运行,开发人员可以选择他们目前需要的JavaScript输出版本。有了TypeScript,你就不必花费数小时来测试你的应用程序在不同设备和浏览器上的行为方式。相反,你可以专注于功能,只要有必要就可以打磨应用程序的逻辑。

团队之间的沟通前所未有的简单

TypeScript的上述功能为大型开发团队提供了另一种可能性。如果你将一个复杂的系统分为几个模块,由不同的团队来实现,那么他们就没有必要被束缚在一个特定的JavaScript版本上。用TypeScript编写的Web应用程序会有很好的使用年限,你不必在每次发布主要的JavaScript更新时重构。

TypeScript 与主要框架搭配良好

TypeScript 本身看起来很有前途。但你可能会问,它与大多数流行框架的兼容性如何?目前,React正在崛起,许多开发人员都离不开NodeJS。

另请阅读顶级JavaScript框架

旧习难改,在某些情况下,无法使用经过验证的开发工具会增加额外的复杂性。在我们的情况下,没有什么可担心的。TypeScript支持开箱即用的JJSX,你使用它编写的代码可以毫不费力地编译成JavaScript,你可以使用Node.js运行,并确保其功能正确。

让TypeScript成为你的超能力之一的技巧

能够帮助你创建更好的TypeScript应用程序的技巧和窍门是一个相当广泛的话题,值得单独成书。由于我们受到本文范围的限制,我们只分享一些。然而,别忘了,如果你决定与提供定制软件开发服务的可靠公司合作,你可以确信你将得到一个符合标准的应用程序,在所有类型的设备上正常运行。

在TypeScript中,有一个功能允许你对 类型和/或接口 进行索引,就好像它们是特定对象的属性。这是一个相当常见的技术,简单但相当有用。比如,你用TypeScript创建一个网络应用,其主要功能是在线销售商品和服务,它要求客户输入他们的出生日期。在这种情况下,在你的代码的某个地方,你可能有以下几行。

TypeScript

Interface Customer {
    name: string;
    address: string;
    dateOfBirth: {
        day: number;
        month: number;
        year: number;
    }
};

在某个地方,大约1000行之后,你可以在你的一个函数中使用以下代码。

TypeScript

const newDateOfBirth: Customer["dateOfBirth"] = {
    day: 4,
    month: 5,
    year: 1990,
};

这段100%有效的代码将给newDateOfBirth变量以客户接口的类型。

你并不总是事先知道哪种类型会在你代码的特定部分变得有用。有时,一个数字会起到作用,而在某些情况下,你需要同一个变量表现得像一个字符串。在TypeScript中,你可以使用联合类型。要将两个或多个类型结合在一起,你可以使用这个小家伙。"|".让我们看看一个函数声明的小例子,数字和字符串可以和平地共存。

TypeScript

function(customerId: number | string) {
    //some useful code
}

在某些情况下,如果你在TypeScript中使用联合类型,你将面临额外的挑战。例如,使用toUpperCase这样的方法会让TypeScript感到困惑,因为它不知道你要传递的确切类型。因此,你可以使用这样的方法来检查customerId 是否是一个字符串:typeof === “string”

TypeScript提供了一些有用的实用类型,当你创建新类型时,可以将你从大量的代码编写中解放出来。PickOmit可以用来定义你想从现有类型中提取哪些项目,并使它们成为新类型的一部分。让我们来看看它们的功能。假设你用这段代码来创建一个客户界面。

TypeScript

interface Customer {
    name: string;
    age: number;
    address: string;
    email?: string;
    //other customer info
}

现在,如果你需要一个只有客户姓名和年龄的新类型来使用,例如,在一个检查特定人是否够年龄接受特定服务的函数中,你可以使用Pick。

TypeScript

type CustomerAge = Pick<Customer, 'name' | 'age'>;

const newCustomer: CustomerAge = {
    name: 'John',
    age: 25,
};

在这种情况下,分隔符"|"确保两个字段都会被选中。Omit的作用是相反的,允许删除你不想使用的字段。例如,我们可以使用这个代码删除地址字段。

TypeScript

type CustomerAge = Omit<Customer, 'address'>;

const newCustomer: CustomerAge = {
    name: 'James',
    age: 33,
};

你可能注意到,我们在玩类型的时候使用了"?"符号。在TypeScript中,它的使用使你可能想用或不想用的字段的可选符号。例如,如果我们使用这段代码。

TypeScript

interface Customer {
    name: string;
    age: number;
    email: string;
    //other customer info
}

let: newCustomer: Customer {
    name: "Julia",
    age: 23,
}:

我们会把自己置于一个棘手的境地,因为所需的属性被遗漏了。添加问号是一种简单而优雅的方式,可以使特定的属性成为可选项,达到更多的灵活性。

结论

每个成功的开发者的主要思维功能之一是不断学习。采用最佳实践有助于编写易于维护且不易出错的代码。将新的框架添加到你的技能列表中,可以为解决复杂的问题提供额外的灵活性,并且可以用更少的代码实现更多的功能。曾经被设计成可移植和轻量级的JavaScript,随着时间的推移已经超越了自己,现在已经在数十亿的设备上运行。重新设计这样一种技术,并牢记开发人员从其他语言中获得的所有经验,几乎是不可能的。幸运的是,TypeScript正是涌入了一些新鲜的想法,帮助创建更好的代码,而不需要忘记你之前所知道的一切。

主题。

TypeScript, TypeScript初学者, TypeScript教程, 编程, Web开发

经Sergey Laptick许可,发表于DZone。点击这里查看原文。

DZone贡献者所表达的观点是他们自己的。

DZone上的热门文章


评论

网络开发 合作伙伴资源