2026-01-23

记录每天自我学习转前端的碎碎念，仅作加强记忆的笔记和自我监督打卡使用。

在vue3中通过vite配置开启https

server: {
  port: 8089,
  https:true,
},

可以开启https，但是是无法访问的，可以通过安装插件@vitejs/plugin-basic-ssl解决，模拟https环境，这个仅可在开发环境中使用，不可在生产环境使用

pnpm i @vitejs/plugin-basic-ssl -D

import basicSsl from '@vitejs/plugin-basic-ssl'
export default defineConfig({
server: {
  port: 8089,
  https:true,
},
plugins: [
basicSsl()
]
})

TS语法

在 TypeScript 中，descriptor.value! 中的感叹号 ! 是非空断言操作符（Non-null Assertion Operator），它的含义和作用如下： const originalMethod = descriptor.value!; // 注意感叹号 明确告诉 TypeScript 编译器：descriptor.value 不可能为 null 或 undefined

安装一个全局ts命令行工具 pnpm i typescript -g

在一个工程中新建一个test.ts文件 由于浏览器不认识ts文件，只认识js文件，所以ts文件会被编译成js文件

命令行编译

1.通过 tsc test 或者 tsc test.ts（文件结尾可以忽略）都可以将ts文件打包成js文件

自动化编译

2. 通过tsc --init可以创建一个tsconfig.json的配置文件，默认情况下无论是否有语法错误通过tsc test都能打包生成一个test.js的文件，可以在配置文件中修改，修改tsconfig.json中"noEmitOnError": true, 则有语法错误不会打包生成产物

3. 通过tsc --watch可以监听项目中所有ts文件，如果出现语法错误会在控制台抛出异常，如果只是想监听test这一个文件，则加上 tsc --watch test.ts

4.在实际vue或者react项目中无需命令行编译或者自动化编译，项目中的webpack或者vite会自动处理ts文件的编译

TS中的数据类型除了有js中的Undefined Null Number String Boolen BigInt Symbol Object数据类型外，还有 any、unknow、nerver、void、tuple、enum 6种新类型和type、interface 2种自定义类型的方式

any : 任何数据类型都满足，丢失ts数据类型校验，建议少用

unknow : 未知数据类型，不可以参与逻辑、赋值等操作，除非进行类型判断，确定类型或者使用断言

let a:unknown

a = "123"

let b : string

b = a // 抛出异常：不能将类型“unknown”分配给类型“string”

解决方案：
1.使用typeof判断
if(typeof a === 'string'){
  b = a
}
2.使用断言
b = a as string
3.也是断言
b = <string>a

nerver:没有满足的数据，作为返回值时，函数不能具有可访问的终结点，也就是说函数肯定不能完整执行完

function demo():nerver{
 throw new Error('程序异常')
}

let x = demo()
console.log(x)
// 上面的console.log肯定是不会打印的，因为程序在demo内已经抛出异常了，不会再往下执行

void:无返回值或者返回值为undefined, js或者ts中函数即使是没有return，也会默认return一个undefined

function a(){
 console.log('123')
}
function b(){
 console.log('123')
 return
}
console.log(a()) //打印undefined
console.log(b()) //打印undefined

tuple:本身不是关键字，‌元组 (Tuple) ‌ 是一种特殊的数组类型，用于表示一个‌固定长度*且‌每个位置元素类型已知的集合

// 定义一个包含字符串和数字的元组
let person: [string, number] = ["Alice", 30];
// 定义一个包含字符串、数字和布尔值的元组
let user: [string, number, boolean] = ["Bob", 25, true];

enum:枚举类型

const enum Direction {
  Up,
  Down,
  Left,
  Right
}
console.log(Direction.Down)

**!!!**
注意：项目中使用时最好在enum前面加上const,如果不加，则编译成js文件时会将枚举的4个值都编译到js文件，加上const后则仅将下面使用到的Direction.Down编译到js文件中，能优化文件体积

. interface 与 type 的区別

• 相同点：interface 和 type 都可以用于定义对象结构，两者在许多场景中是可以互换的。
• 不同点：
  interface ：更专注于定义对象和类的结构，支持继承、合并。
  type：可以定义类型别名、联合类型、交叉类型，但不支持继承和自动合并。

interface支持继承和合并

interface PersonInterface {
  name: string // 姓名
  age: namber //年龄
}

interface PersonInterface {
   speak:（）=> void
}

interface StudentInterface extends PersonInterface {
  grade: string // 年级
}

// 则定义student时必须有name、grade、speak3个属性
const student: StudentInterface = {
  name：‘李四”，age: 18，
  grade：‘高二，
  speak() (
    console.log（this.name, this.age, this.grade）
   )
 }
 

使用 type 定义 Person类型，并通过交叉类型实现属性的合并

type PersonType = {
  name:string;// 姓名
  age:number;// 年龄
} & {
  speak: () => void;
}

// 对象属性‌
interface User<T> {

id: string; // 必填属性

name: string;

age?: number; // 可选属性（?标记）

readonly email: string; // 只读属性

address:T

}

// 方法签名‌
interface Calculator {

add(x: number, y: number): number; // 标准方法

subtract: (x: number, y: number) => number; // 箭头函数形式

}

// 索引签名‌
interface StringDictionary {

[key: string]: string; // 动态键值对

}

// 函数类型‌
// 括号 () 表示函数调用签名‌,定义了一个‌可调用对象‌（函数类型），其参数为 T 类型，返回值也是 T 类型

interface Func<T> {

(key:T):T; // 定义函数调用签名

}

在 TypeScript (TS) 中，Record 是一个内置的‌工具类型（Utility Type） ‌，用于快速定义一个对象类型，该对象的键具有特定的类型，值也具有特定的类型。它本质上是键值对的类型安全描述符。 ‌

基本语法

Record 的语法为 Record<Keys, Type>：

• ‌**Keys**‌：表示对象键的类型，通常为字符串字面量联合类型（如 'name' | 'age'）或 string（表示任意字符串键）。
• ‌**Type**‌：表示对象值的类型。 ‌

const config: Record<string,string[]> = {
   typeOptions: ['商业回复'],
}
const config: Record<string,number> = {
   age: 18,
}

核心用途与示例

1. ‌定义具有固定键的对象类型‌：当对象的键是已知且有限的集合时，Record 非常有用。

   // 定义一个对象类型，键只能是 'name' 或 'age'，值为 string 或 number
   type Person = Record<'name' | 'age', string | number>;
   const person: Person = { name: 'John Doe', age: 30 };
   console.log(person.name); // 输出: John Doe
   console.log(person.age);  // 输出: 30
   

2. ‌定义动态键的对象类型‌：当键是动态生成的或来自字符串时，可以使用 string作为键类型。

   // 定义一个对象类型，键为任意字符串，值为 number
   type Scores = Record<string, number>;
   const scores: Scores = { math: 90, english: 85, science: 95 };
   console.log(scores.math); // 输出: 90
   

3. ‌与接口结合使用‌：可以定义值的类型为一个接口，实现更复杂的结构。

   interface PageInfo {
     title: string;
     url: string;
   }
   type PageRecords = Record<string, PageInfo>;
   const pages: PageRecords = {
     home: { title: "Home Page", url: "xxx" },
     about: { title: "About Us", url: "xxx" }
   };