vue中ts文件怎么应用

这篇文章主要介绍了vue中ts文件怎么应用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue中ts文件怎么应用文章都会有所收获,下面我们一起来看看吧。

成都创新互联公司公司2013年成立,先为鹿城等服务建站,鹿城等地企业,进行企业商务咨询服务。为鹿城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

vue中ts是指typescript文件,typescript是js超集,它最主要做的一件事,就是数据类型验证;ts是微软开发的,适用于大型的项目开发,能使开发更加严谨。

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年angular2.x它就是开始使用ts,所以说angular是谷歌和微软开发的精品。
15之前大家都是使用angular(1.x),它的设计模式还是MVC。它在升级到2.x时候,全变了,从语法到设计模式都换了。它换成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

它会自动创建出tsconfig.json文件
  • 设置终端监听

vscode => 终端=> 运行生成任务 => 选择监听 (开启自动监听模式)
  • tsconfig.json

释放出,输出目录,目录地址随意设置
 "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,//生成相应的 '.d.ts' 文件
    "sourceMap": true, //生成相应的 '.map' 文件
    "outFile": "./",//将输出文件合并为一个文件
    "outDir": "./",//指定输出目录
    "rootDir": "./",//用来控制输出目录结构 --outDir.
    "removeComments": true,//删除编译后的所有的注释
    "noEmit": true,//不生成输出文件
    "importHelpers": true,//从tslib导入辅助工具函数
    "isolatedModules": true,//将每个文件做为单独的模块(与 'ts.transpileModule' 类似).
    /* 严格的类型检查选项 */
    "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' (Node.js) 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

//numberlet a:Number = 10//a = '字符串' 这种赋值不对!!!a =500console.log(a,'a的值')//Stringlet msg:String = '信息'msg = "100"//Booleanlet isShow:Boolean = trueisShow = false//Objectlet obj:Object = {
   name:'张三',
   age:18}//array //空数组let arr:[] = []// 下面的赋值不对//arr = [1,2,3]//定义普通数组let arr1:Array = ['香蕉','苹果']let arr2:Array = [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.getconsole.log(type,'type');//大部分的data属性的结果都是来自于接口返回的数据 //任意类型//anylet anyInfo:any
anyInfo = 100anyInfo ='结果'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,'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');// console.log(zoo,'zoo类实例化的结果');// console.log(zoo.eat('肉'),'执行结果');//类的继承(派生类)//继承了父类,就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致,其实就是修改(重置)//子类中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,'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');// console.log(zoo,'zoo类实例化的结果');// console.log(zoo.eat('肉'),'执行结果');//类的继承(派生类)//继承了父类,就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致,其实就是修改(重置)//子类中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,'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');// console.log(zoo,'zoo类实例化的结果');// console.log(zoo.eat('肉'),'执行结果');//类的继承(派生类)//继承了父类,就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致,其实就是修改(重置)//子类中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,'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){

}

*/// let ming = {//     name:'',//     age:0,//     hobby:'',//     sex:0,//     dec:''// }//设置一个 人员信息类型接口 ====基本接口enum sexInfo {
   man,woman}// 这个接口专门用于人员信息的属性验证interface Person{
   name:String,
   age:Number,
   sex:sexInfo,//枚举类型
   hobby:Array,
   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客户端'}//创建一个类,如何调用装饰器,通过@去调用装饰器@getHttpclass Http{}let http = new Http()console.log(http,'http类');// console.log(http.nameInfo,'调用');
  • 装饰器的传参

//如何给装饰器传递参数 (工厂模式装饰器 ,函数的返回值还是一个函数)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 h2 = new Http1()console.log(h2,'http类');// console.log(h2.paramsName,'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 h3 = new Http2()console.log(h3,'h3类');console.log(h3.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 h4 = new Http3()console.log(h4,'h4类');

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

10.1 创建命令
vue create 项目名称

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


10.3 data数据的创建
    name:String    //类的作用域省略了声明方式
   constructor(){
       super()
       //当前this 指向的是子类(包含了父类的属性和方法)
       console.log(this,'this');
       this.name = '大白起'
   }
10.4methods
{
 //定义方法
 getInfo(){
   console.log('方法被点击')
 }
}
10.5计算属性
  //计算属性
 get allPrice(){
   return 100
 }
10.6生命周期
必须要调用组件装饰器,否则无法触发
//类的装饰器之组件
@Component({

})


 mounted() {
   console.log('加载完成')
 }
10.7组件的嵌套
//引入组件
import {Vue,Component,Watch} from 'vue-property-decorator'
//类的装饰器之组件
@Component({
 components:{
   vHeader
 }
})

//视图中

10.8组件通信

一、父传子

  • 父组件

 
  • 子组件

import {Prop } from 'vue-property-decorator'
export default class vNav extends Vue{
   @Prop() name:any
   @Prop() obj:any
}
二、子传父
  • 子组件

       

           
       

       
//引入组件装饰器 引入核心Vue类
import {Emit } from 'vue-property-decorator'

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

    
   
   //封装一个获取子组件数据的方法
   getGift(e:any):void{
       console.log(e,'数据源');
       
   }
8.9watch监听(侦听器)
    //浅监听
   @Watch('value')
   getValue(newVal:any){
       console.log(newVal,'新值')
   }
   //监听对象
   //深度监听@Watch()这个方法装饰器,有两个参数,一,监听的对象属性。二、配置对象
   @Watch('obj',{
       deep:true, //深度
       immediate:true //立即立刻
   })
   getObj(newVal:any){
       console.log(newVal,'新')
   }

关于“vue中ts文件怎么应用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue中ts文件怎么应用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


名称栏目:vue中ts文件怎么应用
分享网址:http://pwwzsj.com/article/pecjip.html