您现在的位置是：网站首页> 编程资料编程资料

关于Vue新搭档TypeScript快速入门实践_vue.js_

2023-05-24 430人已围观

简介 关于Vue新搭档TypeScript快速入门实践_vue.js_

Vue官方从2.6.X版本开始就部分使用Ts重写了。

我个人对更严格类型限制没有积极的看法，毕竟各类转类型的骚写法写习惯了。

然鹅最近的一个项目中，是TypeScript+ Vue，毛计喇，学之...…真香！

注意此篇标题的“前”，本文旨在讲Ts混入框架的使用，不讲Class API

1. 使用官方脚手架构建

npm install -g @vue/cli# ORyarn global add @vue/cli

新的Vue CLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。

只需运行vue create my-app。

然后，命令行会要求选择预设。使用箭头键选择Manually select features。

接下来，只需确保选择了TypeScript和Babel选项，如下图：

image-20190611163034679

完成此操作后，它会询问你是否要使用class-style component syntax。

然后配置其余设置，使其看起来如下图所示。

image-20190611163127181

Vue CLI工具现在将安装所有依赖项并设置项目。

image-20190611163225739

接下来就跑项目

2. 项目目录解析

通过tree指令查看目录结构后可发现其结构和正常构建的大有不同。

image-20190611163812421

这里主要关注shims-tsx.d.ts和 shims-vue.d.ts两个文件

两句话概括：

  • shims-tsx.d.ts允许你以.tsx结尾的文件，在Vue项目中编写jsx代码
  • shims-vue.d.ts 主要用于 TypeScript 识别.vue 文件，Ts默认并不支持导入 vue 文件，这个文件告诉ts 导入.vue 文件都按VueConstructor处理。

此时我们打开亲切的src/components/HelloWorld.vue，将会发现写法已大有不同 

至此，准备开启新的篇章 TypeScript极速入门 和 vue-property-decorator

3. TypeScript极速入门

3.1 基本类型和扩展类型

Typescript与Javascript共享相同的基本类型，但有一些额外的类型。

  • 元组 Tuple
  • 枚举 enum
  • Any 与Void

1. 基本类型合集

// 数字，二、八、十六进制都支持 let decLiteral: number = 6; let hexLiteral: number = 0xf00d; // 字符串，单双引都行 let name: string = "bob"; let sentence: string = `Hello, my name is ${ name }. // 数组，第二种方式是使用数组泛型，Array<元素类型>： let list: number[] = [1, 2, 3]; let list: Array = [1, 2, 3]; let u: undefined = undefined; let n: null = null;

2. 特殊类型

1. 元组 Tuple

想象 元组 作为有组织的数组，你需要以正确的顺序预定义数据类型。

const messyArray = [' something', 2, true, undefined, null]; const tuple: [number, string, string] = [24, "Indrek" , "Lasn"]

如果不遵循 为元组 预设排序的索引规则，那么Typescript会警告。

image-20190611174515658

​ （tuple第一项应为number类型）

2. 枚举 enum

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

// 默认情况从0开始为元素编号，也可手动为1开始 enum Color {Red = 1, Green = 2, Blue = 4} let c: Color = Color.Green; let colorName: string = Color[2]; console.log(colorName); // 输出'Green'因为上面代码里它的值是2

另一个很好的例子是使用枚举来存储应用程序状态。

image-20190611175542886

3. Void

在Typescript中，你必须在函数中定义返回类型。像这样：

image-20190611175858587

若没有返回值，则会报错：

image-20190611175932713

我们可以将其返回值定义为void:

image-20190611180043827

此时将无法 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) {} // 存在无法达到的终点

image-20190611181410052

3. 类型断言

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

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

let someValue: any = "this is a string"; let strLength: number = (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 ((something).length) { return (something).length; } else { return something.toString().length; } }

3.2 泛型：Generics

软件工程的一个主要部分就是构建组件，构建的组件不仅需要具有明确的定义和统一的接口，同时也需要组件可复用。支持现有的数据类型和将来添加的数据类型的组件为大型软件系统的开发过程提供很好的灵活性。

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

1. 泛型方法

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

function gen_func1(arg: T): T { return arg; } // 或者 let gen_func2: (arg: T) => T = function (arg) { return arg; }

调用方式也有两种：

gen_func1('Hello world'); gen_func2('Hello world'); // 第二种调用方式可省略类型参数，因为编译器会根据传入参数来自动识别对应的类型。

2. 泛型与Any

Ts 的特殊类型 Any 在具体使用时，可以代替任意类型，咋一看两者好像没啥区别，其实不然：

// 方法一：带有any参数的方法 function any_func(arg: any): any { console.log(arg.length); return arg; } // 方法二：Array泛型方法 function array_func(arg: Array): Array { console.log(arg.length); return arg; }
  • 方法一，打印了arg参数的length属性。因为any可以代替任意类型，所以该方法在传入参数不是数组或者带有length属性对象时，会抛出异常。
  • 方法二，定义了参数类型是Array的泛型类型，肯定会有length属性，所以不会抛出异常。

3. 泛型类型

泛型接口：

interface Generics_interface { (arg: T): T; } function func_demo(arg: T): T { return arg; } let func1: Generics_interface = func_demo; func1(123); // 正确类型的实际参数 func1('123'); // 错误类型的实际参数

3.3 自定义类型：Interface vs Type alias

  • Interface，国内翻译成接口。
  • Type alias，类型别名。

1. 相同点

都可以用来描述一个对象或函数：

interface User { name: string age: number } type User = { name: string age: number }; interface SetUser { (name: string, age: number): void; } type SetUser = (name: string, age: number): void;

都允许拓展（extends）：

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说interface可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

interface extends interface

interface Name {    name: string;  } interface User extends Name {    age: number;  }

type extends type

type Name = {    name: string;  } type User = Name & { age: number  };

interface extends type

type Name = {    name: string;  } interface User extends Name {    age: number;  }

type extends interface

interface Name {    name: string;  } type User = Name & {    age: number;  }

2. 不同点

type 可以而 interface 不行

type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名 type Name = string // 联合类型 interface Dog { wong(); } interface Cat { miao(); } type Pet = Dog | Cat // 具体定义数组每个位置的类型 type PetL
                
                

                

                                            
上一篇：JavaScript中Set集合的方法详情_javascript技巧_

                                                                
下一篇：微信小程序自定义渐变的tabbar导航栏功能_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网