Home >Web Front-end >Front-end Q&A >What file is ts in vue?

What file is ts in vue?

藏色散人
藏色散人Original
2023-01-29 10:10:164356browse

ts in vue refers to the typescript file, which is a superset of js. One of the main things it does is data type verification; ts was developed by Microsoft and is suitable for large-scale project development, enabling development More rigorous.

What file is ts in vue?

The operating environment of this tutorial: Windows 10 system, Vue version 3, DELL G3 computer

What is the ts file in vue?

Application of TS in vue

##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

1. Installation
npm install -g typescript
Version 4.2.3

2. Check the version
tsc --version

3. Run the file (manual)
tsc 文件名

4. Run the file automatically

    Generate the configuration file first
tsc --init

它会自动创建出tsconfig.json文件
    Set up terminal monitoring
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//为装饰器提供元数据的支持
  }}
Note: Some students have problems running their computers and powerShell permissions

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

5. Basic syntax of ts

    Number
  • String
  • Boolean
  • Object
  • Array
  • 元ance
  • undefined
  • Enumeration
  • Any typeany
//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')

6. Function type

No return value

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

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

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

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

//默认参数//如果不传递参数,就是走默认,否则就赋值你传递的内容function fn4(params1: String, params2: String = '白居易'): String {
    return params2}console.log(fn4('李白'));console.log(fn4('曹操', '大关羽'));
Optional parameters

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

7. Class

7.1 Basic class
//创建一个基本类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 Derived class (subclass) Inheritance of class
//类的继承(派生类)//继承了父类,就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致,其实就是修改(重置)//子类中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 Modifier of class
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 Static class
如果在类中声明了类的静态属性和静态方法,那么你不需要实例化,直接通过点就可以获取到当前 静态类的属性/方法

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

7.5 Abstract class (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()

8. Interface )

8.1 Common interface
/* 
接口 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 Class interface
// 接口类 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,'狗的实例化');

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

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

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

    Ordinary decorator of the class
//创建一个普通的类的装饰器//装饰器就是一个普通函数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,'调用');
    Parameter passing of the decorator
//如何给装饰器传递参数 (工厂模式装饰器 ,函数的返回值还是一个函数)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类');// console.log(h1.paramsName,'http类');
    Attribute decorator
//属性装饰器//创建一个普通装饰器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);
    Method decorator
//方法装饰器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类');

10. The latest scaffolding combined with TS to create projects

10.1 Create command
vue create 项目名称

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

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

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

10.4methods
{
  //定义方法
  getInfo(){
    console.log('方法被点击')
  }
}

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

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

})


  mounted() {
    console.log('加载完成')
  }

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

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

10.8 Component communication

1. Passing from parent to child
    Parent component
 <v-header :name=&#39;name&#39; :obj = &#39;obj&#39; ></v-header>
    Sub component
import {Prop } from 'vue-property-decorator'
export default class vNav extends Vue{
    @Prop() name:any
    @Prop() obj:any
}
2. Pass from son to parent
    Sub component
       <div>
            <button @click=&#39;toFather&#39;>给父亲</button>
        </div>
        
//引入组件装饰器 引入核心Vue类
import {Emit } from 'vue-property-decorator'

    //Emit方法装饰器 传参,传入的参数,就是你的自定义事件名称
    @Emit('自定义事件名称')
    toFather(){
        console.log('给父亲的散文诗')
        return '这是给父亲的散文诗'
    }
    Parent component
    <v-nav @自定义事件名称=&#39;getGift&#39; ></v-nav>
    
    //封装一个获取子组件数据的方法
    getGift(e:any):void{
        console.log(e,'数据源');
        
    }
##8.9watch monitoring (listener)
    //浅监听
    @Watch('value')
    getValue(newVal:any){
        console.log(newVal,'新值')
    }
    //监听对象
    //深度监听@Watch()这个方法装饰器,有两个参数,一,监听的对象属性。二、配置对象
    @Watch('obj',{
        deep:true, //深度
        immediate:true //立即立刻
    })
    getObj(newVal:any){
        console.log(newVal,'新')
    }
recommended learning: "
vue video tutorial

The above is the detailed content of What file is ts in vue?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:What is web front endNext article:What is web front end