vue中TS的应用

TS(typescript)

ts: typescript ,它是js超集（包含js所有的语法，在基础上增加了数据类型定义）
它最主要做的一件事，就是数据类型验证。
js是弱类型语言，java是强类型语言
let a = 123,a 就是number类型。let a = '123',a就是字符串类型
但是ts是在声明并定义的时候就是定义了它的数据类型。 let a:number = 100
如果你要去修改a ,a只能被修改成数值型，如果你修改成其他类型，那么会报错。
它运行的时候并不会报错（即使数据类型有问题，但是结果不会出错），在编译的过程中会报错。
浏览器没有办法去解析ts,ts是来源于js最终还是要以js的状态去运行。ts是弱类型，它也标志着，ts去向java靠拢
ts是谁开发的？
是微软开发的
ts适用的场景？
它适用于大型的项目开发，使你的开发更加的严谨
谁在用ts？
15年它就是开始使用ts,所以说angular是谷歌和微软开发的精品。
15之前大家都是使用angular()，它的设计模式还是MVC。它在升级到时候，全变了，从语法到设计模式都换了。它换成MVVM设计模式
vue3.0（核心库，还是载测试版本）它的源码就是用ts
一线大厂做项目都用ts。比如vue最新脚手架+ ts  或者 react中 ts + dva +umi+hook

一、安装

npm install -g typescript
Version 4.2.3

二、查看版本

tsc --version

三、运行文件（手动）

tsc 文件名

四、自动运行文件

先生成配置文件

tsc --init

它会自动创建出文件

设置终端监听

vscode => 终端=> 运行生成任务 => 选择监听 （开启自动监听模式）

释放出，输出目录，目录地址随意设置
  "outDir": "./dist",

{
"compilerOptions": {
    /* 基本选项 */
    "target": "es5",// 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs",// 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],// 指定要包含在编译中的库文件
    "allowJs": true,//允许编译 javascript 文件
    "checkJs": true,//报告javascript文件中的错误
    "jsx": "preserve",//指定jsx代码的生成: 'preserve', 'react-native', or 'react'
    "declaration": true,//生成相应的 '.' 文件
    "sourceMap": true, //生成相应的 '.map' 文件
    "outFile": "./",//将输出文件合并为一个文件
    "outDir": "./",//指定输出目录
    "rootDir": "./",//用来控制输出目录结构 --outDir.
    "removeComments": true,//删除编译后的所有的注释
    "noEmit": true,//不生成输出文件
    "importHelpers": true,//从tslib导入辅助工具函数
    "isolatedModules": true,//将每个文件做为单独的模块（与 '' 类似）.
    /* 严格的类型检查选项 */
    "strict": true,//启用所有严格类型检查选项
    "noImplicitAny": true,//在表达式和声明上有隐含的any类型时报错
    "strictNullChecks": true,//启用严格的null检查
    "noImplicitThis": true,//当this表达式值为 any 类型的时候，生成一个错误
    "alwaysStrict": true,//以严格模式检查每个模块，并在每个文件里加入 'use strict'
    /* 额外的检查 */
    "noUnusedLocals": true,//有未使用的变量时，抛出错误
    "noUnusedParameters": true,//有未使用的参数时，抛出错误
    "noImplicitReturns": true,//并不是所有函数里的代码都有返回值时，抛出错误
    "noFallthroughCasesInSwitch": true,//报告switch语句的fallthrough错误。
    /* 模块解析选项 */
    "moduleResolution": "node",//选择模块解析策略：'node' () or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./",//用于解析非相对模块名称的基目录
    "paths": {},//模块名到基于 baseUrl 的路径映射的列表
    "rootDirs": [],//根文件夹列表，其组合内容表示项目运行时的结构内容
    "typeRoots": [],//包含类型声明的文件列表
    "types": [],//需要包含的类型声明文件名列表
    "allowSyntheticDefaultImports": true, //允许从没有设置默认导出的模块中默认导入。
    /* Source Map Options */
    "sourceRoot": "./",//指定调试器应该找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./",//指定调试器应该找到映射文件而不是生成文件的位置
    "inlineSourceMap": true,//生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
    "inlineSources": true,//将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
    /* 其他选项 */
    "experimentalDecorators": true,//启用装饰器
    "emitDecoratorMetadata": true//为装饰器提供元数据的支持
  }
}

注意：有的同学电脑运行有问题，powerShell 权限的问题

以管理员身份运行 PowerShell，并执行命令set-ExecutionPolicy RemoteSigned将PowerShell的执行策略更改为RemoteSigned

五、ts的基本语法

Number
String
Boolean
Object
Array
元祖
undefined
枚举
任意类型any

//number
let a:Number = 10
//a = '字符串' 这种赋值不对！！！
a =500
console.log(a,'a的值')
//String
let msg:String = '信息'
msg = "100"
//Boolean
let isShow:Boolean = true
isShow = false
//Object
let obj:Object = {
    name:'张三',
    age:18
}
//array 
//空数组
let arr:[] = []
// 下面的赋值不对
//arr = [1,2,3]
//定义普通数组
let arr1:Array<String> = ['香蕉','苹果']
let arr2:Array<Number> = [1,2,3,4]
//指向声明 不赋值
let info:String
info= "1111"
//undefined 类型
let b:undefined

//元祖类型 声明N个类型，你要根据你声明的类型进行赋值，一一对应
let arr3:[Number,String,Boolean] = [1,'字符串',true]

//枚举（有序举例） 默认是从0开始 依次排序。如果想去修改默认值直接赋值即可
enum Sex{
    man,
    woman
}
//传输方式
enum methodInfo{
    get='GET',post='Post'
}
console.log(methodInfo.get,'枚举');
console.log(methodInfo.post,'枚举');
let type:methodInfo = methodInfo.get
console.log(type,'type');

//大部分的data属性的结果都是来自于接口返回的数据 
//任意类型
//any
let anyInfo:any 
anyInfo = 100
anyInfo ='结果'
console.log(anyInfo,'anyInfo')

六、函数类型

无返回值

function fn(): void {
    console.log('无返回值');
}
console.log(fn(), '执行函数');

有返回值类型

function fn1(): String {
    return '函数有返回值'
}
console.log(fn1());

任意类型

function fn2(): any {
    return '任意'
}
console.log(fn2());

定义参数类型

//参数 一定要设定数据类型
function fn3(msg: String): void {
    console.log(msg, '参数一')
}
fn3('100')

默认参数

//默认参数
//如果不传递参数，就是走默认，否则就赋值你传递的内容
function fn4(params1: String, params2: String = '白居易'): String {
    return params2
}

console.log(fn4('李白'));
console.log(fn4('曹操', '大关羽'));

可选参数

//可选参数 （传不传参数都可以）
function fn5(params1: String, params2?: String): String {
    return params1
}
console.log(fn5('李白'));
console.log(fn5('曹操', '大关羽'));

七、类（class）

7.1基本类

//创建一个基本类
class Zoo{
    //类的作用域 省略了所有的声明方式
    //设定一个变量，未赋值会报错，我们可以给其一个undefined类型还可以去构造函数中赋值
   public name:String | undefined
    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父类中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜欢吃${food}`
    }
}

let zoo = new Zoo('狼')
zoo.eat('肉')
console.log(zoo.name,'zooname');

7.2 派生类（子类）类的继承

//类的继承（派生类）
//继承了父类，就拥有了父类的所有属性和方法
// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）
//子类中constructor(){ super()} 必须调用super() 它可以调用父类中的属性和方法
class Tiger extends Zoo{
    name:String
    constructor(a:String){
        //super调用父类中的属性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'');
    }
    eat(foods:String):String{
        return '这个是一个字符串'
    }
}

let tiger = new Tiger('老虎')
tiger.eat('生肉')

7.3 类的修饰符

public 公有的（一般定义一个属性，如果没有给修饰符，它就是公有的，public是默认），它可以在类中，子类中，类外部被调用
protected 受保护的 它可以在父类与子类中被使用，不能在类的外部被调用
private 私有的 它只能在父类中被调用。不能在子类以及类的外部被调用

在类的作用域中你可以创建属性，我们可以给它添加修饰符。决定了这个属性能否被子类或者类的外部所有使用（调用）

public

///创建一个基本类
class Zoo{
    //类的作用域 省略了所有的声明方式
    //设定一个变量，未赋值会报错，我们可以给其一个undefined类型还可以去构造函数中赋值
    // 公有的public （如果不添加这个修饰符，这个属性默认就是公有的）
   public name:String | undefined
    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父类中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜欢吃${food}`
    }
}

let zoo = new Zoo('狼')
zoo.eat('肉')
console.log(zoo.name,'zooname');

// (zoo,'zoo类实例化的结果');
// (('肉'),'执行结果');

//类的继承（派生类）
//继承了父类，就拥有了父类的所有属性和方法
// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）
//子类中constructor(){ super()} 必须调用super() 它可以调用父类中的属性和方法
class Tiger extends Zoo{
    name:String
    constructor(a:String){
        //super调用父类中的属性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'');
    }
    eat(foods:String):String{
        return '这个是一个字符串'
    }
}

let tiger = new Tiger('老虎')
tiger.eat('生肉')
console.log(tiger.name,'name 属性 也可以用！！！');

protected

//创建一个基本类
class Zoo{
    //类的作用域 省略了所有的声明方式
    //设定一个变量，未赋值会报错，我们可以给其一个undefined类型还可以去构造函数中赋值
    //protected 只能在父类 和子类中被调用， 不能在类的外层被调用
   protected name:String | undefined
    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父类中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜欢吃${food}`
    }
}

let zoo = new Zoo('狼')
zoo.eat('肉')
console.log(zoo.name,'zooname');

// (zoo,'zoo类实例化的结果');
// (('肉'),'执行结果');

//类的继承（派生类）
//继承了父类，就拥有了父类的所有属性和方法
// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）
//子类中constructor(){ super()} 必须调用super() 它可以调用父类中的属性和方法
class Tiger extends Zoo{
    name:String
    constructor(a:String){
        //super调用父类中的属性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'');
    }
    eat(foods:String):String{
        return '这个是一个字符串'
    }
}

let tiger = new Tiger('老虎')
tiger.eat('生肉')
console.log(tiger.name,'name 属性 也可以用！！！');

private

//创建一个基本类
class Zoo{
    //类的作用域 省略了所有的声明方式
    //设定一个变量，未赋值会报错，我们可以给其一个undefined类型还可以去构造函数中赋值
    //private  私有属性 只能在自己的类中被调用，不能被子类以及类的外层调用
   private name:String | undefined
    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父类中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜欢吃${food}`
    }
}

let zoo = new Zoo('狼')
zoo.eat('肉')
console.log(zoo.name,'zooname');

// (zoo,'zoo类实例化的结果');
// (('肉'),'执行结果');

//类的继承（派生类）
//继承了父类，就拥有了父类的所有属性和方法
// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）
//子类中constructor(){ super()} 必须调用super() 它可以调用父类中的属性和方法
class Tiger extends Zoo{
    name:String
    constructor(a:String){
        //super调用父类中的属性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'');
    }
    eat(foods:String):String{
        return '这个是一个字符串'
    }
}

let tiger = new Tiger('老虎')
tiger.eat('生肉')
console.log(tiger.name,'name 属性 也可以用！！！');

7.4 静态类

如果在类中声明了类的静态属性和静态方法，那么你不需要实例化，直接通过点就可以获取到当前 静态类的属性/方法

静态属性与静态方法

//创建一个基本的静态类
class staticInfo{
    //设定一个静态属性
    static stName:String ='静态属性111'
    //设定一个静态方法
    static getTime():any{
        return '时间的结果'
    }
}
console.log(staticInfo,'静态类');

console.log(staticInfo.stName,'静态属性');
console.log(staticInfo.getTime(),'执行你的静态方法');

7.5抽象类（abstract）

你创建一个抽象类，只需要定义它的描述即可，不需要去具体实现它的行为。谁继承这个抽象类，谁就具体描述当前行为与骨架
举例： 抽象（车） 这辆车 要有名字  要能跑

//抽象类 必须要规定 有 名字  能开（能跑）
abstract class Car{
    //定义抽象属性
    abstract nameCar:String
    //定义抽象的方法
    abstract run():String
}

//创建一个类去继承 封装的抽象类
class BMW extends Car{
    //实现（定义）抽象类中的 成员的具体行为
    nameCar:String
    carAge:Number 
    constructor(){
        super()
        this.nameCar = '大宝马'
        this.carAge = 10
    }
    //具体实现抽象类中方法
    run():String{
    
        return `${this.nameCar}跑起来了。。。。`
    }
    //创建一个停止的方法
    stop():void{
        console.log('爆胎了。。。。');
        
    }
}
let bmw = new BMW()
console.log('哈哈哈哈');

console.log(bmw.run(),'宝马类');
bmw.stop()

八、接口（interface）

8.1 普通接口

/* 
接口 interface

如果我们有一个普通函数，但是函数的参数很复杂，如何去验证参数的数据类型？？？
funtion fn(msg:String,person:Object,hobby:Array<String>){

}

*/
// let ming = {
//     name:'',
//     age:0,
//     hobby:'',
//     sex:0,
//     dec:''
// }
//设置一个 人员信息类型接口 ====基本接口
enum sexInfo {
    man,woman
}
// 这个接口专门用于人员信息的属性验证
interface Person{
    name:String,
    age:Number,
    sex:sexInfo,//枚举类型
    hobby:Array<String>,
    desc:String
}

let ming:Person ={
    name:'小明子',
    age:19,
    sex:sexInfo.man,
    hobby:['吃饭','学习','打游戏'],
    desc:'这个对明的一个描述'
}
console.log(ming,'ming的信息验证并赋初始值');

8.2类的接口

// 接口类 interface
//创建一个普通的接口类
interface Animal{
    anName:String,
    eatFood():String
}
//创建一个普通类 implements（实现）
class Dog implements Animal{
    anName:String = '小狗子'
    anAge:Number | undefined
    eatFood():String{
        return `${this.anName}喜欢吃骨头`
    }
}
let dog = new Dog()
console.log(dog,'狗的实例化');

九、装饰器

装饰器是es7 最大的一个亮点。
我们在ts中装饰器也是比较中要的一个概念。你可以发现ts用了很多最新语法，它也被看作是未来所有标准的定义

装饰器它本身就是一个普通的函数，主要用于装饰类
类的装饰器
类的属性的装饰器
类的方法的装饰器

一定要释放开，ts配置文件中对装饰器的限制
"experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */

类的普通装饰器

//创建一个普通的类的装饰器
//装饰器就是一个普通函数
function getHttp(classInfo:any):any{
    console.log(classInfo,'shui');
    //当前函数的参数classInfo 是当前装饰器装饰的类
    //在当前函数中做一些逻辑或者说去修改 创建类的属性和方法
    classInfo.prototype.nameInfo = 'http客户端'
}


//创建一个类,如何调用装饰器，通过@去调用装饰器
@getHttp
class Http{

}

let http = new Http()
console.log(http,'http类');
// (,'调用');

装饰器的传参


//如何给装饰器传递参数 (工厂模式装饰器 ，函数的返回值还是一个函数)
function getHttp1(params:any):any{
    //装饰器传递参数，两个参数分别是谁
    //params它是装饰器的参数 类型不能确定
    //classInfo 是类
    return (classInfo:any)=>{
        console.log(classInfo,'who');
        console.log(params,'params');
        classInfo.prototype.paramsName = params
    }
}

// @getHttp1('张飞')
@getHttp1({a:1,b:2})
class Http1{

}

let h1 = new Http1()
console.log(h1,'http类');
// (,'http类');

属性装饰器

//属性装饰器
//创建一个普通装饰器
function getProps(params:any):any{
    return (classInfo:any,propName:any)=>{
        console.log(params,'aaaaaaaa');
        console.log(classInfo,'bbbbbb');
        console.log(propName,'ccccccc');
        classInfo[propName] = params
    }
}

class Http2{
    //调用封装好的属性装饰器
   @getProps('蔡文姬') httpName:String | undefined
}
let h2 = new Http2()
console.log(h2,'h2类');
console.log(h2.httpName);

方法装饰器

//方法装饰器
function getMethods(a:any):any{
    /* 
    方法装饰器的四个参数
    a 代表的是装饰器传参
    b 代表的是类
    c 代表的是被装饰的方法名称
    d 代表的是方法的一些内置属性
    */
    return (b:any,c:any,d:any)=>{
        console.log(a,'aaaaaaaa');
        console.log(b,'bbbbbb');
        console.log(c,'ccccccc');
        console.log(d,'ddddddd');
    }
}

class Http3{
    //调用封装好的属性装饰器
   @getMethods('方法') getUrl():any{

    }
}
let h3 = new Http3()
console.log(h3,'h3类');

十、最新的脚手架结合TS创建项目

10.1 创建命令

vue create 项目名称

注意点：
1、要选择 typescript
2、要选择类的组件创建方式

10.2 创建组件

<template>
    <div>
        <h1>欢迎来到首页</h1>
        <h1>{{name}}</h1>
    </div>
</template>
<script lang='ts'>
import {Vue} from 'vue-property-decorator'
class Home extends Vue{
    //类的作用域省略了声明方式
    constructor(){
        super()
        //当前this 指向的是子类（包含了父类的属性和方法）
        (this,'this'); 
    }
}
// 导出这个封装好的子类组件
export default Home
</script>

10.3 data数据的创建

    name:String
    //类的作用域省略了声明方式
    constructor(){
        super()
        //当前this 指向的是子类（包含了父类的属性和方法）
        console.log(this,'this'); 
        this.name = '大白起'
    }

10.4methods

{
  //定义方法
  getInfo(){
    ('方法被点击')
  }
}

10.5计算属性

  //计算属性
  get allPrice(){
    return 100
  }

10.6生命周期

必须要调用组件装饰器，否则无法触发
//类的装饰器之组件
@Component({

})


  mounted() {
    ('加载完成')
  }

10.7组件的嵌套

//引入组件
import {Vue,Component,Watch} from 'vue-property-decorator'
//类的装饰器之组件
@Component({
  components:{
    vHeader
  }
})

//视图中
<v-header ></v-header>

10.8组件通信

一、父传子

父组件

 <v-header :name='name' :obj = 'obj' ></v-header>

子组件

import {Prop } from 'vue-property-decorator'
export default class vNav extends Vue{
    @Prop() name:any
    @Prop() obj:any
}

二、子传父

子组件

       <div>
            <button @click='toFather'>给父亲</button>
        </div>
        
//引入组件装饰器 引入核心Vue类
import {Emit } from 'vue-property-decorator'

    //Emit方法装饰器 传参，传入的参数，就是你的自定义事件名称
    @Emit('自定义事件名称')
    toFather(){
        ('给父亲的散文诗')
        return '这是给父亲的散文诗'
    }

父组件

    <v-nav @自定义事件名称='getGift' ></v-nav>
    
    //封装一个获取子组件数据的方法
    getGift(e:any):void{
        (e,'数据源');
        
    }

8.9watch监听（侦听器）

    //浅监听
    @Watch('value')
    getValue(newVal:any){
        console.log(newVal,'新值')
    }
    //监听对象
    //深度监听@Watch()这个方法装饰器，有两个参数，一，监听的对象属性。二、配置对象
    @Watch('obj',{
        deep:true, //深度
        immediate:true //立即立刻
    })
    getObj(newVal:any){
        console.log(newVal,'新')
    }

TS(typescript)

一、安装

二、查看版本

三、运行文件（手动）

四、自动运行文件

五、ts的基本语法

六、函数类型

七、类（class）

7.1基本类

7.2 派生类（子类） 类的继承

7.3 类的修饰符

7.4 静态类

7.5抽象类（abstract）

八、接口（interface）

8.1 普通接口

8.2类的接口

九、装饰器

十、最新的脚手架结合TS创建项目

10.1 创建命令

10.2 创建组件

10.3 data数据的创建

10.4methods

10.5计算属性

10.6生命周期

10.7组件的嵌套

10.8组件通信

一、父传子

二、子传父

8.9watch监听（侦听器）

相关文章

7.2 派生类（子类）类的继承