ts与vue

ts与Vue

如果你已经学习了typeScript,但不知道如何在vue项目中使用,那么这篇文章将会很适合你。参考千峰教育 kerwin视频

1.会自动推导,隐士推导。提示

类型系统。

独立模块。

isolatedModules选项:是否配置为独立的模块。

减少报错

let name:string = "kerwin"
myname.toFixed()

如果类型过于复杂,就写any,偷懒的写法。

对象:

使用接口来写类型。

对象有超强的提示。

interface Obj{
	name:string,
	age:number
}

let myobj:Obj
myobj={
	name:'kerwin',
	age:100
}

后面接受数据,任意多少都行。

在这里插入图片描述

函数类型:

function test(a,b){
	return a+b
}
test(1,2)

选项式api

在这里插入图片描述

方法写错了也能够自动报错。

当定义了类型,就会对应相应类型的api。

在这里插入图片描述

类型断言。

在这里插入图片描述

实例对象,你不确定对象上有innerHTML属性,因为input没有innerHTML属性。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

props未结合ts的写法
在这里插入图片描述

传递对象
在这里插入图片描述

自动补全能力。

import type {Proptype} from 'vue' 这个type怎么理解?

这里的 type 是 TypeScript 的关键字,用于类型声明和类型别名定义。在 Vue.js 中,使用 TypeScript 进行开发时,可以通过 import type 的方式导入一个类型来使用。

具体来说,import type {Proptype} from 'vue' 表示从 vue 模块中导入一个类型别名为 Proptype 的类型。此处的 Proptype 是 Vue.js 框架中用于定义组件属性类型检查的数据类型,它是一个复杂的类型别名,包含了许多其他的类型定义。

通过使用 import type,您可以方便地引用一个类型,而无需同时引入该模块的其他内容,从而使代码更加简洁和可读。同时,由于 TypeScript 是一种强类型语言,在编写代码时使用正确的类型别名也可以帮助您避免一些常见的类型错误和 bug。

在这里插入图片描述

emit事件参数定义类型。检查类型是否符合标准。

组合式api

在这里插入图片描述

显示定义ref
在这里插入图片描述

另一种写法

在这里插入图片描述

DOM元素

在这里插入图片描述

computed也可以采用泛型的写法。

未来去引入别人的库,如果别人的库用ts写的,那么我一但.就会提示出来了。

props传入对象类型的写法:

在这里插入图片描述

过于繁琐:

在这里插入图片描述

本身就是支持泛型的函数。简化写法。在开发的过程中,也会提示你。

emit不会报错。

在这里插入图片描述

里面定义函数类型。

路由与ts的结合

在这里插入图片描述

datalist里面是数组,数组里面每一项是Iitem

里面定义函数类型。

<think>我们正在讨论Vue Vite TS项目Vue Vite普通项目的区别。普通项目通常指的是使用JavaScript而不是TypeScript。 根据引用内容,我们可以总结出以下几点: 1. TypeScript项目使用TypeScript作为编程语言,而普通项目使用JavaScript。 2. TypeScript项目在创建时选择的是vue-ts模板,而普通项目选择的是vue模板(见引用[4])。 3. TypeScript项目需要配置TypeScript相关的编译和类型检查,而普通项目则不需要。 4. TypeScript项目在开发过程中可以利用静态类型检查,提高代码的健壮性和可维护性。 具体区别如下: - **语言特性**:TypeScript是JavaScript的超集,提供了静态类型、接口、泛型等特性,这些在普通JavaScript项目中是没有的。 - **项目配置**:TypeScript项目需要`tsconfig.json`文件来配置TypeScript编译选项(如引用[3]中提到的项目搭建总结,会涉及TypeScript的配置)。 - **开发体验**:TypeScript可以在开发阶段捕获类型错误,减少运行时错误;而普通JavaScript项目则更灵活,但类型错误只能在运行时暴露。 - **工具支持**:TypeScript项目需要集成TypeScript编译器(tsc)以及可能的类型声明文件(如@types/node等),而普通项目不需要。 - **文件扩展名**:TypeScript项目中的脚本文件通常使用`.ts`或`.vue`(单文件组件中设置`lang="ts"`),而普通项目使用`.js`或`.vue`(默认使用JavaScript)。 另外,引用[2]中提到,现在越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass等,说明TypeScript在大型项目中的优势。 因此,主要区别在于语言本身(TypeScript vs JavaScript)以及由此带来的类型安全、工具链配置和开发体验上的差异。 下面我们按照用户要求生成相关问题。</think>### Vue Vite TypeScript 项目 Vue Vite 普通项目的区别 主要区别在于**语言特性和开发工具链**,核心差异如下: 1. **语言基础** - **TS 项目**:使用 TypeScript(JavaScript 的超集),支持静态类型检查、接口和泛型等特性。 ```typescript interface User { id: number; name: string } // 类型声明 const getUser = (id: number): User => { ... } // 类型注解 ``` - **普通项目**:使用纯 JavaScript,无编译时类型检查。 2. **配置差异** - **TS 项目**:需配置 `tsconfig.json` 文件定义编译规则(如目标 ES 版本、严格模式): ```json { "compilerOptions": { "strict": true, // 启用严格类型检查 "module": "ESNext" } } ``` - **普通项目**:无需额外类型配置,仅需基础 Vite 设置。 3. **开发体验** - **TS 项目**: - 优点:编辑器智能提示、编译时类型错误拦截(减少运行时错误)、更好的代码可维护性。 - 缺点:需学习 TypeScript 语法,增加初始配置成本。 - **普通项目**:灵活快速,适合小型项目或原型开发。 4. **文件扩展名** - TS 项目组件文件:`Component.vue` + `Component.ts` - 普通项目组件文件:`Component.vue` + `Component.js` 5. **依赖扩展** TS 项目通常需额外安装类型声明包: ```bash npm install @types/node @types/lodash --save-dev # 类型补充 ``` --- ### 典型场景对比 | **场景** | **Vue Vite TS 项目** | **Vue Vite 普通项目** | |------------------------|-----------------------------------------------|-------------------------------------| | 大型企业应用 | ✅ 类型安全降低维护成本 | ⚠️ 后期重构风险高 | | 快速原型验证 | ⚠️ 类型声明可能拖累速度 | ✅ 敏捷开发更高效 | | 团队协作 | ✅ 类型约束统一接口规范 [^3] | ❌ 依赖文档沟通易出错 | | 第三方库集成 | ✅ 自动获取类型提示(如 `vue-router@4.x`) | ❌ 需手动查阅文档 | --- ### 项目创建命令差异 - **TS 项目创建**: ```bash npm create vite@latest my-app -- --template vue-ts ``` - **普通项目创建**: ```bash npm create vite@latest my-app -- --template vue ``` > 💡 **总结**:TypeScript 在复杂项目中通过静态类型提升健壮性,但增加了学习曲线;纯 JavaScript 项目更适合快速迭代和小型应用。根据引用[2][3],现代中大型 Vue 项目普遍采用 TS 以提升长期可维护性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值