在vue中ts文件怎么应用
发布时间：2023-07-18 11:00:55 所属栏目：教程 来源：互联网
导读： 这篇文章主要介绍了vue中ts文件怎么应用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中ts文件怎么应用文章都会有所收获，下面我们一起来看看吧。
|
这篇文章主要介绍了vue中ts文件怎么应用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中ts文件怎么应用文章都会有所收获，下面我们一起来看看吧。 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<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.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<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客户端'}//创建一个类,如何调用装饰器，通过@去调用装饰器@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 创建组件 <template> <div> <h2>欢迎来到首页</h2> <h2>{{name}}</h2> </div> </template> <script lang='ts'> import {Vue} from 'vue-property-decorator' class Home extends Vue{ //类的作用域省略了声明方式 constructor(){ super() //当前this 指向的是子类（包含了父类的属性和方法） console.log(this,'this'); } } // 导出这个封装好的子类组件 export default Home </script> 10.3 data数据的创建 name:String （编辑：航空爱好网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
