Vue小tips-d16

一、typescript

1.官网

https://www.tslang.cn/

 

2.简介

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

 

 

3.安装

npm i typescript -g

　　测试是否安装成功

tsc -v

 

4.编译

(1)手动编译

　　在指定目录下创建一个index.ts文件，在命令行中进入到这个目录下，执行命令

tsc index.ts

　　执行完成后会在当前目录下自动的生成一个同名.js文件

(2)自动编译-vscode

• ① 创建一个名称为ts-demo的文件夹，并且在改文件夹下创建一个index.ts文件
• ② 在命令行中，进入到ts-demo目录下，执行初始化命令

tsc --init

　　生成tsconfig配置文件

　　修改其中的outDir选项，把注释解开，改为./js

• ③在vscode的任务栏中找到 终端 > 运行生成任务 > 监视tsconfig.json

　　这样在ts文件中编写代码，就会自动在js目录下生成index.js文件了。

 

5.基本使用

(1)声明变量和变量的数据类型

　　ts的最大的特点是进行严谨的数据类型验证，要求我们在声明一个变量时，就定义该变量的数据类型，并且赋值的内容必须与指定的类型一致。

var 变量名 : 数据类型名称
var 变量名 : 数据类型名称 = 内容

 

(2)常见数据类型

　　string字符串、number数字、boolean布尔值、function函数、object对象、array数组...

 

(3)在ts声明数组

var 变量名称 : Array<数组元素的数据类型>;

　　示例代码：

var users : Array<string>;
// users = ['小王',true]//此时数组的成员数据类型如果不是字符串的话，就会出现警告
users = ['张飞','李四']

 

(4)ts新增的数据类型

• ①元组

　　元组是特殊的数组，元组的元素个数和数据类型都必须要预先设置好才能使用

var 变量名 : [ 第一个成员的数据类型，第N成员的数据类型 ]

　　示例代码：

var arr1 : [ string,number ];
// arr1 = [100,200]//第一个成员的数据类型不匹配
// arr1 = ['100',200,true]//目标只有两个成员，但是现在给了三个成员
arr1 = ['小飞',50]

 

• ②枚举

enum 变量名称 { 值1,值N }

　　示例代码：

enum weeks { '星期一' = 1,'星期二','星期三' }
console.log(weeks.星期三)

枚举中成员的默认下标是0

 

• ③any

　　任意类型

　　示例代码：

var info : any;
info = 10
info = '小张'
var arr2 : Array<any>
arr2 = ['张飞',100,true]

 

• ④void

　　void表示函数没有返回值

 

• ⑤never

　　表示那些永远不存在的数据类型

 

6.函数

ts中的函数和es6中有很多相同之处

(1)函数的声明

function 函数名称() : 函数的返回值类型{ ... }

　　示例代码：

function say() : void{
    console.log('func say...')
}
say();

 

(2)函数的参数

• ①默认参数

function add(num1 :number,num2:number = 100 ) : number{
    return num1 + num2;
}
// console.log(add(100,50));
console.log(add(60))//此时只传递了一个参数，第二个参数的默认值是100
console.log(add(60,60))//传递了两个参数，第二个参数的值是60

 

• ②可选参数

function dologin(username:string,password?:string) :void {
    console.log(username)
    console.log(password)
}
dologin('user01','1111')
// dologin('user01')//此时第二个参数是可选的，如果没有传递则是undefined

 

• ③剩余参数

function getStr(str1 : string,...str2:Array<any>) : void{
    console.log(str1)
    console.log(str2)
}
getStr('abc','def','ghj',100,true,{username:'小飞'})

　　第一个参数会被一个形参接收到，剩下所有的参数都会被第二个参数接收到，并把每一个实参作为数组的成员。

 

7.接口

interface，起约束作用，可以把声明好的接口当成数据类型使用。

　　示例代码：

//声明接口
interface Person{
    name : string,
    phone : number
}
//使用接口
var user1 : Person;
user1 = {
    name : '小王',
    phone : 15511112222
}

 

8.装饰器

装饰器是一种特殊的类型声明，它可以附加到类、属性、方法、参数上，用来修饰它们默认属性、行为。

装饰器可以说一个特殊的函数。

类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器它也是es7的标准特性之一

要使用装饰器的话，需要把tsconfig.json中的"experimentalDecorators": true启用

(1)类装饰器

在类的外部，改变类的行为（属性和方法）

• ①普通装饰器

　　声明装饰器

function logClass(target : any):void{
    target.prototype.name = '千里马'
}

　　声明一个类，并调用装饰器

@logClass
class Animal{}
var d1 = new Animal()
console.log(d1)

　　在声明类之前，通过@符号和装饰器名称来调用装饰器

 

• ②装饰器工厂

　　如果需要在调用装饰器时，传递额外的参数来影响类的行为

function logClass(params:any){
    return function(target:any){
        target.prototype.name = params;
    }
}
//使用装饰器（注入）
@logClass('汗血宝马')
class Animal{}
var d1 = new Animal();
console.log(d1)

 

(2)属性装饰器

　　声明属性装饰器

function logProperty(target:any,propertyName:any){
    console.log(target,1111)
    console.log(propertyName,2222)
}

　　使用装饰器

class Animal{
    @logProperty
    type:string = ''
}

　　属性装饰器的第一个参数是类的构造函数，第二个参数是属性名称

 

(3)方法装饰器

　　声明方法装饰器

function logAction(target:any,methodName:any,desc:any){
    console.log(target,1111)
    console.log(methodName,2222)
    console.log(desc,3333)
}

　　调用方法装饰器

class Animal{
    @logAction
    eat():void{
        console.log('eating...')
    }
}

 

方法装饰器可以接收三个参数：

• 第一个参数是方法所在的类的构造函数

• 第二个参数是方法名称

• 第三个参数是方法权限的描述

 

(4)参数装饰器

　　声明装饰器

function logParams(target:any,methodName:any,paramsIndex:number){
    console.log(target,1111)
    console.log(methodName,2222)
    console.log(paramsIndex,3333)
}

　　调用装饰器

class Animal{
    eat(num:number,@logParams type:string):void{
        console.log('eating...')
    }
}

 

参数装饰器可以接收三个参数：

• 第一个参数是所在的类的构造函数

• 第二个参数是所在的函数名称

• 第三个参数是参数的索引位置

 

 

二、ts结合vue

1.初始化新版脚手架项目

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, Router
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n 

 

2.新语法

(1)定义组件（class）

<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
@Component({})
export default class Home extends Vue{

}
</script>

 

(2)定义初始数据

　　在类中，以属性的方式来定义初始数据

msg : string = ''

 

(3)定义方法

<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
// 调用类装饰器
@Component({})
export default class Home extends Vue{
    //定义初始数据
    msg : string = ''
    mounted() {
        console.log('挂载完成...')
        this.changeMsg(); 
    }
    // 定义函数
    changeMsg():void{
        this.msg = '你迈不过去的坎'
    }
}
</script>

生命周期钩子函数想要起作用的话，需要在声明类之前使用Component装饰器

 

(4)计算属性

　　通过get关键词来定义计算属性

//计算属性
get newnum():number{
    return this.num + 50;
}

 

(5)组件通信

①父子组件

　　第一步：创建子组件，和父组件方式相同，都使用ts

<template>
    <div>
        <h1>child组件</h1>
    </div>
</template>

<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
@Component({})
export default class Child extends Vue{
    
}
</script>

<style>

</style>

 

　　第二步：在父组件中引入子组件，并注册

<script lang="ts">
import vChild from './child.vue'
import { Vue,Component } from 'vue-property-decorator'
// 调用类装饰器==很重要，不使用装饰器的话，生命周期等无效
@Component({
    components:{ vChild }//注册子组件
})

 

　　第三步：在父组件使用子组件时，传递参数

<v-child :homemsg="msg"></v-child>

 

　　第四步：在子组件中接收数据

　　通过Prop装饰器来接收数据

<template>
    <div>
        <h1>child组件</h1>
        <p>父组件传递的数据：{{ homemsg }}</p>
    </div>
</template>

<script lang="ts">
import { Vue,Component,Prop } from 'vue-property-decorator'
@Component({})//使用类装饰器
export default class Child extends Vue{
    @Prop({})//使用属性装饰器
    homemsg : string | undefined
}
</script>

 

②子父组件

　　第一步：在父组件中声明函数，用来接收子组件传递的数据并改变自身的数据

receiveMsg(str:string):void{
    this.childmsg = str;
}

　　

　　第二步：在父组件使用子组件时，通过自定义事件传递定义好的函数

<v-child :homemsg="msg" @homemethod="receiveMsg"></v-child>

 

　　第三步：在子组件中通过Emit装饰器来触发父组件传递的自定义事件，并传递参数

<script lang="ts">
import { Vue,Component,Prop,Emit } from 'vue-property-decorator'
@Component({})//使用类装饰器
export default class Child extends Vue{
    @Prop({})//使用属性装饰器
    homemsg : string | undefined
    @Emit('homemethod')
    send():string{
        return '都是因为你腿太短了'
    }
}
</script>