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
npm install -g typescript Version 4.2.3
tsc --version
tsc 文件名
tsc --init 它会自动创建出tsconfig.json文件
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,//生成相应的 '.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，并执行命令set-ExecutionPolicy RemoteSigned将PowerShell的执行策略更改为RemoteSigned
//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('曹操', '大关羽'));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 私有的 它只能在父类中被调用。不能在子类以及类的外部被调用 在类的作用域中你可以创建属性，我们可以给它添加修饰符。决定了这个属性能否被子类或者类的外部所有使用（调用）
///创建一个基本类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 属性 也可以用！！！');//创建一个基本类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 属性 也可以用！！！');//创建一个基本类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 属性 也可以用！！！');如果在类中声明了类的静态属性和静态方法，那么你不需要实例化，直接通过点就可以获取到当前 静态类的属性/方法
//创建一个基本的静态类class staticInfo{
//设定一个静态属性
static stName:String ='静态属性111'
//设定一个静态方法
static getTime():any{
return '时间的结果'
}}console.log(staticInfo,'静态类');console.log(staticInfo.stName,'静态属性');console.log(staticInfo.getTime(),'执行你的静态方法');你创建一个抽象类，只需要定义它的描述即可，不需要去具体实现它的行为。谁继承这个抽象类，谁就具体描述当前行为与骨架 举例： 抽象（车） 这辆车 要有名字 要能跑
//抽象类 必须要规定 有 名字 能开（能跑）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()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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
