当前位置：首页 > news >正文

TypeScript之基础知识

news 来源：原创 2025/5/23 0:02:40

基础知识

1. 基本类型

类型	描述
`string`	字符串（如 `"hello"`）
`number`	数字（整数或浮点数，支持二进制、八进制、十六进制）
`boolean`	布尔值（`true`/`false`）
`null`	空值（需显式声明）
`undefined`	未定义值（需显式声明，严格模式下不可隐式赋值）
`symbol`	唯一且不可变的值（通过`Symbol()`创建）
`object`	狭义对象（如对象、数组、函数，不包括原始类型）
`any`	关闭类型检查（谨慎使用！）
`void`	表示无返回值的函数
`never`	永不返回的函数（如抛出错误或无限循环）

2. 接口与类型别名

接口（Interface）：

interface User {name: string;age: number;isAdmin?: boolean; // 可选属性
}

类型别名（Type Aliases）：

type UserID = string | number; // 联合类型
type Point = [number, number]; // 元组类型

3. 函数类型

// 参数与返回值类型
function add(a: number, b: number): number {return a + b;
}// 可选参数与默认值
function greet(name: string, greeting: string = "Hello"): string {return `${greeting}, ${name}`;
}// 剩余参数
function sum(...nums: number[]): number {return nums.reduce((a, b) => a + b, 0);
}

4. 泛型

// 泛型函数
function identity<T>(arg: T): T {return arg;
}// 泛型类
class GenericBox<T> {private value: T;constructor(value: T) { this.value = value; }getValue(): T { return this.value; }
}

5. 联合类型与类型守卫

// 联合类型
let value: string | number = "TypeScript";
value = 42;// 类型守卫
function logValue(value: string | number) {if (typeof value === "string") {console.log(value.toUpperCase());} else {console.log(value.toFixed(2));}
}

6. Vue 中的 TypeScript 使用

6.1 安装与配置

Vue CLI 项目：

vue create my-project --default
# 选择 TypeScript 支持

Vite 项目：

npm create @vitejs/app my-project -- --template vue-ts

手动配置：

安装依赖：

npm install vue @vue/runtime-core @vue/compiler-sfc
npm install typescript @types/node --save-dev

创建 tsconfig.json：

{"compilerOptions": {"target": "ESNext","module": "ESNext","strict": true,"moduleResolution": "node","esModuleInterop": true,"skipLibCheck": true,"sourceMap": true},"include": ["src/**/*.ts", "src/**/*.vue"]
}

6.2 Vue 组件的 TypeScript 写法

Options API：

<script lang="ts">
import { defineComponent } from 'vue';interface User {name: string;age: number;
}export default defineComponent({data() {return {user: {} as User, // 强制类型};},methods: {greet(): void {console.log(`Hello ${this.user.name}`);}}
});
</script>

Composition API：

<script setup lang="ts">
import { ref } from 'vue';interface User {name: string;age: number;
}const user = ref<User>({name: "Alice",age: 25
});const greet = (): void => {console.log(`Hello ${user.value.name}`);
};
</script>

6.3 Props 类型定义

<script setup lang="ts">
import type { PropType } from 'vue';interface User {id: number;name: string;
}defineProps({user: {type: Object as PropType<User>,required: true},count: {type: Number as PropType<number>,default: 0}
});
</script>

6.4 响应式数据与类型推断

<script setup lang="ts">
import { ref, reactive } from 'vue';// ref
const count = ref<number>(0); // 显式类型
const message = ref("Hello"); // 推断为 string// reactive
const state = reactive({user: {name: "Alice",age: 25}
});
</script>

6.5 Vue 的类型定义文件

Vue 提供了类型定义文件（如 @vue/runtime-core），可直接使用内置类型：

import { Ref, ComputedRef } from 'vue';const count: Ref<number> = ref(0);
const double: ComputedRef<number> = computed(() => count.value * 2);

7. 常见问题与最佳实践

如何处理 null 和 undefined？

// 开启 strictNullChecks
function safeLog(value: string | null) {if (value !== null) {console.log(value.length); // 确定非 null}
}

避免过度使用 any：

let data: unknown = "TypeScript";
if (typeof data === "string") {console.log(data.toUpperCase());
}

Vue 中的类型断言：

<script setup lang="ts">
const element = document.getElementById("app") as HTMLDivElement;
element.style.color = "red";
</script>

TypeScript之基础知识

基础知识 1. 基本类型类型描述string字符串（如 "hello"）number数字（整数或浮点数，支持二进制、八进制、十六进制）boolean布尔值（true/false）null空值（需显式声明&#x…...

编程日记 2025/5/23 0:02:40

SNMP协议之详解（Detailed Explanation of SNMP Protocol）

SNMP协议之详解一、前言 SNMP，被形象地喻为网络世界大的工具箱，使他们能的“智慧守护者”，它为网络管理员装备了一套功能强够实现对网络设备状态的实时监控、性能数据的全面收集、远程配置的灵活管理以及故障事件的即时响应。借助SNMP&…...

编程日记 2025/5/22 23:54:23

机器学习-入门-线性模型(2)

机器学习-入门-线性模型(2) 3.4广义线性回归一般形式： y g − 1 ( w T x b ) y g^{-1} \left( w^T x b \right) yg−1(wTxb) 单调可微的联系函数 (link function) 令 g ( ⋅ ) ln ⁡ ( ⋅ ) g(\cdot) \ln (\cdot) g(⋅)ln(⋅) 则得到对数线性回归 ln ⁡…...

编程日记 2025/5/22 22:02:54

问题启动n8n之后，docker容器提示： There is a deprecation related to your environment variables. Please take the recommended actions to update your configuration: 2025-04-28 09:20:08 - N8N_RUNNERS_ENABLED -> Running n8n without tas…...

编程日记 2025/5/22 22:46:57

基于 Spring Boot 瑞吉外卖系统开发（八）

基于 Spring Boot 瑞吉外卖系统开发（八） 自动填充公共字段 MyBatis-Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，降低了冗余代码的数量。本…...

编程日记 2025/5/10 2:03:35

LeetCode热题100--560.和为K的子数组（前缀和）--中等

1.题目给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。示例 1： 输入：nums [1,1,1], k 2 输出：2 示例 2： 输入：nums […...

编程日记 2025/5/21 20:46:45

搭建 Spark YARN 模式集群指南

在大数据处理领域，Apache Spark 凭借其卓越的性能和易用性广受青睐。而 YARN（Yet Another Resource Negotiator）作为 Hadoop 的资源管理框架，能高效管理集群资源。将 Spark 与 YARN 结合，以 YARN 模式搭建集群&#xf…...

编程日记 2025/4/29 16:38:57

服务器部署，Nginx安装和配置

Nginx简介 Nginx是一款轻量级和高性能的web服务器、反向代理服务器和电子邮件代理服务器。你可以使用Nginx实现网页的部署，解决跨域问题实现邮件服务器，甚至Nginx也可以实现音视频推流拉流服务器，Nginx可以实现的功能远超你的想象&#xff0…...

编程日记 2025/5/20 14:29:08

Java后端接口调用拦截处理：注解与拦截器的实现

在Java开发中，对后端接口调用进行拦截处理是一种常见的需求，通常用于权限验证、Token校验、状态更新等操作。本文将围绕 Spring框架的拦截器（Interceptor）、Spring AOP（面向切面编程） 和 Spring Security 三…...

编程日记 2025/5/21 9:21:36

C++（初阶）（十四）——多态

多态面向对象的其中一大特征。多态多态的定义及构成多态的构成条件多态的实现条件多态的分类编译时多态性运行时的多态性虚函数定义不能成为虚函数的函数虚函数重写（覆盖）选择题虚函数重写的其他问题析构函数的重写override 和final关键字重载/重写…...

编程日记 2025/5/22 23:22:23

PyQt6基础_QThread

目录前置代码： 运行正常运行 QThread运行报错视频前置 1 PySide6.QtCore.QThread - Qt for Python QThread官方文档 2 长时间任务可以放到QThread中执行，避免占用主线程导致界面卡顿无法操作代码： import traceback,sys fro…...

编程日记 2025/5/22 23:50:38

工业通讯现场中关于EtherCAT转TCPIP网关的现场应用

在当今工业自动化的浪潮中，EtherCAT技术以其高效、实时的特性成为了众多制造业的首选。然而，随着工业互联网的发展，对于数据的远程访问和云平台集成的需求日益增长，这就需要将EtherCAT协议转化为更为通用的TCP/IP协议。于是开疆智…...

编程日记 2025/4/29 16:35:37

vite创建vue3项目并进行配置

创建项目方式一执行以下命令之后输入项目名称选择框架选择语言例如 pnpm create vite此方式创建的项目较为干净 0手起步只包含一些基础依赖例如vue vite等项目目录如下 "scripts": {"dev": "vite","build": "vue-tsc -…...

编程日记 2025/5/22 0:54:08

LeetCode 热题 100_最小路径和（92_64_中等_C++）（多维动态规划）

LeetCode 热题 100_最小路径和（92_64） 题目描述：输入输出样例：题解：解题思路：思路一（多维动态规划）： 代码实现代码实现（思路一（多维动态规划&…...

编程日记 2025/4/29 16:33:22

关于常量指针和指向常量的指针

关于指针，对于常量指针和指向常量的指针也是傻傻分不清。看到定义时，不知道是指针不能变，还是指针指向的内容不能变量。先看形式： const char * A; char * const B; 这两种有什么区别？傻傻分不清。 A这种定义&am…...

编程日记 2025/5/22 22:50:06

新时代下的存储过程开发实践与优化

随着现代应用系统的复杂度不断增加，数据库作为核心的数据存储和处理引擎，其性能和可靠性显得尤为重要。存储过程（Stored Procedure）作为一种封装在数据库中的应用逻辑，使得开发者能够在数据库层面实现数据操作、数据校…...

编程日记 2025/5/22 5:53:41

4月28日日记

2025年4月28日星期一晴今天过得格外充实，也充满了收获与喜悦。下午，我参加了学校的五四述职大会。各个学院的团委书记依次上台，汇报过去一年的工作成果。看着大家在台上分享着各自学院的精彩故事，我深受触动。他们所展示的活…...

编程日记 2025/5/20 4:11:34

大模型性能测试

当我们部署了大模型并对外提供服务时，我们通常都想了解一下大模型能够支持多少个并发访问，在不同的并发数下，模型的性能如何。了解这些信息有助于我们更好的对算力进行评估，为用户带来更好的性能体验。大模型通常是通过API接口的…...

编程日记 2025/5/3 8:04:05

利用 Google Earth Engine 探索江宁区 2010 - 2020 年 EVI 时空变化

引言增强型植被指数（Enhanced Vegetation Index，EVI）是一种用于量化植被生长状态和覆盖程度的重要指标，它在监测植被动态、生态环境评估以及气候变化研究等领域发挥着关键作用。Google Earth Engine（GEE）…...

编程日记 2025/5/20 13:52:29

IEC 61850标准协议解读 2.基于Java的MMS实现

专栏文章目录第一章 IEC 61850标准协议解读 0.导言第二章 IEC 61850标准协议解读 1.建模讲解第三章 IEC 61850标准协议解读 2.基于Java的MMS实现目录专栏文章目录前言1 依赖库引入2 创建服务端3 创建客户端4 读写模型4.1 服务端读写4.2 客户端读写 5.报告6 文件服务6.1 读…...

编程日记 2025/4/29 16:23:32

花费7元训练自己的GPT 2模型

在上一篇博客中，我介绍了用Tensorflow来重现GPT 1的模型和训练的过程。这次我打算用Pytorch来重现GPT 2的模型并从头进行训练。 GPT 2的模型相比GPT 1的改进并不多，主要在以下方面： 1. GPT 2把layer normalization放在每个decoder block的前…...

编程日记 2025/5/21 10:07:00

【android bluetooth 协议分析 06】【l2cap详解 10】【通过avdtp连接流程,感受l2cap通道的生命周期变化】

本篇我们通过分析一个具体的实例，来直观感受一下 l2cap 中通道的状态变化。 1. 环境描述： 车机： a2dp sink手机: a2dp source场景： 手机主动触发连车机声明一下： 分析的btsnoop 和 logcat 还有源码，…...

编程日记 2025/5/21 2:24:32

如何在idea中写spark程序。

要在IntelliJ IDEA中编写Spark程序，你可以按照以下步骤进行： 1. 安装和配置Java：确保你的计算机上已经安装了Java Development Kit (JDK)，并且已配置好 JAVA_HOME 环境变量。 2. 安装IntelliJ IDEA：下载并安装Inte…...

编程日记 2025/5/22 20:43:53

Pytest-mark使用详解（跳过、标记、参数化)

1.前言在工作中我们经常使用pytest.mark.XXXX进行装饰器修饰，后面的XXX的不同，在pytest中有不同的作用，其整体使用相对复杂，我们单独将其抽取出来做详细的讲解。 2.pytest.mark.skip()/skipif()跳过用例 import pytest #无条…...

编程日记 2025/4/29 16:13:49

[Android] GKD v1.10.3

[Android] GKD 链接：https://pan.xunlei.com/s/VOOwKvmwpLoLl7fLi6wJZKK-A1?pwd8mey# GKD（详情请戳作者项目地址）是一款免费开源简洁多规则的自动跳过广告的软件，整体基于kotlin开发，免root即可使用。简而言之&am…...

编程日记 2025/5/19 2:14:20

C22-作业练习之最大公约数与最小公倍数

作业练习之最大公约数与最小公倍数代码 #include <stdio.h> int main() {//变量初始化int m,n;int i,gcd,lcm;//数据录入printf("请输入两个整数:");scanf("%d %d",&m,&n);//求最大公约数int min(m<n)?m:n; //找m与n的最小值for(imi…...

编程日记 2025/5/11 14:53:15

信号完整性简介第一篇

本章将讲述信号完整性相关问题。首先提出什么是高速系统设计中的信号完整性，其次结合影响信号完整性的各种因素，深入讨论在高速系统设计过程中会碰到的几类信号完整性问题，并对每一类问题提出相应的预防措施和解决方案。需要说明&#xff0…...

编程日记 2025/5/1 3:07:00

Qt开发环境的安装与问题的解决（2）

文章目录 1. Qt开发环境安装的说明2. 通过安装包进行安装3. 通过在线下载程序解决问题下载 https....网路错误问题解决开始安装--第一部分开始安装--第二部分 4. 建议配置环境变量（非必须）配置环境变量的意义简介：这篇文章主要分享Qt开发环…...

编程日记 2025/5/18 22:34:14

STM32 ADC模数转换器

一、ADC简介 ADC（Analog-Digital Converter）模拟-数字转换器ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量，建立模拟电路到数字电路的桥梁12位逐次逼近型ADC，1us转换时间输入电压范围：0~3.3V&#x…...

编程日记 2025/5/20 12:06:29

World of Warcraft [CLASSIC] Hunter[Grandel] R12

World of Warcraft [CLASSIC] Hunter[Grandel] R12 R13，[Freeblue] 可惜当时没有截图，唉，没有纪念 --- 挂机脚本...

编程日记 2025/4/29 16:03:56

kalibr：相机模型

文章目录 📚简介Kalibr标定支持的相机模型及适用场景📌 针孔相机模型（Pinhole）🌐 全向相机模型（Omnidirectional）🔍 特殊模型💡 选型建议⚠️ 注意事项📚简介 Kalibr作为多传感器标定的重要工具，支持多种相机模型以适应不同光学特性的视觉传感器。其核心相机…...

编程日记 2025/5/11 7:29:24

【AI News | 20250428】每日AI进展

AI Repos 1、dyad Dyad 是一款免费开源的本地化 AI 应用开发工具，兼容 Windows 和 Mac 双平台。支持使用自有 API 密钥灵活调用主流 AI 模型（包括 Gemini、GPT-4.1、Claude 等），内置数据库与身份验证系统可快速构建完整应用。 …...

编程日记 2025/5/8 4:42:05

DNS区域的类型

在BIND9中，type 用于定义DNS区域的类型，不同的类型决定了BIND如何处理该区域的DNS数据。以下是主要的类型及其作用详解： 1. master（主区域） 作用： 表示该区域是权威DNS服务器的主副本，负责存储…...

编程日记 2025/5/18 0:24:31

HTTP vs HTTPS：传输协议的安全演进与核心差异

HTTP（HyperText Transfer Protocol）和HTTPS（HTTP Secure）作为两种最常用的协议，其安全性和实现方式直接关系到用户隐私和数据完整性。目录一、HTTP与HTTPS的基础概念二、HTTP与HTTPS的核心差异 …...

编程日记 2025/4/29 15:55:11

Android平台Unity引擎的Mono JIT机制分析

一、分析背景 Unity引擎开发游戏采用了C#语言，Unity采用了Mono的Jit机制实现C#逻辑代码动态编译和执行，Mono属于开源的工程，可通过查看Mono源码了解其中的处理。本文针对Mono的Jit动态编译和执行的机制进行分析，更好的了解Unity引擎在Android平台所采用的处理方式。二、M…...

编程日记 2025/5/18 0:49:43

【java】接口

一、定义 1.接口中所有方法都是抽象方法和公共方法（可以省略 abstract、public），不可以有正常的方法，所有变量都是全局静态常量 2.能继承接口的只能是接口 3.接口和类的关系通过实现（重写（实现）…...

编程日记 2025/5/3 6:16:47

Vuex(二) —— 用Vuex完成购物车案例

目录需求需求分析组件分析组件通信开发准备环境准备模块结构商品列表组件展示商品列表添加购物车我的购物车组件购物车列表商品数量和统计功能删除购物车商品购物车列表组件购物车列表全选操作数字加减并统计小计删除功能统计总数量和总钱数处理金额小数的问题本地存…...

编程日记 2025/5/21 22:30:23

数字孪生的浪潮：从虚拟镜像到现实世界的 IT 变革

文章目录数字孪生的本质：物理与虚拟的实时镜像数字孪生的演进：从工业试验到全行业热潮核心技术：数字孪生的基石与工具链物联网（IoT）：数据采集云计算与大数据：模型存储AI 与机器学习&#xff1a…...

编程日记 2025/5/3 8:01:26

Web开发之三层架构

实例： 分层解耦耦合:衡量软件中各个层/各个模块的依赖关联程度。内聚:软件中各个功能模块内部的功能联系。软件设计原则:高内聚低耦合控制反转:Inversion 0f Control，简称IQC。对象的创建控制权由程序自身转移到外部(容器)，这种思想称为…...

编程日记 2025/5/15 22:42:51

社交电商和泛娱乐平台出海南美市场支付方式与策略

随着中国社交电商和泛娱乐平台加速全球化布局，南美市场凭借庞大的人口基数、快速增长的互联网渗透率和活跃的社交媒体使用率，成为出海企业的重要战略要地。然而，这片"新蓝海"的支付生态复杂多元，信用卡欺诈率高企，现金支付仍占主导，不同国家支付偏好差异显著。…...

编程日记 2025/4/29 15:49:48

Miniconda Windows10版本下载和安装

Miniconda Windows10版本下载和安装步骤1：Miniconda3下载和安装 # 1、下载地址（Windows 64位） https://repo.anaconda.com/miniconda/Miniconda3-latest-Windows-x86_64.exe #2、双击进行安装 # 安装注意事项： 1. 安装路径建议&a…...

编程日记 2025/4/29 15:49:45

编译原理：由浅入深从语法树到文法类型

文法与语言基础：从语法树到文法类型文法（Grammar）和语言（Language）是计算机科学和语言学中解析和理解语言结构的核心概念。无论是编程语言的编译器设计，还是自然语言处理（NLP）中的…...

编程日记 2025/4/29 15:48:42

初识Python

哈哈哈，为了让初学者对python进一步了解，懒惰的博主特地去问了AI，如何更加形象的形容python这一么语言 🌟 Python 是什么？ 想象一下，编程语言是一群性格各异的人： C语言：穿格子衫的…...

编程日记 2025/4/29 15:47:37

C++ —— 正向迭代器与反向迭代器

目录 1. 正向迭代器（Forward Iterator） 1.1 基本概念 1.2 核心特性 1.3 典型使用 1.4 重要特点 2. 反向迭代器（Reverse Iterator） 2.1 基本概念 2.2 核心特性 2.3 典型使用 2.4 重要特点 3. 正反迭代器对比 4. 正反迭代…...

编程日记 2025/5/22 1:55:20

FDA会议类型总结

1. 会议类型及目的 1.1 Type A会议 1.1.1 争议解决会议用于解决药物研发过程中与FDA产生的争议，明确双方分歧点。通过讨论达成共识，避免因争议影响研发进度。 1.1.2 临床保留讨论会议针对临床试验中出现的问题进行讨论，决定是否保留临床试验。综合评估临床试验的安全性…...

编程日记 2025/5/20 11:03:23

数据结构算法竞赛训练网站OJ（Online Judge)

都是个人使用过的算法训练OJ，存个档洛谷 https://www.luogu.org/ 个人使用最多的，题目较全，每题都有题解博客，社区比较完善。 PTA https://pintia.cn/ 学习数据结构和练习天梯赛的时候使用的。牛客 https://ac.nowcoder.co…...

编程日记 2025/4/29 15:42:09

快速搭建对象存储服务 - Minio，并解决临时地址暴露ip、短链接请求改变浏览器地址等问题

本文要解决的问题基础的Minio下载安装、java操作方法、完整的工具类。使用minio时需要注意的地方： 使用Minio的时候，生成资源的临时访问链接时，生成的地址IP是真实的IP和端口，不安全，怎么办？ 生成的Min…...

编程日记 2025/5/12 23:14:25

2025年- H11-Lc118-53.最大子数组和（普通数组）---java版

1.题目描述 2.思路用动态规划方法来解决【最大子数组和】（Maximum Subarray）问题。 pre（当前位置最大和）、 maxAns（全局最大和） 3.代码实现 class H53 {public int maxSubArray(int[] nums) {int curr…...

编程日记 2025/5/4 20:55:29

基于蓝牙Beacon人员导航方案

基于蓝牙Beacon人员导航方案一、室内定位市场痛点与技术选择大型商场（单层超2万㎡）和医院（科室超200个）的复杂空间中，传统GPS信号衰减超90%，用户平均寻路耗时10-15分钟，30%购物决策因“找店…...

编程日记 2025/4/29 15:38:51

mysql模糊多次OR查询某一个字段，针对这个字段进行查询分组

一. 需求有一个mysql表t_test,有两个字段className和studentStr 其中studentStr会用来模糊查询假如现在有6条数据 1.studentStr字段数据:“小明,小红,小同,小芳,小特,小兰” 2.studentStr字段数据:“小明,小红,小同” 3.studentStr字段数据:“小芳,小特,小兰” 4.stud…...

编程日记 2025/5/13 2:56:14