什么是 TypeScript？-程序员宅基地
技术标签： 前端 typescript javascript
在今天的教程中，我们将一起来了解什么是 TypeScript ，以及它相对于原生 JavaScript 的一些优势。
TypeScript 简介
TypeScript 是 JavaScript 的超集。
TypeScript 建立在 JavaScript 之上。首先，我们编写 TypeScript 代码。然后，我们使用 TypeScript 编译器将 TypeScript 代码编译为纯 JavaScript 代码。
拥有纯 JavaScript 代码后，我们可以将其部署到 JavaScript 运行的任何环境中。
TypeScript 文件的扩展是 .ts ，而不是 JavaScript 文件的 .js 扩展名。
TypeScript 使用 JavaScript 语法，并添加了额外的语法来支持类型。
如果我们的 JavaScript 程序没有任何语法错误，那么，它也是一个 TypeScript 程序。这意味着所有的 JavaScript 程序都是 TypeScript 程序。
如果我们要将现有的 JavaScript 代码库迁移到 TypeScript，这将非常有用。
下图展示了 TypeScript 和 JavaScript 之间的关系：
为什么选择 TypeScript
TypeScript 的主要目标是：
-
将可选类型引入 JavaScript。
-
在当前 JavaScript 的基础上实现未来 JavaScript 的计划功能，即 ECMAScript Next 或 ES Next。
1) TypeScript 提高我们的工作效率，同时帮助避免bug
类型通过帮助我们避免许多错误来提高生产力。通过使用类型，我们可以在编译时捕获错误，而不是让它们在运行时发生。
以下函数将两个数字 x 和 y 相加：
function add(x, y) {return x + y;}
如果我们从 HTML 输入元素中获取值并将它们传递给函数，我们可能会得到意想不到的结果：
let result = add(input1.value, input2.value);console.log(result); // result of concatenating strings
例如，如果用户输入 10 和 20，则 add() 函数将返回 1020，而不是 30。
原因是 input1.value 和 input2.value 是字符串，而不是数字。当我们使用运算符 + 添加两个字符串时，它将它们连接成一个字符串。
当我们使用 TypeScript 显式指定参数的类型时，如下所示：
function add(x: number, y: number) {return x + y;}
在此函数中，我们将数字类型添加到参数中。函数 add() 将只接受数字，而不接受任何其他值。
当我们按如下方式调用该函数时：
let result = add(input1.value, input2.value);TypeScript 的主要目标是：
-
向 JavaScript 引入可选类型。
-
实现未来 JavaScript 的计划功能，即当前 JavaScript 的 ECMAScript Next 或 ES Next。
1) TypeScript 提高您的工作效率，同时帮助避免错误
类型通过帮助你避免许多错误来提高生产力。通过使用类型，你可以在编译时捕获错误，而不是让它们在运行时发生。
以下函数将两个数字x和相加y：
function add(x, y) {
return x + y;}：
如果你从 HTML 输入元素获取值并将它们传递给函数，你可能会得到意想不到的结果：
let result = add(input1.value, input2.value);console.log(result); // result of concatenating strings
例如，如果用户输入10and 20，add()函数将返回1020，而不是30。
原因是input1.valueandinput2.value是字符串，而不是数字。当你使用运算符+将两个字符串相加时，它会将它们连接成一个字符串。
当你使用 TypeScript 显式指定参数的类型时，如下所示：
function add(x: number, y: number) {
return x + y;}
在这个函数中，我们将数字类型添加到参数中。该函数add()将只接受数字，而不接受任何其他值。
当你调用该函数时，如下所示：
let result = add(input1.value, input2.value);
如果我们把 TypeScript 代码编译成 JavaScript，TypeScript 编译器会报错。因此，我们可以防止错误在运行时发生。
2) TypeScript 将JavaScript 带到了今天
TypeScript 支持在 ES Next 中为当前 JavaScript 引擎的功能计划即将推出。这意味着我们可以在 Web 浏览器（或其他环境）完全支持它们之前使用新的 JavaScript 功能。
每年，TC39 都会为 JavaScript 的标准 ECMAScript 发布几个新功能。功能提案通常经历五个阶段：
-
Stage 0: Strawperson
-
Stage 1: Proposal
-
Stage 2: Draft
-
Stage 3: Candidate
-
Stage 4: Finished
TypeScript 通常支持第 3 阶段的功能。
智能推荐
idea启动maven项目_maven项目在idea中怎么启动-程序员宅基地
文章浏览阅读1.6w次，点赞2次，收藏8次。未集成tomcat的maven项目启动如下：项目文件tips：open文件是打开已经存在好的.idea配置文件的项目，如果没有的话就选择import project然后基本可以一路next（中途有个配置jdk的，如果是第一次打开idea的话需要配置。）需要启动项目分别需要配置：JDK，MAVEN，Tomcat。操作如下图JDK,MAVEN配置详情不叙述，这里讲解下配置tomca..._maven项目在idea中怎么启动
接口踩坑：Status (blocked:other)-程序员宅基地
文章浏览阅读2.4k次。1、请求接口时出现 Status (blocked:other)2、原因分析：安装了Adblock3、解决办法1）关掉Adblock2）修改接口名称，不能用 ad 或者 ad等名称_(blocked:other)
docker安装nginx并配置SSL_docker中启动nginx并配置ssl-程序员宅基地
文章浏览阅读1.5k次。2、启动nginx容器，复制一份默认配置文件出来。4、重新创建nginx容器并挂载配置目录。7、修改配置宿主机，增加ssl证书配置。创建成功后会看到nginx的欢迎页面。进入容器查看挂载文件是否同步到容器内。能进入目录则表示同步成功，退出容器。进入容器的nginx配置目录。6、在宿主机创建ssl目录。3、挂载nginx目录。8、重启nginx容器。5、查看挂载是否成功。_docker中启动nginx并配置ssl
一统江湖的大前端React.js-从开发者到工程师-程序员宅基地
文章浏览阅读25次。《一统江湖的大前端》系列是自己的前端学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库，不定期更新。如果你对前端的理解还是写写页面绑绑事件，那你真的是有点OUT了，前端能做的事情已经太多了,手机app开发,桌面应用开发,用于神经网络人工智能的库,页面游戏,...
apt-get install build-essential Depends: libc6-dev but it is not going to be installed_build-essential : depends: libc6-dev but it is not-程序员宅基地
文章浏览阅读1.9w次，点赞5次，收藏8次。ubuntu17 默认没有安装gcc的build-essential : Depends: libc6-dev but it is not going to be installed or libc-dev Depends: g++ (>= 4:5.2) but it is not going ..._build-essential : depends: libc6-dev but it is not going to be installed or
有手机就能用的ChatGPT4.0，支持AI绘画-程序员宅基地
文章浏览阅读510次，点赞23次，收藏16次。Prompt: flat lay photography of happy sunny side up egg, vibrant morning sunlight, minimalistic composition, porcelain plate, perfectly centered, close-up shot (平铺摄影：快乐的向阳鸡蛋，充满活力的清晨阳光，简约构图，瓷盘，完全居中，特写镜头)拍摄的角度和距离可以极大地改变观众对食物的感知。近距离展示食物垂直的结构，可以突出美食的层次感。
随便推点
打造专业AI数字人短视频：背景添加详细教程（适用于数字人SaaS系统或剪映）_剪映如何添加自己的数字人 csdn-程序员宅基地
文章浏览阅读686次，点赞9次，收藏9次。1. 创建专属数字人模特：首先，使用先进的优秘数字人SaaS系统，根据拍摄需求上传内容，系统将自动训练并创建出多个虚拟AI数字人模特供你选择。2. 挑选心仪的数字人：在模特页面，你可以尽情挑选喜欢的数字人形象。1. 导出数字人视频：在优秘数字人SaaS系统中选择好数字人模特，输入文本并选择合适的音色，或者自定义上传录音，然后下载数字人视频。6. 导出分享：一切调整完毕后，点击导出按钮，你的数字人短视频就制作完成了！4. 智能抠图：添加数字人视频后，进行剪切并选择“智能抠图”功能，让数字人与背景完美融合。_剪映如何添加自己的数字人 csdn
Android Studio代码提示自动补全设置_android studio 设置代码提示和代码自动-程序员宅基地
文章浏览阅读1.5w次，点赞12次，收藏8次。最近学习Android开发课程，用的是Android studio开发工具。刚开始用发现竟然没有代码提示补全功能，我自己去看了一下设置，又设置了匹配补全提示，code起来还是不行。后来上网搜索，都是一些关于如何设置个性化自动补全提示的内容，也尝试着试了一下都没用，人麻了，后来终于看到一篇文章说，Android studio有个什么省电模式，得把这个关了自动补全才起作用。file-》下的这个power save mode取消选择，然后就有提示了，其他需要怎么设置再去setting里希望能帮助._android studio 设置代码提示和代码自动
Tomcat查错日志_tomcat err=0x0000000000000015-程序员宅基地
文章浏览阅读1.7k次。文章目录一、JVM致命错误二、了解日志三、解决HttpClient超时问题本地调试没有问题的程序，在生产系统一跑就出现各种问题。这个时候我们一般都通过定位部署容器的日志目录来检查问题，比如这里以Tomcat容器为例，我们可以在Tomcat根目录下的logs文件夹下找到catalina.log、localhost.log等日志文件。这些只能记录运行过程中的日志，如果遇到程序崩溃的问题，这里的日志就不能满足我们的查错需求了。一、JVM致命错误如果出现致命错误导致程序调停，那么我们就需要到另一个目录下进_tomcat err=0x0000000000000015
使用C语言自定义创建bmp图片_c语言中生成图片的自建函数有哪些-程序员宅基地
文章浏览阅读179次。定义文件头和调色板创建100×100黑白图像创建100×100的256色图像创建100×100的乱码图像//文件类型，必须是0x4D42，即字符串“BM”，也就是说所有.bmp文件的头两个字节都是“BM”//bmp文件所占的空间//保留字1//保留字2//从文件头到实际数据处的偏移量//本结构体所使用的字节数为40字节//bmp宽度//bmp高度//目标设备级别，必须为1//表示颜色时每个像素要用到的位数，常用的值为1(黑白二色图), 4(16色图), 8(256色), 24(真彩色图)_c语言中生成图片的自建函数有哪些
ubtunu打开firefox_虚拟机Ubuntu下安装Firefox浏览器-程序员宅基地
文章浏览阅读1.4k次。首先去官网下载最新版本火狐浏览器forlinux系统，附链接http://www.firefox.com.cn/download/，是一个.tar.bz2的压缩包，放自定义目录下:1.若以前安装过旧版本，先删除旧版的firefox：sudoapt-get remove firefox注意不要加--purge 选项，否则将会把之前版本的配置也一并删除，那么更新后就不能继承原来的一些插件啥的了。2.解..._ubuntu怎么用命令打开火狐
requests.exceptions.SSLError: HTTPSConnectionPool(host='XXX', port=443)问题-程序员宅基地
文章浏览阅读1.7w次，点赞14次，收藏22次。具体报错是这样的：requests.exceptions.SSLError: HTTPSConnectionPool(host='某某某网站', port=443): Max retries exceeded with url: /login/ (Caused by SSLError(SSLError("bad handshake: Error([('SSL routines', 'tl...