TypeScript应用

TypeScript应用

vue项目中使用ts，script加上 lang=”ts“ 才能写ts代码

1
2
3

defineProps的TS写法

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

默认值没有显示 需要显示的选择开启

//vite.config.ts
export default defineConfig({
  plugins: [vue({
    reactivityTransform:true
  })],
})
1
2
3
4
5
6

defineEmits的TS写法

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

ref的TS写法

ref()会隐式的依据数据推导类型

1.简单数据类型

推荐使用类型推导

// const money =ref(10)
const money =ref(10)
1
2

2.复杂数据类型

指定泛型

// 类型别名--单项类型
type Todo = {
  id:number
  name:string
  done:boolean
}
const list = ref([])
/**
 * 复杂数据 --后台返回数据，默认值是空，无法进行类型推导
 [
  {id:1,name:"zs",done:true},
  {id:2,name:"ls",done:false}
 ]
 */

setTimeout(()=>{
  list.value =[
  {id:1,name:"zs",done:true},
  {id:2,name:"ls",done:false}
  ]
},1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

reactive的TS写法

reactive()也会隐式的依据数据推导类型

1.默认值属性是固定的

推荐使用类型推断

// 默认值属性是固定的 --类型推断
const book =reactive({title:"vue3学习"})

1
2
3

2.根据默认值推导不出我们需要的类型

推荐使用接口或者类型别名给变量指定类型

type Book1 = {
  title:string
  year?:number
}

// 不推荐使用reactive()的泛型参数
const b:Book1 = reactive({title:"hello"})
b.year = 2023
1
2
3
4
5
6
7
8

computed和TS

1.computed() 会从计算函数的返回值上推导出类型

const count = ref(100)
const doubleCount = computed(()=>count.value *2)
1
2

2.可以通过泛型参数显式指定类型

const doubleMoney = computed(()=>(count.value*2).toFixed(2))
1

事件处理与TS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Template Ref与TS

模板ref需要通过一个显式指定的泛型参数，默认值是null

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

非空断言

类型可能是null 或undefined的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

TypeScript类型声明文件

TS类型声明文件是什么

项目中安装的第三方库都是打包后的js代码，但是我们使用的时候却有对应的TS类型提示，为什么？

在第三方库中的js代码都有对应的TS类型声明文件

在ts中以 .d.ts为后缀的文件，我们称之为ts类型声明文件。它的作用是描述js模块内所有导出成员的类型信息

ts中有两种文件类型 .ts文件 .d.ts文件作用是什么?

• .ts文件
  • 既包含类型信息又可执行代码
  • 可以被编译为js文件，然后执行代码
  • 用途：编写程序代码的地方
• .d.ts文件
  • 只包含类型信息的类型声明文件
  • 不会生成.js文件，仅用于提供类型信息，在.d.ts文件中不允许出现可执行的代码，只用于提供类型
  • 用途： 为js提供类型信息

所以 .ts是代码实现文件 .d.ts是类型声明文件

内置类型声明文件

const arr =[1,2,3]   
//鼠标放在forEach上查看类型   ctrl +鼠标左键  进入 lib.es5.d.ts类型声明文件中
arr.forEach
1
2
3

第三方库类型声明文件

下载axios 查看类型声明文件 node_modules/axios/index.d.ts

自定义类型声明文件

• 创建types/data.d.ts
• 创建需要共享的类型，使用export导出
• 在需要使用共享类型.ts文件中，通过import 导入即可（.d.ts后缀可以省略）

src/types/data.d.ts

export type Person = {
    id:number
    name:string
    age:number
}
1
2
3
4
5

App.vue

import {Person} from './types/data'

const p:Person ={
  id:100,
  name:"Zs",
  age:19
}

1
2
3
4
5
6
7
8