【TypeScript】带类型语法的JavaScript

简介: 【1月更文挑战第26天】【TypeScript】带类型语法的JavaScript

 image.gif编辑

目录

TypeScript 概述:

为什么一定要在TypeScript中为JS添加类型支持?

TypeScript 相比 JS 优势?

配置 TS 开发环境:

编译并运行TS代码:

简化 TS 代码运行:

结束语句 END-FEIHUA:


个人习惯,上来就是官方链接扔脸上 😏

image.gif编辑

image.gif编辑


TypeScript 概述:

       TypeScript is JavaScript with syntax for types.

       TypeScript 带类型语法的JavaScript!作为JavaScript 的超集!总之就是比JavaScript更6

X,换句话说就是语法特性更多,更难学,好了!现在可以点个关注,收藏可以退出了!哈哈哈,开个玩笑,我们继续往后面学习!

      TypeScript 是在JavaScript 基础上增加了对数据类型的支持!

// 使用JavaScript声明变量:
let value = "key"
// 使用TypeScript声明变量,需要指定数据类型:
let value: String = "Key"

image.gif

       看到这里肯定会有小伙伴要问了:JavaScript 不指定变量类型,作为一门动态类型语言,我用的爽的飞起,不用指定变量类型,赋个值就好啦,为啥要在上面指定数据类型吶?

image.gif编辑

为什么一定要在TypeScript中为JS添加类型支持?

image.gif编辑

       又有小伙伴问啦:那好处在哪里呢?要是好处不明显还不如就使用JS,降低学习成本呀?这叫什么?精打细算!

image.gif编辑

TypeScript 相比 JS 优势?

image.gif编辑

       大概优势就是,让你减少写Bug,找Bug和改Bug的摸鱼时间,极大的提高了资本剥削与压榨,我觉得对个人发展十分不友好(手动狗头保命)注意:能让你走在前端技术的前沿!!!

image.gif编辑

       这里估计又有人要说了,这么好,我是一个热爱劳动的人,那么那我们快点开始学习吧!

       好的,文西!那我们就开始学习TS吧(TypeScript 和 JavaScript 打字太麻烦,这里使用TS JS 代替,没错,我就是这么高效率的一个人,优秀!)

image.gif编辑


配置 TS 开发环境:

       啊这,这时目前我还不能接受的,所谓的更高级的TS,编译运行居然是把TS编译成JS然后在Node和浏览器中运行!

image.gif编辑

image.gif编辑

       安装TS转换包:

npm i -g typescript

image.gif

       验证是否安装成功:

tsc -v

image.gif

编译并运行TS代码:

       直接上手开始敲代码,不要怂!学习编程就和追女生一样,怂了,你就输了百分之90!

       那就有人又要问了,就然不怂的话是不是就有女朋友了?你有女朋友吗?就在这里瞎扯!!!

       哈哈哈,鄙人不才,请点击下方头像打开我的主页,看到我的头像,不要伤心!劳烦点个关注,将我传到首页解惑,哈哈哈!

image.gif编辑

        咳,咳,跑远了......继续,我们先使用VS code或者其他的IDE工具,创建一个Hello.ts文件(注意:这里的后缀名是ts,不是js),大佬请用记事本打开编写,当然像我这种废物优秀的人,直接安排vim!

image.gif编辑

image.gif编辑

       为了展示我的实力,有必要截图见证一下(手动坏笑):

       创建一个TS文件:

image.gif编辑

        敲代码:

image.gif编辑

        还真就编程了JS文件:

image.gif编辑

       使用Node运行JS文件:

image.gif编辑

简化 TS 代码运行:

       当然这种**的运行方式,显然不符合大众的开发效率呀,当然简化方法:

image.gif编辑

        全局安装ts-node:

npm i -g ts-node

image.gif


结束语句 END-FEIHUA:

       OK,到这里我估计各位小伙伴对与TS已经有了一个大概的认识,在后续的教程中我将继续废话式输出TS的学习笔记,如果有兴趣的小伙伴,希望能求个三连,跪谢!!!

       这也是我第一次尝试使用整活的方式输出技术类的文章,如果对此有什么不满或者意见的话可以私信或者评论区给我一波留言,看到后我会第一时间回复大家,再次感谢!

image.gif编辑

       话说这不会是屏幕前你看到这里是的样子吧!!!

image.gif编辑



相关文章
|
4月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
4月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
4月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
7月前
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
1280 103
|
3月前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
379 184
|
2月前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript:技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集,通过静态类型系统、编译时错误检测和强大的工具链支持,显著提升代码质量与可维护性,尤其适用于中大型项目和团队协作。相较之下,JavaScript 更灵活,适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异,并提供技术选型建议,助力开发者合理选择。
463 1
|
4月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
9月前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
390 82
|
6月前
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
12月前
|
JavaScript 前端开发 安全
探索Deno:新一代JavaScript/TypeScript运行时
Deno是由Node.js创始人Ryan Dahl发起的新一代JavaScript/TypeScript运行时,旨在提升安全性、模块化和性能。本文介绍了Deno的核心特性,如内置TypeScript支持、强大的模块系统、权限管理和测试工具,以及开发技巧,帮助开发者构建更安全、高效的Web应用。