TypeScript
2023-07-20 16:10:08 9 举报AI智能生成
TS学习总结
作者其他创作
大纲/内容
认识TypeScript
是什么？
Typescript是微软开发的编程语言，它是Javascript的超集，可以在任何运行Javascript的地方运行
Typescript=Type+Javascript
在Javascript基础上加上了类型支持/类型检测
优势：
发现错误的时机更早
代码提示，随时随地的安全感，增强了开发体验
支持最新的 ECMAScript 语法，优先体验最新的语法，让你走在前端技术的最前沿
Vue3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端项目的首选编程语言，前端最新的开发技术栈离不开 TS，例如 React（TS + Hooks），Vue（TS + Vue3）
如何使用TS
1.安装编译Ts的工具
2.安装命令
npm i -g typescript
yarn global add typescript
3.验证是否安装成功
tsc-v
如何创建TS+Vue的项目
# npm 6.x
npm create vite@latest my-vue-ts-app --template vue-ts
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-ts-app -- --template vue-ts
# yarn
yarn create vite my-vue-ts-app --template vue-ts
# pnpm
pnpm create vite my-vue-ts-app --template vue-ts
类型
类型注解
是什么？变量后面约束类型的语法
作用？
为变量添加类型约束
约定了什么类型，就只能给变量赋值该类型的值，也会出现该类型相关的提示
数组类型
两种写法
let num:number[]=[1,2,3]
let age:Array<string>=['a','b','c']
联合写法
let num:(number|string)[]=[1,2,'a']
|（竖线）在 TS 中叫做联合类型，即由两个或多个其他类型组成的类型，表示可以是这些类型中的一种
类型别名
作用
类型别名作用：为任意类型起别名，别名甚至可以是中文
场景
当同一类型（复杂）且可能被多次使用时，可以通过类型别名
用法：
type Num = (number|string)[]
let age:Num=[1,'2',2]
函数类型
给参数和返回值指定类型
单独给返回值指定类型
单独给参数指定类型
funciton add(a:number,b:number):number{
return a+b
}
同时给参数+返回值指定类型
type AddFn = (a:number,b:number)=>number
const add:AddFn = (a,b)=>{return a+b}
void
如果函数没有返回值，那么函数返回值类型为：void
分支主题
可选参数
使用函数实现某个功能时，参数可以传也可以不传，这种情况下，在给函数参数指定类型时，就用到可选参数了
可选参数语法：
在可传可不传的参数名称后面添加 ?（问号）
// start、end 可传可不传，传就传 number 类型
function mySlice(start?: number, end?: number): void {
console.log('起始索引：', start, '结束索引：', end)
}
参数的默认值
分支主题
对象类型
JS中的对象是有属性和方法组成的
TS中对象类型就是描述数据的结构---有什么样的属性和方法
如何使用？
1.const person:object={}
2.let person:{}={}
精准的描述对象里面的具体内容
1.let person :{name:string}={
name:'张三'
}
2.
3.const str:{length:number}="hello"
分支主题
interfacw和type的区别
相同点：
都可以描述对象或者函数
都允许拓展，语法不一样
不同点：
type除了可以描述对象或者函数，实际上可以为任意类型指定别名
相同的interface声明能够合并，相同的type声明会报错
一般使用interface来描述对象结构，用type来描述类型关系
类型推论
在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型
见的发生类型推论的 2 种场景：声明变量并初始化时；决定函数返回值时。
分支主题
字面量类型
字面量和联合类型一起使用
type Direction ='left'|'right'|'top'
Direction 的参数只能是右边参数的其中一个
类型断言
时候你会比 TS 更加明确一个值的类型，此时可以使用类型断言来指定更具体的类型，比如根据 ID 选择 a 标签
const oLink = document.getElementById('link') as HTMLAnchorElement
as关键字实现类型断言
关键字as后面的类型是一个更加具体的类型（HTMLAnchorElement的子类型）
通过类型断言，oLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了
另一种语法
分支主题
特殊类型
any
值的类型为 any 时，可以对该值进行任意操作，即使可能存在错误，并且不会有代码提示
unknow
任意类型，更安全的any类型
可以对类型进行收窄
any-unknow比较
任何类型可以给 any，any 也可以给任何类型
任何类型可以给 unknown，unknown 只能给 unknown 或 any 类型
VUE3+TS后的语法
defineProps
defineProps<{参数名：参数类型}>()
interface Iprops {
参数名：参数类型
}
defineProps<Iprops >()
默认值：
1.指定默认值withDefaults()函数的第二个参数》
例如：withDefaults(defineProps < {
money: number
car ? : string
} > (), {
car: '小黄车'
}
2.使用解构 + defineProps 这种响应式语法糖
const {
money,
car = '小黄车'
} = defineProps < {
money: number
car ? : string
} > ()
需要在Vue.config.js中配置
分支主题
defineEmits
const emits = defineEmits<{(e:'事件名'，参数名：参数类型)：void}>()
ref函数
泛型指定value的值类型
const money =ref<number>(100)
泛型指定复杂类型
const list =ref<T[]>([])
interface T {
id: number
name: string
done: boolean
}
使用泛型工具 ---Vue提供的Ref泛型工具
直接给声明的变量添加类型 const list:Ref<T[]>=ref([])
ref属性
ref操作DOM
const imgRef =ref<HTMLImageElement|null>(null)
onMounted(()=>{
imgRef.value?.src
})
ref操作组件
const ChildCmp=ref<InstanceType <type of Child>|null>(null)
通过内置的泛型工具 InstanceType 可以获取构造函数类型的实例类型
childCmp.value?.logHello()
reactive函数
直接给变量添加类型或者使用默认的类型推导（推荐）
通过泛型参数的形式增加类型（不推荐）
computed函数
利用 TS 类型推导的能力（推荐）
通过泛型可以指定 computed 计算属性的类型。
可选链操作符
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效
分支主题
非空断言
如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !
TS 类型声明文件
.ts
文件：可以编译为js文件，编写程序代码的地方
包含类型信息又可以执行代码
.d.ts
只包含类型信息的类型声明文件，专门为js提供类型信息
子主题 3
泛型
是什么?
是一种创建可复用代码组件的工具，用以增强类型（types）、接口（interfaces）、函数等类型能力的非常可靠的手段
泛型别名
定义别名后<类型参数>就是泛型别名的语法
<T>是一个变量，可以随意命名，建议遵循大驼峰即可
泛型可以提高类型的复用性和灵活性
泛型接口
接口也可以配合泛型来使用，以增加其灵活性，增强其复用性
interface User<T>{
name:T
age:number
}
const user:User<string>={
name:'sss'
age:18
}
在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口。
使用泛型接口时，需要显式指定具体的类型（比如，此处的 IdFunc<number>）
泛型函数
语法：在函数名称的后面添加 <> （尖括号），尖括号中添加类型变量
该类型变量相当于一个类型容器，能够接收用户提供的类型（具体是什么类型由用户调用该函数时指定）
因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型。
类型变量 Type，可以是任意合法的变量名称，一般简写为 T
分支主题
泛型工具
泛型工具类型：TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作
Partial<Type>
Partial 用来构造（创建）一个类型，将 Type 的所！有属性设置为可选
分支主题
相当于给每个属性加了？变成可选类型
Readonly<Type>
Readonly 用来构造一个类型，将 Type 的所有属性都设置为 readonly（只读）
给每个类型上边加Readonly 那么数据不可修改
分支主题
Pick<Type, Keys>
Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。
Pick 工具类型有两个类型变量，1. 表示选择谁的属性，2. 表示选择哪几个属性
第二个类型变量传入的属性只能是第一个类型变量中存在的属性
构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。
Omit<props,'id'|'title'>
Omit，和 Pick 相反，表示排除的意思。
0 条评论
下一页
