Vue3.0前TypeScript入门实践详解与项目配置

20 浏览量更新于2024-08-31 收藏 151KB PDF 举报

"本文详细探讨了Vue3.0之前利用TypeScript进行最佳入门实践的方法。作者在项目中首次尝试TypeScript与Vue的结合，尽管起初对类型限制持保留态度，但在实际应用中体验到了TypeScript带来的好处。文章首先介绍了如何通过Vue CLI 3.x的官方脚手架快速配置TypeScript支持，用户可以选择手动添加特性，确保项目中包含TypeScript和Babel选项，以支持类风格组件语法。在项目目录结构方面，作者特别提到了`shims-tsx.d.ts`和`shims-vue.d.ts`这两个关键文件。`shims-tsx.d.ts`允许在Vue项目中编写`.tsx`结尾的文件，并支持jsx语法，使得开发人员能够充分利用TypeScript的强类型特性。而`shims-vue.d.ts`则解决了Vue组件的导入问题，因为TypeScript默认不支持直接导入`.vue`文件，通过这个文件，TypeScript能够理解`.vue`文件作为Vue构造函数来处理。在具体的组件示例中，如`src/components/HelloWorld.vue`，代码以TypeScript编写，导入了`Component`, `Prop`, 和 `Vue`装饰器，这些来自`vue-property-decorator`库，使得组件的定义更加清晰，类型安全。通过引入TypeScript，代码的可维护性和错误预防能力得到了显著提升。本文不仅提供了使用Vue CLI 3.x与TypeScript集成的步骤，还展示了如何在Vue组件中无缝融入TypeScript，这对于希望在Vue3.0项目中引入静态类型检查的开发者来说，是一份实用的入门指南。通过学习和实践，开发者可以更好地理解和利用TypeScript的优势，提升开发效率和代码质量。"

此时将无法 return

4. Any

Emmm...就是什么类型都行，当你无法确认在处理什么类型时可以用这个。

但要慎重使用，用多了就失去使用Ts的意义。

let person: any = "前端劝退师"

person = 25

person = true

主要应用场景有：

接入第三方库

Ts菜逼前期都用

5. Never

用很粗浅的话来描述就是：" Never 是你永远得不到的爸爸。"

具体的行为是：

throw new Error(message)

return error("Something failed")

while (true) {} // 存在无法达到的终点

3. 类型断言

简略的定义是：可以用来手动指定一个值的类型。

有两种写法，尖括号和 as :

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

let strLength: number = (someValue as string).length;

使用例子有：

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方

法：

function getLength(something: string | number): number {

return something.length;

}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.

// Property 'length' does not exist on type 'number'.

如果你访问长度将会报错，而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法，此时需要断言

才不会报错：

function getLength(something: string | number): number {

if ((<string>something).length) {

return (<string>something).length;

} else {

return something.toString().length;

}

3.2 泛型： Generics

软件工程的一个主要部分就是构建组件，构建的组件不仅需要具有明确的定义和统一的接口，同时也需要组件可复用。支持现

有的数据类型和将来添加的数据类型的组件为大型软件系统的开发过程提供很好的灵活性。

在 C# 和 Java 中，可以使用"泛型"来创建可复用的组件，并且组件可支持多种数据类型。这样便可以让用户根据自己的数据类

型来使用组件。

1. 泛型方法

在TypeScript里，声明泛型方法声明泛型方法有以下两种方式：

剩余13页未读，继续阅读

weixin_38631389

粉丝: 6
资源: 891

Vue3.0前TypeScript入门实践详解与项目配置

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

vue语法自动转typescript(解放双手)

一个非常简单的为Vue20和TypeScript20准备的项目开发环境

Vue3.0前TypeScript入门：混入框架与官方脚手架配置

前端项目-零基础入门Vue3.0+TypeScript

vue3.0 + typeScript的后台管理系统.zip

zhihu-vue3-learning:vue3.0 + typescript仿知乎专栏

RecruitmentManager:基于Vue3.0 + Typescript的人才管理平台

vue-wechat-login:Vue 3.0+TypeScript 微信网页授权登录示例

VUE3.0+TypeScript的后台管理系统基础架构.zip

最新资源