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