Welche Datei ist ts in Vue?

In Vue bezieht sich ts auf Typoskriptdateien, und Typoskript ist eine Obermenge von js. Eines der wichtigsten Dinge, die es tut, ist die Überprüfung des Datentyps. Es eignet sich für die Entwicklung großer Projekte und macht die Entwicklung strenger .

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, DELL G3-Computer

Was ist die TS-Datei in Vue?

Die Anwendung von TS in Vue

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

4. Automatisch Führen Sie die Datei aus. Mr. Konfigurationsdatei. Richten Sie die Terminalüberwachung ein

5 . Grundlegende Syntax von ts

6. Funktionstyp

Kein Rückgabewert

npm install -g typescript
Version 4.2.3

hat den Rückgabewerttyp

tsc --version

Beliebiger Typ

tsc 文件名

Standardparametertyp

tsc --init

它会自动创建出tsconfig.json文件

Standardparameter

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

Optionale Parameter

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

• 7. Klasse (Klasse)

7.1 Grundkurs

{"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//为装饰器提供元数据的支持
  }}

7.2 Abgeleitete Klasse (Unterklasse) Klassenvererbung

7.3 Klassenmodifikatoren

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

public

//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')

protected

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

private

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

7.4 Statische Klasse

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

Statische Eigenschaften und statische Methoden

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

9

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

Gewöhnlicher Dekorateur der

Klasse

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

Parameterübergabe des Dekorators

//创建一个基本类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');

Eigenschaftsdekorator

//类的继承（派生类）//继承了父类，就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）//子类中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('生肉')

Methodendekorator

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

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

10. Das neueste Gerüst kombiniert mit TS-Erstellungsprojekt

10.1 Befehl erstellen

///创建一个基本类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 属性 也可以用！！！');

10.6 Lebenszyklus

//创建一个基本类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 属性 也可以用！！！');

10.7 Verschachtelung von Komponenten

10.8 Komponentenkommunikation

1. Weitergabe vom Vater an den Sohn

Übergeordnete Komponente

• //创建一个基本类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 属性 也可以用！！！');

Kindkomponente

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

2. Weitergabe vom Sohn an den Vater

子Komponente

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

Übergeordnete Komponente

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

8.9Watch-Überwachung (Hörer)

//抽象类 必须要规定 有 名字  能开（能跑）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()

empfohlenes Lernen: „vue-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWelche Datei ist ts in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!