[前端基础]typescript安装以及类型拓展
(0)写在前面:
作者之前都是在写js,所以这里介绍ts肯定是不能从头开始介绍了,主要在js的基础上介绍ts关于类型的几个特性,以及ts的安装还有配置问题
(1)ts和js是什么关系
通俗点来讲,ts是js的扩展,或者说js可以理解为ts的一部分。在实际应用上来说,ts是对js在编写层面上作出的一种规范。甚至运行的时候,都要通过ts编辑器将ts代码文件转化为js代码才能顺利执行。
(2)ts的安装,启动以及环境配置
ts的安装可以直接使用指令
npm install -g typescript
下载完成后,通过tsc指令编译你的ts文件
tsc ‘目标文件名称’
会生成同名的js文件,这个时候再使用node去执行js
node ‘同名的js文件’
这个其实就是底层的原理,因为node环境还有浏览器环境之恩那个识别js,所以我们要先把ts转化为js。第一眼看可能是多次一举,但是在编写ts的时候,无论是ide也好,ts编译器也好,都会对我们的一些错误进行修正,让生成的js代码更加和谐。
不过如果想要跳过这个中间产物,可以直接使用工具ts-node,可以直接去编译ts并且执行,不需要我们手动去执行一些东西了
npm install -g ts-node
接下来就可以通过这个第三方工具直接执行ts文件了
ts-node ‘ts文件’
一个可能需要注意一点的问题就是,有些时候安装完了这两个工具可能是会识别不出tsc和ts-node这两个东西是什么,原因在于window下我们一般要手动配置环境变量。
其实-g这个参数的意思就是全局安装,但是在window下,会有很多其奇怪挂的情况,所以这个全局安装多半会失败。
这个的解决方法就是,你需要从node-module模块中寻找到可能会需要到的应用程序,然后单独提取出来,再把环境变量指向这个东西。(具体可以询问身边的老手或者ai工具,这个东西应该是每个node程序员都要会的)
当然如果你是linux系统就不会有这个顾虑,因为linux处理这类安装的时候,一般是自动帮你集成好了环境变量。
(3)一些关于类型的特性
详见代码注释
//首先要说一句 ts是js的超类,所以js的代码全部是ts代码的一部分
console.log('ddd')//首先声明变量key可以加上类型,ts会做相关的检查
let a:string='dddd'//对于对象,也可以使用接口的方式进行检查
interface User {name:string;age:number;
}
const user:User={name:'',age:0}//方法也可以使用这种方式,对传入参数进行检查
//并且控制返回值的类型
//如图所示,返回一个字符串
function deleteUser(user: User):string {// ...
}//定义组合类型:
type myType=1|2|3|4
// const b:myType=0这样子就会报错
// 有点类似枚举的感觉
//应用:
function testType(obj:string|string []){//这参数可以接收字符串或者字符串数组,内部可以使用typeof等等方法做尝试
}//泛型,用法和其他语言差不多,用来指明本语言中缺失的部分
class Student<type>{name:type;constructor(name:type){this.name=name}
}//结构类型系统,一个ts中很有意思的点,如果有相同的属性部分,那么在使用的时候就会被视为是同一种类型
function testT(point:{x:string,y:number}){//...里面是一些属性
}
//这时候可以传入
testT({x:'',y:1})
//也可以,以这样的方式传入,子集xy的部分会被视为point同类型的东西
const x={x:'',y:1,z:12}
testT(x)
//自由度是真的高啊。。。。
(4)关于类型别名和接口
对于一些自定义类型,我们可以其别名
例如我们设置一个枚举类型,0-7
type num=0|1|2|3|4|5|6|7
这样num这个类型的对象,或者说变量,取值只能是0-7的其中一个数字
上面利用对象也是一样的
当然对于对象还有别的可用方式:接口
interface User {name:string;age:number;
}
const user:User={name:'',age:0}
这种方式就允许我们自定义一些特殊的类,此外接口和别名也有些不一样的地方,比如说接口允许我们通过继承来叠加东西
(不过js和ts本身也不是面向对象的语言。。。所以就这样)
(5)关于字面类型
字面类型有种语法糖的感觉,或者可以说是匿名类?
const name:'head'='head'
像是这段代码所展示的内容一样,name这变量的类型被固定在’head‘这个字符串上了
。。。感觉好像有点鸡肋,但是这种用法主要是用来搭配其他的东西
const num:'1'|'2'|'3'='3'
这样是不是就好理解一点
(6)关于断言
ts中的断言和其他语言中的assert不一样,ts的断言主要是一种声明,告知tsc不需在做一些检查了。
虽然这样的操作有时候会发生一些逻辑上的错误,造成一点问题。但是个别时候代码逻辑需要我们告诉编译器某种情况。
ts中的断言分为两种:as,!
as:类型断言(Type Assertion):使用 as
关键字或尖括号(<>
)语法,将一个值断言为特定的类型。这可以用于告诉编译器在某个上下文中使用特定类型,即使它的类型推断可能是其他类型。
const a='dududu' as string
const a=<string>'dududu'
!:非空断言(Non-null Assertion):使用感叹号 !
,表示告知编译器一个变量不会为 null
或 undefined
。这可以用于避免空值检查,并在访问变量的属性或方法时省略空值检查。
const a=bunn!.name
断言其实就是一种提前声明:告诉编译器“我已经确定这是什么类型了,不用检查了”
相关文章:
[前端基础]typescript安装以及类型拓展
(0)写在前面: 作者之前都是在写js,所以这里介绍ts肯定是不能从头开始介绍了,主要在js的基础上介绍ts关于类型的几个特性,以及ts的安装还有配置问题 (1)ts和js是什么关系 通俗点来…...
网络参考资料汇总(1)
将这段时间参考的各路大佬的资料加以汇总分类: (1)FFmpeg: 基于FFmpeg进行rtsp推流及拉流(详细教程) Linux 编译安装 FFmpeg 步骤(带ffplay) Jetson 环境安装(三):jetson nano配置ffmpeg和ngin…...
Remove和RemoveLast用法
LeetCode 46 全排列 先贴代码 class Solution {List<List<Integer>> result new ArrayList<>();List<Integer> temp new ArrayList<>();public List<List<Integer>> permute(int[] nums) {dfs(nums, 0);return result;}public v…...

(一) 使用 Hugo 搭建个人博客保姆级教程(上篇)
手把手教你如何从0开始构建一个静态网站,这不需要有太多的编程和开发经验和时间投入,也基本不需要多少成本(除了个性化域名),使用GitHub和Hugo模板即可快速构建和上线一个网站。 目标读者 本文档适用于以下用户&…...

数据结构之栈
栈的模拟实现 1.栈的概念2.栈的方法3.栈的模拟实现(代码)3.1 接口My_Stack3.2 StackList3.3 异常类StackException3.4 测试类Test 1.栈的概念 2.栈的方法 3.栈的模拟实现(代码) 3.1 接口My_Stack 3.2 StackList 3.3 异常类StackException 3.4 测试类Test...

wireshark of tshark tools v3.4.0版本 支持json
tshark(1) Install tshark (Wireshark) Ver.3.4.0 on CentOS7 --It must be "ps", "text", "pdml", "psml" or "fields". TCP 协议中的三次握手和四次挥手是 TCP 连接建立和关闭的过程。 三次握手 客户端向服务器发送 SYN…...

Python开源项目月排行 2023年9月
#2023年9月2023年9月9日1fishdraw这个项目是用来随机生成一条鱼的,这条鱼特别的稀奇古怪,这个项目不依赖任何库,支持 svg, json, csv 等格式。2vizro一个用于创建模块化数据可视化应用程序的工具包。在几分钟内快速自助组装定制仪表板 - 无需…...

uniapp项目实践总结(二十五)苹果 ios 平台 APP 打包教程
导语:当你的应用程序开发完成后,在上架 ios 应用商店之前,需要进行打包操作,下面就简单介绍一下打包方法。 目录 准备工作注册账号生成证书打包配置准备工作 在打包之前,请保证你的 uniapp 应用程序编译到 ios 模拟器或者是真机调试基座环境下是可以正常运行的,苹果打包…...

MySQL查询(基础到高级)
一、单表查询: 1.基本查询: 1.1 查询多个字段: 1.查询所有字段: select * from 表名;2.查询指定字段: select 字段1,字段2 from 表名; 1.2 去除重复记录 select distinct "字段" FROM "表名"; …...

电脑通过串口助手和51单片机串口通讯
今天有时间把电脑和51单片机之间的串口通讯搞定了,电脑发送的串口数据,单片机能够正常接收并显示到oled屏幕上,特此记录一下,防止后面自己忘记了怎么搞得了。 先来两个图片看看结果吧! 下面是串口3.c的文件全部内容&a…...

【Linux】线程详解完结篇——信号量 + 线程池 + 单例模式 + 读写锁
线程详解第四篇 前言正式开始信号量引例信号量的本质信号量相关的四个核心接口生产消费者模型用环形队列实现生产者消费者模型基于环形队列的生产消费模型的原理代码演示单生产者单消费者多生产者多消费者 计数器的意义 线程池基本概念代码 单例模式STL,智能指针和线程安全STL中…...

弧度、圆弧上的点、圆的半径(r)、弧长(s)之间的关系
要计算弧度和圆弧上的点,需要知道以下几个要素: 圆的半径(r):即圆的中心到圆周上任意一点的距离。 弧长(s):从圆周上的一个点到另一个点所经过的弧长。 弧度(θ&#x…...
[AOSP] [JNI] [Android] AOSP中使用JNI
一. 简要 🍎 JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C)。从Java1.1开始,JNI标准成为java平台的一部分,它允许Java代码和其他语言写的代码进行交互。J…...
GEE案例——如何使用长时序影像实现多波段图像加载(不同层土壤湿度)
简介: 在GEE中实现时序图像的加载主要的目的是查看影像波段或者指数的变化,这里我们使用的主要是加载常规的4个波段,然后添加一个复合波段,复合波段主要的是求4个波段的平均值,然后再次加入到原有的4个波段的时序图中。这里面主要的技术难点一个是图表的设定,另外一个就…...

Cloudflare进阶技巧:缓存利用最大化
1. 引言 cloudflare我想你应该知道是什么,一家真正意义上免费无限量的CDN,至今未曾有哥们喷它的。当然,在国内的速度确实比较一般,不过这也不能怪它。 CDN最大的特色,我想就是它的缓存功能,达到防攻击&am…...

想要精通算法和SQL的成长之路 - 二叉树的判断问题(子树判断 | 对称性 | 一致性判断)
想要精通算法和SQL的成长之路 - 二叉树的判断问题 前言一. 相同的树二. 对称二叉树三. 判断子树 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 相同的树 原题链接 这题目典型的递归题: 如果两个节点都是null,我们返回true。如果两个节点一个nul…...
(零)如何做机器视觉项目
文章目录 1 项目的前期准备1.1 从5个方面初步分析客户需求1.2 方案评估与验证1.3 签订合同 2 项目规划2.1 定义客户端的详细需求2.2 制定项目管理计划2.3 方案评审 3 详细设计3.1 硬件设备的选择与环境搭建3.2 软件开发平台与开发工具的选择3.3 机器视觉系统的整体框架与开发流…...

【Leetcode】滑动窗口合集
这里写目录标题 209.长度最小的子数组题目思路代码 3. 无重复字符的最长子串(medium)题目思路 11. 最大连续 1 的个数 III题目思路 1658. 将 x 减到 0 的最⼩操作数题目思路代码 904. 水果成篮题目思路代码 438.找到字符串中所有字母的异位词题目思路代码…...

【C++】STL详解(九)—— set、map、multiset、multimap的介绍及使用
📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:C学习 🎯长路漫漫浩浩,万事皆有期待 上一篇博客:【C】STL…...

计组—— I/O系统
📕:参考王道课件 目录 一、I/O系统的基本概念 1.什么是“I/O”? 编辑2.主机如何和I/O设备进行交互? 3.I/O控制方式 (1)程序查询方式 (2)程序中断方式 (3&#x…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...

AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...

分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术,它们扮演着完全不同的角色: Redis: 内存数据库/数据结构存储 本质: 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能: 提供丰…...

算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...