TypeScript 入门指南

如果已经关注很长时间,可能会知道几年前写过一本关于TypeScript的书。所以,想尝试一些新的东西,比如写一个100天的博客系列,介绍TypeScript。无论是TypeScript的新手,还是想复习一下已经知道的内容,或者想学习一些可能还没有遇到过的新东西,这个系列都会对有所帮助。

注意:这个博客系列并不是连续100天的发布,而是在100天内完成。

什么是TypeScript?

如果访问TypeScript的官方网站,会看到它的标语是“TypeScript是带有类型语法的JavaScript”。这到底是什么意思呢?

TypeScript最初是为了解决编写高质量JavaScript的困难而创建的。虽然这是一个主观的观点,但TypeScript迅速发展,使能够通过polyfills(别担心,会在将来的帖子中回到这个话题)使用即将到来的JavaScript特性。现在,TypeScript已经成为最受欢迎的编程语言之一。

开始使用TypeScript

可以在在线的TypeScript游乐场中开发TypeScript应用,但强烈建议将其安装在本地。要做到这一点,需要使用像npm、yarn或pnpm这样的包管理器。如果还没有安装npm,需要安装Node.js来获取它。假设已经安装了Node.js,可以使用以下命令安装TypeScript(取决于使用的包管理器)。

npm install -g typescript

是时候编写第一个TypeScript应用程序了(所有代码都可以在GitHub上找到)。

这将是一个简单的程序,用于将两个数字相加。将使用TypeScript编译器设置一些东西,以便在准备编译TypeScript代码时做好准备。

tsc --init

这将创建一个名为tsconfig.json的文件,该文件设置了编译器选项,这些选项决定了将TypeScript编译成JavaScript时JavaScript的外观;哦,等等,没有提到TypeScript会编译成JavaScript吗?顺便说一句,几乎总是使用Visual Studio Code来编辑TypeScript代码;如果以前没有使用过它,这是一个很好的选择。

将添加一个名为day1.ts的文件,将TypeScript代码添加到第一个示例中。.ts扩展名告诉这是一个TypeScript文件。如果以前使用过JavaScript,代码看起来会很熟悉。这是add函数作为JavaScript方法的样子。

function add(number1, number2) { return number1 + number2; }

说希望add函数能够添加两个数字。不想让它将两个字符串相加,或者将一个日期和一个字符串相加。这正是TypeScript的第一个优势所在,也是TypeScript标语的意义所在。将使用以下语法将函数限制为接受数字并返回数字。

function add(number1: number, number2: number): number { return number1 + number2; }

如果尝试将不是数字的东西传递给任一参数,将无法编译代码。不能将“特殊”值(如undefined或null)传递给任一参数。换句话说,刚刚编写了一个可以保护自己免受错误影响的东西。

为了测试代码,将调用该函数并将输出传递到控制台窗口,如下所示。

console.log(add(10, 20));

保存文件后,想“编译”TypeScript代码,使其变成JavaScript。为此,只需运行不带参数的tsc命令。这会获取tsconfig.json文件的内容,并使用该文件控制文件的编译方式。(这里的tsc命令应该在tsconfig.json文件所在的目录中运行)。

node day1.js
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485