logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔5
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置基于Node的WIKI管理
前端知识16
HTML常用知识CSS常用知识CSS美化checkbox复选框JavaScript常用知识JavaScript格式化时间戳JavaScript窗口宽高处理JavaScript黑夜主题切换实现方案JavaScript数字转大写简易图片查看器TypeScript基础知识Threejs基础三要素Threejs网格辅助和轨道控制器Threejs物体绘制Electron基础使用Nodejs基础知识animate.css页面动画
Vue框架19
Vite的使用及扩展Vue3父子组件Vue3使用Marked解析MarkdownMermaid图表生成库初始化页面加载动画Axios表单提交二维码解决方案NProgress加载进度条Vue3动态菜单实现Vue3使用ECharts图表Vue3处理Excel导入导出keep-alive页面缓存及setup问题Element:文件上传Element:结合Pinia实现动态菜单Element:图片上传组件Element:自定义统一弹窗组件Element:表格自定义指令控制按钮显示(鉴权)可视化大屏使用缩放适配分辨率
UniApp15
UniApp的基础使用封装网络请求工具及文件上传uni-app的开发记录微信小程序分享原生文件上传Pinia取消滚动条(兼容小程序)tabbar消息数量显示scroll-view上滑到底部加载数据状态栏高度动态设配数据共享与传递uview-plus导航栏实现背景融合Wot UIWot UI实现顶部背景图融合uni-app x
Java基础知识10
基础知识面向对象Lambda表达式常用API常用知识积累try-with-resource注解反射多线程经纬度距离计算
SpringBoot31
application配置Maven创建聚合项目全局异常处理锁机制项目启动初始化数据方式邮件功能集成原生定时任务异步集成阿里云OSS阿里OSS预签名上传基于hutool读excelJSR303WebSocketWebSocket版AI接口流式调用Smart-Doc接口文档生成器application配置信息加密雪花算法工具AOP实现请求参数脱敏思路JWT生成Token及工具类SpringBoot默认JSON与对象转换若依框架:安装使用若依框架:优化和调整文件上传若依框架:管理后台页面优化若依框架:后端接口代码优化SpringAISpringBoot实现AI接口流式调用服务启动时创建MySQL连接自建项目工程树形结构处理工具微信支付代码微信手机号登录
SpringMVC14
跨域处理拦截器RESTful风格伪前后端分离Jackson转换器调整Thymeleaf基于拦截器做权限校验AOP打印接口请求响应日志AOP打印接口请求响应耗时文件上传和回显POST请求加解密实现(AES)POST请求加解密实现(RSA+AES)参数动态校验实现方案真实IP和归属地
MyBatis8
MyBatis基本使用与配置Mapper使用相关MaBatis多数据源配置MyBatisPlus数据统计类处理方案MyBatisPlus条件查询正向工程的实现(H2)mybatis-plus-join
SpringCloud15
Netflix:微服务与搭建Netflix:服务的消费与提供Netflix:EurekaNetflix:ActuatorNetflix:RibbonNetflix:FeignNetflix:HystrixNetflix:ZuulAlibaba:简介与搭建Alibaba:Nacos注册中心Alibaba:RibbonAlibaba:OpenFeignAlibaba:Nacos配置中心Alibaba:GetewayAlibaba:Sentinel
MySQL6
MySQL基础知识MySQL多表查询与事务MySQL常用函数及解决方案MySQL视图MySQL索引安装MySQL
Redis7
Redis介绍和安装Redis配置文件Redis持久化Redis集群Redis语法基础Redis相关问题及解决方案SpringBoot集成Redis使用记录
MongoDB10
Linux安装MongoDBMongoDB基础语法MongoTemplate及SpringBoot配置MongoTemplate中Update操作MongoTemplate中聚合查询MongoTemplate日期归档示例项目使用相关知识归纳地理位置存储与距离查询MongoDB副本集与事务获取类名和属性名工具类
其他数据库1
H2数据库
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
工具集合13
IDEAMavenGradleGitNginx安装Nginx配置VSCodeJMeter压测DockerOllamaRustFSPicGoObs录制
Linux知识11
Linux常用命令Jar启动脚本VirtualBox安装CentOSVirtualBox安装Ubuntu树莓派安装及使用frp内网穿透ArchLinux:基础系统安装ArchLInux:图形化界面安装ArchLinux:常用软件ArchLinux:深度优化ArchLinux:Niri
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成,通过编译器转译为JavaScript代码,可运行在任何浏览器和任何操作系统

TypeScript介绍

是以JavaScript为基础构建的语言,是JavaScript的超集。其扩展了JavaScript并添加类型,可以在任何支持JavaScript的平台执行

环境安装

// 全局安装
npm i -g typescript
// 查看版本
npm view typescript version
// 卸载
npm uninstall typescript

编译

tsc xxx.ts

类型

指定类型后不能再更改为其他类型

// 指定类型
let num:number;
// 指定类型并赋值
let num:number = 1;
// 自动指定类型(根据第一次赋值类型判断)
let str = 'test';

// 指定入参类型,指定返回类型
function add(a: number, b: number): number {
  return a + b;
}

let result = add(1, 3)

类型增加了代码的规范和可控性

number

指定为数字类型,如:

let age: number = 18;

string

指定为字符串类型,如:

let userName: string = 'Tom'

boolean

指定为布尔类型:如:

let flag: boolean = true;

字面量

将变量直接指定为某个值,意味着这个变量只能为这个值,类似常量的意思,但是可扩展,如:

// 定义数量为10,之后不可更改,同常量
let amount: 10;
// 可用于定义某些指定选项,只能赋值指定选项
let sex: 'man' | 'woman' | 'unknown';

any

任意类型,相当于关闭了该变量的类型检查,不建议使用,回到了js

let other: any;

let amount: number = 20;
// 此处不会报错
amount = other

注意:any的类型变量可以赋值给其他类型变量,即会影响其他变量的类型

unknown

未知类型,效果同any,都可以赋值,但是区别是不能赋值给其他类型变量,无法改变其他类型变量

是一个类型安全的any,不能直接赋值非其他类型变量

let other: unknown;

let amount: number = 20;
// 此处会报错
amount = other

// 类型报错处理办法

// 方法一:类型检查
if (typeof other === 'number') {
  amount = other
}
// 方法二:类型断言,告诉解析器该变量的类型,不用报错
amount = other as number
// 与上等同
amount = <number>other

补充类型断言语法:

变量 as 类型
<类型> 变量

void

表示空,例如函数的返回:

// 指定函数没有返回值,可为null
function fn(): void {

}

never

表示没有值类型,连null都不行,如程序报错,就没有返回

function fn(): never {
  throw new Error('报错')
}

联合类型

// 可以使用 | 实现联合类型
let other: number | string;

undefinednull是以上类型的子集,如果没有开启语法严格模式可以赋值

object

// {} 用来指定对象可以包含哪些属性,为对象
let people: {name: string}
// 在属性后加 ? 表示该属性可选
let people: {name?: string}
// 对于其他参数可传又不固定的情况,可不限制其他传入
let people: {name: string, [propName: string]: any}

// 同理可对函数结构进行定义,指定参数类型和返回值类型
let fun: (a: number, b: number) => number
fun = function(a, b) {
  return a + b;
}

数组

方式1
let arr:number[] = [10,20,30]
方式2(泛型)
let arr:Array<number> = [10,20,30]

元组

允许不同的数据类型

let arr:[string,number,boolean] = ['文字',10,false]

枚举

enum Gender {
  man   = 0,
  woman = 1
}

类型断言(只作用在编译阶段)

方式1
if ((<string>str).length) {}
方式2
if ((str as string).length) {}

class Person {
  // 属性
  name:string

  // 构造函数
  constructor(name:string) {
    this.name = name
  }

  // 方法
  say(str:string) {
    xxx
  }
}

// 对象的创建
const person = new Persion();

静态属性

可直接访问

class Person {
  // 属性
  static name:string;
}

继承

class Animal {

}

class Dog extends Animal {

}

接口

interface IPerson {
  readonly id:number,  // 只读属性
  name:string,
  sex?:string          // 可选
}
TypeScript介绍
环境安装
编译
类型
number
string
boolean
字面量
any
unknown
void
never
联合类型
object
数组
元组
枚举
类型断言(只作用在编译阶段)
静态属性
继承
接口