TS 面试题

1、ts在ref和reactive响应式数据的使用

<script setup lang="ts">
interface ReactiveData {
  count: number
  message: string
}
// ref数据引用interface
const state = ref<ReactiveData>({
  count: 0,
  message: 'Hello Vue 3!',
})
// reactive数据引用interface
//方式1
const state = reactive<ReactiveData>({
  count: 0,
  message: 'Hello Vue 3!',
})
//方式2
const state:ReactiveData = reactive({
  count: 0,
  message: 'Hello Vue 3!',
})

</script>

2、类型体操

<script setup lang="ts">
  interface Article{
    content:string;
    author:string;
    datetime:Date;
    readCount:number;
    comments:string[]
  }
  // Omit 去除相应属性
  // Pick 选出相应属性
  // Partial 将属性全部选中变成可选
  type Optional<T,K extends keyof T> = Omit<T,K> & Partial<Pick<T,K>>
  type CreateArticleOptions = Optional < Article , 'datetime' | 'readCount' >

</script>

3、枚举

<script setup lang="ts">

enum NumberType {
  one = 1, //手动赋值   没有赋值 第一个参数默认为0
  two, //后边的值不定义 会根据前边的值 进行累加
  three,
  four,
}
// 手动赋值,尽量不要写一些重复的值
console.log(NumberType.two) //输出2

//枚举项有两种类型：常数项（constant member）和计算所得项（computed member）
enum color {
  red,
  blue = 'blue'.length,
  //计算所得项需要放置在已经确定赋值的枚举项之前 后边不要再存放没有赋值的枚举项
  green = 3,
  yellow,
}
console.log(color.red,color.blue,color.green,color.yellow) //输出0 4 3 4


enum color {
  red,
  blue = 'blue'.length,
  //计算所得项需要放置在已经确定赋值的枚举项之前 后边不要再存放没有赋值的枚举项
  yellow,
}
console.log(color.red,color.blue,color.yellow) //输出0 4 undefined


//常数枚举是使用 const enum 定义的枚举类型
//常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员
const enum Obj {
  o,
  b,
  //报错
  //   j='j'.length,
}

//外部枚举 （Ambient Enums）是使用 declare enum 定义的枚举类型
declare enum B {
  a,
  b,
  c,
}
</script>

4、泛型

1、简单使用：泛型保证函数内类型复用，且保证类型安全

<script setup lang="ts">
// 需求 定义一个函数,传入两个参数 第一个参数是数据 第二个参数是数量
// 函数的作呕给你:根据数量产生对应个数的数据,存放在一个数组中
function getArr(value: number, count: number): number[] {
  const arr: number[] = []
  for (let i = 0; i < count; i++) {
    arr.push(value)
  }
  return arr
}
getArr2(123, 3) // 输出：[123,123,123]


//原则上不推荐使用any
//使用泛型  在定义时不需要先确定类型 而是使用的时候再去确定
//没有确定的话  追走类型推断
//T表示任意输入的类型
function getArr2<T>(value: T, count: number): T[] {
  const arr: T[] = []
  for (let i = 0; i < count; i++) {
    arr.push(value)
  }
  return arr
}
getArr2<string>('123', 2) //输出：['123','123']
</script>

2、泛型约束

<script setup lang="ts">
//获取一个参数的长度
function getLength<T extends Ilength>(x: T): number {
  return x.length
}
//使用泛型约束  约束任意输入的类型  必须要有length属性
interface Ilength {
  length: number
}
getLength('123') // 输出3
</script>

3、泛型接口

<script setup lang="ts">
//定义一个泛型接口
interface Iarr {
  <T>(value: T, count: number): Array<T>
}

let getArr1: Iarr = function <T>(value: T, count: number): T[] {
  const arr: T[] = []
  for (let i = 0; i < count; i++) {
    arr.push(value)
  }
  return arr
}

// 定义一个基础的消息接口
interface Message {
    name: string; // 姓名，类型为字符串
    age: number;  // 年龄，类型为数字
    height: number; // 身高，类型为数字
}
// 创建一个符合Message接口的对象
let mes: Message = { name: "小蒲", age: 20, height: 160 };


// 定义一个泛型接口，T、U、V分别为第1、2、3个泛型类型
interface FX_Message<T, U, V> {
    name_fx: T;  // 姓名，类型为泛型T
    age_fx: U;   // 年龄，类型为泛型U
    height_fx: V; // 身高，类型为泛型V
}

// 创建符合FX_Message接口的对象
let mes_fx1: FX_Message<string, string, string> = {
    name_fx: "小葵", 
    age_fx: "十六岁",  // 年龄使用字符串类型
    height_fx: "1.7米" // 身高使用字符串类型
};

let mes_fx2: FX_Message<string, number, number> = {
    name_fx: "小葵",
    age_fx: 16, // 年龄使用数字类型
    height_fx: 170 // 身高使用数字类型
};

</script>

4、泛型类

<script setup lang="ts">
  let mes_fx2 = new FX_Message("芽儿", 15, 140, new Date(2024, 9, 29));
  // 转变为
  let mes_fx1 = new FX_Message<string, number, number, Date>("芽儿", 15, 140, new Date(2024, 9, 29));
</script>