[前端基础]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…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...

C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...

【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...

搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...