数组类型-限定每一项的类型

//写法一
const arrNumber: number[] = [1, 2, 3]
const arrString: string[] = ['a', 'b', 'c']
//写法二
const arrNumber2: Array<number> = [1, 2, 3]
const arrString2: Array<string> = ['a', 'b', 'c']

联合类型 符号是 |

//数组可以存放字符串或者数字
let arr: (string | number)[]
arr = ['1', '2', 3]
//字符串数据或数字数组
let arr2: string[] | number[]
arr2 = ['a', 'b', 'c']
arr2 = [1, 2, 3]

类型别名

//类型别名
type MyType = (string | number)[]
let arr: MyType
arr = ['a', 'b', 'c']
arr = [1, 2, 3]

TS函数-函数参数的类型

//TS函数-函数参数的类型
function fn(num1: number, num2: number) {console.log(num1 + num2);
}

TS函数-箭头函数的参数类型

//TS函数-箭头函数的参数类型
const fn = (num1: number, num2: number) => {console.log(num1 + num2);
}
//如果只有一个形参还要指定类型，不能省略小括号
const fn2 = (num1:number) => {console.log(num1);
}

TS函数-返回值的类型

//TS函数-返回值的类型
function fn():number{return 1
}
const fn2 = ():string => {return 'a'
}

TS函数-完整写法

//TS函数-完整写法
const fn = (num1: number, num2: number): number => num1 + num2

TS函数-把类型定义写到等于号左边

//TS函数-把类型定义写到等于号左边
type Fn = (num1: number, num2: number) => number
const fn: Fn = (num1, num2) => num1 + num2

TS函数-void类型

//TS函数-void类型
//函数没有返回值，返回类型为void
const fn = ():void => {console.log('23333');
}

TS函数-可选参数

//TS函数-可选参数
type Fn = (num1: number, num2?: number) => void
const fn: Fn = (num1, num2) => {console.log(num1);console.log(num2);
}
fn(1)
fn(1, 2)

TS函数-参数默认值

//TS函数-参数默认值
// TS可以根据参数的默认值，自动推导参数的TS类型
const fn = (num1 = 1, num2 = 2) => {console.log(num1);console.log(num2);
}
fn(1)
fn(1, 2)

TS对象类型-规范对象结构

//TS对象类型-规范对象结构
type MyObj = {name: string,age: number
}
const myObj: MyObj = {name: 'zs',age: 18
}

TS对象类型-对象方法

//TS对象类型-对象方法
type MyObj = {name: string,age: number,sayHi: () => void
}
const myObj: MyObj = {name: 'zs',age: 12,sayHi: () => {console.log('你好');}
}

TS对象类型-可选成员

type MyObj = {name: string;age?: number
}let obj: MyObj
obj = {name: 'zs',age: 18
}
obj = {name: 'zs'
}

TS接口类型-interface定义对象

//只能定义对象结构
interface IPerson {name: string;age: number
}
let person: IPerson
person = {name: 'zs',age: 18
}

TS接口类型-extends继承

interface Print2D {x: number;y: number;
}interface Print3D extends Print2D {z: number
}let myPrint: Print3D
myPrint = {x: 12,y: 14,z: 23
}

type配合&实现继承

type Print2D = {x: number,y: number
}
type Print3D = Print2D & {z: number
}
let myPrint: Print3D
myPrint = {x: 1,y: 2,z: 3
}

TS元组类型-特殊的数组

//元组的长度是固定的，每一项类型是固定的
type MyArr = [string, number]
let arr: MyArr
arr = ['zs', 18]

TS字面量类型

//字面量类型常常与联合类型一起使用
type Method = 'get' | 'post'
let method: Method
method = "get"
method = "post"

TS枚举类型-提供代码可读性

//TS枚举编译成JS的时候会转换成一个JS对象
enum Gender {boy = 0,girl = 1,unknown = -1
}
const gender = Gender.boy

as类型断言

// 获取a标签
const alink = document.getElementById('link') as HTMLAnchorElement
alink.href

泛型函数-基础语法

const fn = <T>(value: T): T => {return value
}fn(2).toFixed(2)type Fn = <T>(value:T) => T
const fn2:Fn = (value) => {return value
}
fn2(2).toFixed(2)

泛型函数-剩余参数的TS类型

type Fn = <T>(...args: T[]) => T[]
const fn: Fn = (...args) => {console.log(args);return args
}
fn(1)//[1]
fn(1, 2)//[1,2]
fn('1', '2')//['1','2']

泛型函数-调用时完整写法

type Fn = <T>(value:T) => Tconst fn :Fn = (value) => {return value
}fn<string>('')
fn<string>('1')

泛型接口-基础语法

interface Response<T> {code: number;msg: stringresult: T;
}const res1: Response<string[]> = {code: 200,msg: '请求成功',result: ['1', '2']
}type Response2<T> = {code: number;msg: stringresult: T;
}const res2: Response<number[]> = {code: 200,msg: '请求成功',result: [1, 2]
}

泛型-添加约束

// 约束extends
interface Ilength {length: number
}
type Fn = <T extends Ilength>(value: T) => numberconst fn: Fn = (value) => {return value.length
}fn([1, 2])
fn('12')

泛型-多泛型变量和泛型默认值

type Fn = <T = string,K = unknown>(val:T,val2?:K) => voidconst fn:Fn = (val) => {console.log(val);
}

keyof获取对象类型的键名称

interface MyObj {name: string;age: number
}type Keys = keyof MyObj
let keys: Keys
keys = "age"
keys = "name"

泛型约束练习 一个函数接收一个对象和对象的key,返回对下个key对应的值

type Fn = <T, K extends keyof T>(obj: T, key: K) => unknownconst fn: Fn = (person, key) => {return person[key]
}interface IPerson {name: string,age: number
}
const person: IPerson = {name: 'zs',age: 18
}fn(person, "name")
fn(person, "age")

defineProps与Typescript

defineProps和PropType

<template><div><h1>子组件</h1><span>姓名:{{ personInfo.name }}</span><span>年龄:{{ personInfo.age }}</span></div>
</template>
<script setup lang="ts">
//引入 PropType
import { PropType } from "vue";interface IPersonInfo {name: string;age: number;
}
defineProps({personInfo: {type: Object as PropType<IPersonInfo>,required: true,},
});
</script>

defineProps泛型写法

<template><div><h1>子组件</h1><span>姓名:{{ personInfo.name }}</span><span>年龄:{{ personInfo.age }}</span></div>
</template>
<script setup lang="ts">
defineProps<{personInfo: {name: string;age: number;};// 不是必传car?: string;
}>();
</script>

defineProps默认值写法

//son.vue
const { car = '1000' } = defineProps<{personInfo: {name: string;age: number;};// 不是必传car?: string;
}>();
//vite.config.ts
export default defineConfig({plugins: [vue({// defineprops默认值必须开启reactivityTransform: true})],
})

defineEmits与Typescript

//son.vue
//emit的ts结构可以通过鼠标悬停defineEmits()得到
const emit = defineEmits<{(event: "changeCar", val: number): void;
}>();
//father.vue
//此时通过TS提示就知道val是什么类型
const changeCard = (val: number) => {car.value += val;
};

ref与Typescript

interface IToDo {id: number;content: string;isDone: boolean;
}
const toDoList = ref<IToDo[]>([]);
toDoList.value.push({ id: 0, content: "睡觉", isDone: false });

computed与Typescript

// computed内部可以推导，不用写成computed<>()结构

事件处理与Typescript

// 通过悬停addEventListener("mousemove", mouseFn)，得到Mousemove类型
const mouseFn = (e: MouseEvent) => {console.log(e.clientX);
};
onMounted(() => {document.addEventListener("mousemove", mouseFn);
});<p @click="clickHandle">点击事件</p>
//通过悬停@click得到MouseEvent类型
const clickHandle = (e: MouseEvent) => {console.log(e.clientX);
};

模板ref于Typescript

//悬停document.querySelector('p')得到p标签的类型
const p = ref<HTMLParagraphElement>();
onMounted(() => {// p的值可能不存在，严谨写法if (p.value) {console.log(p.value.clientWidth);}
});// 模板ref绑定组件
const son = ref<InstanceType<typeof Son>>();
onMounted(() => {// 严谨写法的简写形式 ?是可选链操作符console.log(son.value?.car);
});

非空断言

//悬停document.querySelector('p')得到p标签的类型
const p = ref<HTMLParagraphElement>();
onMounted(() => {// p的值一定存在 !是非空断言console.log(p.value!.clientWidth);
});