TypeScript进阶

最新推荐文章于 2024-05-17 16:06:33 发布
最新推荐文章于 2024-05-17 16:06:33 发布
阅读量1k 收藏 1
点赞数
文章标签： typescript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoyifei01/article/details/130515911
版权

目录

TypeScript 与 Vue

文档说明

vscode 插件说明

准备页面基本结构

defineProps与Typescript

defineEmits与Typescript

ref与Typescript

reactive与Typescript

computed与Typescript

事件对象与Typescript

模板Ref与Typescript

可选链操作符和非空断言

TypeScript 与 Vue

文档说明

英文文档：TypeScript with Composition API | Vue.js

中文文档：TypeScript 与组合式 API | Vue.js

vscode 插件说明

 vue3 配合 ts 中，还需要额外安装一个 vscode 插件：Typescript Vue Plugin (Volar)

 

准备页面基本结构

main.ts

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

app.mount('#app')

App.vue

<script setup lang="ts">

</script>

<template>

  <div>

    <h1>我是 App 组件</h1>

  </div>

</template>

defineProps与Typescript

目标：掌握 defineProps 如何配合 ts 使用

defineProps js 写法

App.vue

<script setup lang="ts">

import Child from './components/Child.vue'

import { ref } from 'vue'

const money = ref(100)

</script>

<template>

  <div style="border: 3px solid #ccc;margin: 10px;">

    <h1>我是 App 组件 --- {{ money }}</h1>

    <Child :money="money"></Child>

  </div>

</template>

components/Child.vue

<script setup lang="ts">

defineProps({

  money: {

    type: Number, // 定义类型

    required: true, // 是否必传

    // default: 10 // 默认值

  }

})

</script>

<template>

  <div style="border: 3px solid #ccc;margin: 10px;">

    <h3>我是 Child 组件 --- {{ money }}</h3>

  </div>

</template>

defineProps ts 写法

通过 defineProps 函数的泛型，指定了 prop 的名字和类型。（vue 内部做了一些处理）

components/Child.vue

<script setup lang="ts">

// 1. 只要写在泛型里面的 prop 类型，就代表是必填的了

defineProps<{

  money: number

}>()

// 2. 如果 prop 不是必传的

defineProps<{

  money?: number

}>()

// 3. 通过解构指定默认值

const { money = 10 } = defineProps<{

  money?: number

}>()

</script>

<template>

  <div style="border: 3px solid #ccc;margin: 10px;">

    <h3>我是 Child 组件 --- {{ money }}</h3>

  </div>

</template>

如果提供的默认值需要在模板中渲染，需要额外添加配置

Reactivity Transform | Vue.js

vite.config.ts

export default {

  plugins: [

    vue({

      reactivityTransform: true

    })

  ]

}

defineEmits与Typescript

目标：掌握 defineEmit 如何配合 ts 使用

defineEmits js 写法

App.vue

<script setup lang="ts">

import { ref } from 'vue'

import Child from './components/Child.vue'

const money = ref(100)

// 挣钱

const makeMoney = (childMoney: number) => {

  money.value = money.value + childMoney

}

</script>

<template>

  <div style="border: 3px solid #ccc;margin: 10px;">

    <h1>我是 App 组件</h1>

    <Child :money="money" @makeMoney="makeMoney"></Child>

  </div>

</template>

components/Child.vue

<script setup lang="ts">

const emit = defineEmits(['makeMoney'])

const makeMoney = () => {

  emit('makeMoney', 10)

}

</script>

<template>

  <div style="border: 3px solid #ccc;margin: 10px;">

    <h3>我是 Child 组件 --- {{ money }}</h3>

    <button @click="makeMoney">挣钱</button>

  </div>

</template>

defineEmits ts 写法

js 的写法只是接收了传递过来的自定义事件的名字。

通过 defineEmits 函数的泛型：指定了自定义事件的名字，还指定了自定义事件函数的参数和返回值的类型。（vue 内部做了一些处理）

<script setup lang="ts">

// defineEmits 传入对象类型，对象类型中是一个一个的匿名函数类型，这个对象类型不是用来直接给自定义事件数据定义的

// vue内部拿这个对象类型后要做组装处理，然后给父组件传递过来的自定义事件数据定义类型

// 语法

// const emit = defineEmits<{

//   (e: '自定义事件名', 自定义事件函数参数: 自定义事件函数参数类型): 自定义事件函数返回值类型

// }>()

const emit = defineEmits<{

  (e: 'makeMoney', childMoney: number): void

}>()

const makeMoney = () => {

  emit('makeMoney', 10)

}

</script>

<template>

  <div style="border: 3px solid #ccc;margin: 10px;">

    <h3>我是 Child 组件 --- {{ money }}</h3>

    <button @click="makeMoney">挣钱</button>

  </div>

</template>

指定类型的好处：使用 emit 触发自定义事件时，不会传错参数。

ref与Typescript

目标：掌握 ref 配合 ts 如何使用

  1. 如果是简单数据类型，通过泛型指定值的类型，并且该类型可以省略

App.vue

<script setup lang="ts">

import { ref } from 'vue'

const money = ref<number>(100)

// 相当于

const money = ref(100)

</script>

<template>

  <div>

    <h1>我是 App 组件 --- {{ money }}</h1>

  </div>

</template>

2.如果是复杂数据类型，通过泛型指定值的类型，并且推荐指定类型

App.vue

<script setup lang="ts">

import { ref } from 'vue'

// 不指定类型，会报错，并且没有提示

type User = {

  id: number

  name: string

  age: number

}

const list = ref<User[]>([])

// 模拟后端返回数据

setTimeout(() => {

  list.value = [

    { id: 1, name: 'zs', age: 18 },

    { id: 2, name: 'ls', age: 19 }

  ]

}, 1000)

</script>

<template>

  <div>

    <h1>我是 App 组件</h1>

  </div>

</template>

reactive与Typescript

目标：掌握 reactive 配合 ts 如何使用

App.vue

<script setup lang="ts">

import { reactive } from 'vue'

// reactive 只适用于给具有明确属性的复杂数据。它可以自己推断类型，所以不需要指定类型

const user = reactive({

  id: 1,

  name: 'zs',

  age: 18

})

// 如果指定类型，有两种写法

type User = {

  id: number

  name: string

  age?: number

}

// 写法一

const user: User = reactive({

  id: 1,

  name: 'zs',

  age: 18

})

// 写法二（泛型）

const user = reactive<User>({

  id: 1,

  name: 'zs',

  age: 18

})

</script>

<template>

  <div>

    <h1>我是 App 组件</h1>

  </div>

</template>

computed与Typescript

目标：掌握 computed 配合 typescript 如何使用

通过泛型可以指定 computed 计算属性返回值的类型，通常可以省略，因为它可以根据计算属性的返回值类型自动推导出来。

App.vue

<script setup lang="ts">

import { ref, computed } from 'vue'

const count = ref(100)

const doubleCount = computed(() => {

  return count.value * 2

})

const doubleCount = computed<number>(() => {

  return count.value * 2

})

</script>

<template>

  <div>

    <h1>我是 App 组件 --- {{ count }} --- {{ doubleCount }}</h1>

  </div>

</template>

事件对象与Typescript

目标：掌握事件对象配合 typescript 如何使用

App.vue

<script setup lang="ts">

// 1. 想要有事件对象上的属性提示，需要给事件对象指定类型（可以通过鼠标悬停到绑定的事件上，查看事件对象的类型）

const handleChange = (event: Event) => {

  console.log(event.target)

}

// 1. 想要有事件目标源上的属性提示，需要给事件目标源做类型断言（可以通过 document.createElement 创建该元素，查看元素的类型）

const handleChange = (event: Event) => {

  // const input = document.createElement('input')

  console.log((event.target as HTMLInputElement).value)

}

</script>

<template>

  <div>

    <h1>我是 App 组件</h1>

    <input type="text" @change="handleChange" />

  </div>

</template>

模板Ref与Typescript

目标：掌握 ref 操作 DOM 时如何配合 Typescript 使用

App.vue

<script setup lang="ts">

import { ref } from 'vue'

const h1Ref = ref(null)

const getElement = () => {

  // 报错，因为初始值是 null，无法从 null 身上获取其他属性。

  console.log(h1.value.innerHTML)

}

// 通过 ref 获取 DOM 时，要通过泛型设置 DOM 类型

const h1Ref = ref<HTMLHeadingElement | null>(null)

const getElement = () => {

  if (h1Ref.value) {

    console.log(h1Ref.value.innerHTML)

  }

}

</script>

<template>

  <div>

    <h1 ref="h1Ref">我是 App 组件</h1>

    <button @click="getH1">获取 h1 元素</button>

  </div>

</template>

可选链操作符和非空断言

目标：掌握 js 中的可选链操作符语法，掌握 ts 中的非空断言的使用语法

访问对象的深层属性时，但是不确定属性是否存在时：

类型守卫：对象中的某个属性存在时，才继续访问它后面的属性

可选链操作符( ?. )：对象中的某个属性存在时，才继续访问它后面的属性

非空断言：如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !

App.vue

<script setup lang="ts">

import { ref } from 'vue'

const h1Ref = ref<null | HTMLHeadingElement>(null)

const changeElement = () => {

  // 方式一：类型守卫（使用if判断）

  if (h1.value) {

    console.log(h1.value.innerHTML)

  }

  // 方式二：可选链操作符（无法做赋值操作）

  console.log(h1.value?.innerHTML)

  // 方式三：非空断言

  // 使用非空断言告诉 ts，h1.value 一定不为空

  // 注意：非空断言一定要确保有该属性才能使用，不然使用非空断言会导致 bug

  console.log(h1.value!.innerHTML)

}

</script>

<template>

  <div>

    <h1>我是 App 组件</h1>

    <button ref="h1Ref" @click="changeElement">修改 h1 元素 innerHTML 内容</button>

  </div>

</template>

zhaoyifei01
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VSCode创建自定义片段（Vue + TypeScript）(Vue)
qq_16733389的博客
09-25 421
vs code 快速生成vue 模板 使用快捷Ctrl + Shift + P唤出控制台，然后输入snippets并选择。(或 文件>首选项>用户代码片断里面，输入 vue.json ，然后回车 )(或 file > Preferences > User Snippets，当弹出搜索框之后，输入 vue.json ，然后回车) 2. 接着输入vue，vs code自动生成vue.json文件。 3. 将vue.json文件改为下面得模板（可根据个人需求修改当中的模板内容） 单
vscode开发vue3（typescript）项目错误提示处理
choorn的博客
09-19 1906
2、关于typescript类型错误，这类错误网上搜到的方法都不太好用，这是因为有些方法是通过设置，关闭了提示。1、引入一些包后报错，如引入elment plus中文资源包或安装qs（解决传参格式不正确）包。在此信息中提示在.d.ts文件中加入declare module 'element-plus/dist/local/zh-ch.mjs。
Vue 官方语言工具2.0 来了，已正式更名！
骑着牛的奇兵的博客
03-07 2838
近日，Vue 官方语言工具发布了 2.0 版本，该版本已经将 VS Code 插件名称由改为了扩展也已经被弃用。下面就来看看该版本都带来了哪些更新。
vscode + vite + vue3 + typescript + eslint 项目配置
m289065365的专栏
08-31 440
其中安装MAC系统亲测 eslint-config-prettier node 需要切换到。配置完成项目根目录会多出一个 .eslint.cjs表示配置成功, 如下图。选择项如下图蓝色字体。
TypeScript 进阶
qq_37440870的博客
08-18 877
typescript 学习进阶
博客：全网100w +阅读量的进阶前端技术博客仓库，Vue源码解析，React深度实践，TypeScript进阶艺术，工程化，性能优化实践……
02-05
ssh的博客 我的技术博客，不定时更新。 收藏点star，订阅点watch。 博客网站（不定期同步）： ://ssh-blog.vercel.app 感谢 最近更新 24日， --2021-01-04 2020-12-17 。--2020-12-08 ... 2020-04-01
frontend-roadmap:写给大家的高级前端进阶路线，JavaScript基础，算法和数据结构，Vue进阶到源码，React进阶，TypeScript进阶，性能优化以及工程架构实战，这样的文章涵盖了你入行前端前几年要学习的所有精选路线
03-18
这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，不必太担心，可以把这篇文章作为一个进阶的路线图，在未来的时日里朝着这个方向努力就好。我也并非说这篇文章是进阶高级工程师的唯一一条路线，...
TypeScript极速完全进阶指南视频课程
06-14
什么是TypeScript？TypeScript是JavaScript的加强版，它给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。 不过，你不必担心TypeScript跟浏览器不兼容，因为在编译时，它产生的...
Pro Typescript
07-23
Pro Typescript是对TypeScript的进阶，入门可以学习Learning Angular 2
《前端面试题》- TypeScript - TypeScript的优/缺点
小张微说的博客
04-22 7082
问题 简述TypeScript的优/缺点 答案 优点 增强了代码的可读性和可维护性 包容性，js可以直接改成ts，ts编译报错也可以生成js文件，兼容第三方库，即使不是ts编写的 社区活跃，完全支持es6 缺点 增加学习成本 增加开发成本，因为增加了类型定义 需要编译，类型检查会增加编译时长，语法和类型系统复杂的话时间特别特别长 eval和new Function()这种操作类型系统管不到 ...
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
weixin_58540586的博客
05-17 1188
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 676
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1121
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 164
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 758
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1042
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
最新发布
xingyu_qie的专栏
05-17 842
基于Vue3 + js-tool-big-box的3个随机数字
typeScript 进阶
08-11
好的，我会尽力用中文回答你关于 TypeScript 的问题。TypeScript 是一种由微软开发的超集语言，是 JavaScript 的一个严格的超集。这意味着所有的 JavaScript 代码都是合法的 TypeScript 代码，但是 TypeScript 比 JavaScript 多了一些额外的特性，如类型系统、接口、枚举等。这些额外的特性能帮助开发者在编写代码时更加熟悉和更有信心，同时也能帮助开发者在编译时发现潜在的问题。 对于初学者来说，学习 TypeScript 可以帮助你更好地理解面向对象编程的概念，同时也可以提高你的代码质量和可维护性。对于有经验的开发者来说，学习 TypeScript 可以帮助你更快地开发出高质量的代码，并且更容易在团队中协作。 要进阶学习 TypeScript，你需要先熟悉 JavaScript 基础知识，然后再学习 TypeScript 的类型系统、接口、泛型等高级特性。你还可以尝试使用 TypeScript 开发一些项目，并且不断提升你的编码能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值