TypeScript---Web学习总结

已于 2022-06-30 09:37:29 修改
阅读量428 收藏
点赞数
分类专栏： Web 文章标签： 前端 typescript javascript
于 2022-06-29 19:46:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58892312/article/details/125528340
版权

TypeScript---Web学习总结

1 TypeScript 简介

TypeScript 是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

  • 它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
  • TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。
  • TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件，扩展了它对于流行库的支持，如 jQuery，MongoDB，Node.js 和 D3.js 等。

2 TypeScript基本内容

2.1 let 和 const

  • let
    关键字 let 是 ES6 中新增的特性，它的出现是为了解决 var 变量声明所存在的一些问题。
    不使用 var，使用 let或const申明变量，并加上类型说明，且作用域为块级即以{}为界。
    在 let 中引入了块级作用域（也可称为词法作用域）。
    示例：
    我们可以看下面这段代码，在函数 myFunc 中使用 let 声明了一个变量 a，且在 if 语句中声明了一个变量 b：
function myFunc(){
    let a = 10;
    if(a > 5) {
        let b = a;
        return b;
    }
    return b;
}

可以知道变量 a 的作用域就在整个 myFunc() 函数中，而变量 b 的作用域在 if 语句块中，变量 a 可以在函数内使用，但是如果我们在 if 语句以外的地方使用变量 b，则会出错。

  • const
    const 也是块级作用域。
    它与 let 唯一不同在于，const 声明的变量只能在声明时被赋值，之后不能再次被赋值，也就是说通过 const 声明的变量被赋值后不能再改变。
let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!

const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

在实际使用中，最好尽量使用 let 和 const 来声明变量，减少var 的使用。所有变量除了需要修改的都应该使用 const 声明。

2.2 解构

TypeScript支持以下形式的解构（以解构的名义命名，即分解结构）：

  • 对象分解
  • 阵列解构
  1. 解构数组
    最简单的解构莫过于数组的解构赋值，
    可以从数组中提取值，按照对应位置，对变量赋值
//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
  1. 解构对象
    对象也可以解构：
let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;

就像数组解构，可以用没有声明的赋值：

({ a, b } = { a: "baz", b: 101 });

也可以使用…语法：

let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

2.3 函数

  1. 函数类型
  • 使用完整函数类型定义
// 第一种es5写法：
function result(arg1: number, arg2: number): number {
  return arg1 + arg2
}
// 第二种es6写法：
const result1 = (arg1: number, arg2: number): number => arg1 + arg2
  • 完整的函数类型
// 顶一个变量，变量的值是函数
// 传入参数类型、返回值类型都是number
let result2: (x: number, y: number) => number
result2 = (arg1: number, arg2: number) => arg1 + arg2 // 正确
result2 = (arg1: string, arg2: number) => arg1 + arg2 // 错误，arg1类型和规定的不一致
  • 使用接口定义函数类型
// 方式一：
interface MyFunc {
  (x:number, y: number): number
}
// 方式二：
type MyFunc2 = (x:number, y: number) => number
  • 使用类型别名定义函数类型
// 定义函数,参数类型是number返回值类型也是number
type MyFunc = (x: number, y: number) => number

// 使用,声明一个变量，变量的类型就是上面定义的函数
let sameMyFunc : MyFunc
sameMyFunc = (arg1: number, arg2: number) => arg1 + arg2

let sameMyFunc : MyFunc = (arg1: number, arg2: number) => arg1 + arg2
  1. 函数参数
  • 可选参数
// 函数的可选参数必须放置在必选参数后面，也就是最后面
// 定义函数类型
type FuncType = (arg1: number, arg2: number, arg3?:number) => number
//定义函数，使用上面规定的函数类型
// const useFuncType: FuncType = (x: number, y: number) => x + y
const useFuncType2: FuncType = (x: number, y: number, z: number) => x + y + z
  • 默认参数
    用户没有传值，参数有自己的默认值
// 函数的默认参数最好也放在最后面，放在前面也可以的，但是不推荐
// 函数的默认参数可以不写类型，ts会根据默认值自己判断是哪种类型
const defaultValFun = (x: number, y: number = 5) => x + y // 推荐
const defaultValFun = (x: number, y = 5) => x + y // 推荐
const defaultValFun = (x: number = 10, y: number) => x + y // 不推荐
  • 剩余参数
    必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。
    有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来， 在TypeScript里，可以把所有参数收集到一个变量里
// 使用 ...args 来代替就可以
// ...args 也要放到参数的最后面
// ...args:number[] 剩余参数是number类型的数组
const func = (args1:number,args2:number,...args:number[])=>{}
  • 箭头函数
    特点：简化函数定义、解决this问题
    箭头函数能保存函数创建时的 this值，而不是调用时的值。
//无参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting1 = () => `Hello TS!`;
console.log(greeting1());
//一个参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting2 = (name: string) => `Hello ${name}`;
console.log(greeting2('QiGe'));
//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
let add1 = (n1: number, n2: number) => n1 + n2;
console.log(add1(1, 2));
//两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
let add2 = (n1: number, n2: number) => {
  let sum = n1 + n2;
  return sum;//改为sum++结果如何？
}
console.log(add2(1, 2));

2.4 类class

类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。（请注意，我们要用的Angular框架大量使用类）

  • 类的定义和使用
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

声明一个 Greeter类。这个类有3个成员：一个叫做 greeting的属性，一个构造函数和一个 greet方法。
在引用任何一个类成员的时候都用了 this。 它表示我们访问的是类的成员。
最后一行，使用 new构造了 Greeter类的一个实例。 它会调用之前定义的构造函数，创建一个 Greeter类型的新对象，并执行构造函数初始化它。

  • 类的属性和函数的访问权限

类中的属性和函数都有访问权限，默认为public即全局可访问，其次为protected即可在类的内部和其子类的内部可访问，最后为private，只能在该类内部可访问。

//访问权限
class MyInfo { //class是关键字，类名默认全部大写首字母
  public name: string; //public属性，可省略
  private _weather: string; //私有属性，习惯以_开头进行命名
  
  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this.name = name;
    this._weather = weather;
  }
  printInfo(): void { //其它函数
    this._test();
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this._weather}.`);
  }
  private _test(): void {
    console.log('You can not call me outside!');
  }
}

let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData._weather); //error!
myData._test(); //error
myData.printInfo();
  • 存取器-getter、setter

TypeScript支持通过getters/setters来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。
下面来看如何把一个简单的类改写成使用 get和 set。

class Employee {
    fullName: string    
}

let employee = new Employee();
employee.fullName = "durban zhang";

if (employee.fullName) {
    console.log(employee.fullName);
}

运行后结果如下

$ npx ts-node src/classes_4.ts
durban zhang

可以随意的设置 fullName

对于存取器有下面几点需要注意的：首先，存取器要求你将编译器设置为输出ECMAScript 5或更高。 不支持降级到ECMAScript 3。 其次，只带有 get不带有 set的存取器自动被推断为 readonly。 这在从代码生成 .d.ts文件时是有帮助的，因为利用这个属性的用户会看到不允许够改变它的值。

  • 静态属性

如果类的某些属性属于全体类对象共有的，那么可以把这些属性通过static声明为静态属性。以避免每个对象都生成一份同样的数据成员，浪费内存。
类的静态属性属于类，因此是通过类名来访问。
类的静态属性共用于全体对象，如果运行时对其进行了更改，会影响所有对象。

class UChar{
	static MAX : number = 255;
	static MIN : number = 0;
	private data : number;
	constructor(data : number)
	{
		if(data > UChar.MAX){
			data = UChar.MAX
		}
		if(data < UChar.MIN){
			data = UChar.MIN;
		}
		this.data = data;
	}
	print():void{
		console.log("data=", this.data);
	}
}

let u1 = new UChar(1000);    //初始值溢出
u1.print();                  //输出：data= 255
UChar.MAX = 10000;           //改变了静态属性
let u2 = new UChar(1000);    //更改值不再溢出
u2.print();                  //输出：data= 1000

可见有时在运行时更改静态属性并不是一个好的方式，因此建议将静态属性声明为readonly或private，禁止随意的在类的外部对静态属性进行更改。

  • 继承
    可以通过extends关键字继承其它类，从而成为其子类。
    Typescript在编译的时候会提供对象继承的模拟实现。
    实现对象继承时，需要实现下面两点：
  1. 实现类成员的继承
  2. 实现实例成员的继承

Typescript实现类成员继承的方法如下：

var extendStatics = Object.setPrototypeOf || {__proto__:[]} instanceOf Array && function(child, parent) {child.__proto__ = parent} || function(child, parent) { for (var p in parent) if (parent.hasOwnProperty(p)) child[p] = parent[p]; }

在Typescript的实现中，处理了三种情形：

  1. 如果浏览器支持Object.setPrototypeOf，就直接使用
  2. 如果浏览器支持__proto__属性，就将子类的__proto__属性设置为父类
  3. 如果上述都不支持，就通过for循环复制父类的类成员

Typescript实现实例成员继承的方法如下：

function(child, parent) {
function base() { base.constructor = child}
child.prototype = (parent == null) ? Object.create(null) :  base.prototype = parent.prototype,  new base();
}

将上述两个方法合并，可以得到对象继承的实现方法：

function extends(child, parent) {
extendStatics(child, parent);
function base() { this.constructor = child; }
child.prototype = (parent == null) ? Object.create(null) : base.prototype = parent.prototype, new base();
}

2.5 模块Module

JavaScript 有一个很长的处理模块化代码的历史，TypeScript 从 2012 年开始跟进，现在已经实现支持了很多格式。不过随着时间流逝，社区和 JavaScript 规范已经收敛为名为 ES 模块（或者 ES6 模块）的格式，这也就是我们所知的 import/export 语法。

对于模块而言它自身是运行在一个局部的作用域中的，这一点非常重要，这也意味着在一个模块中的变量，函数，类等，除非你导出，外部程序是无法使用的，因此 TypeScript 也遵循了 import 和 export 的机制，反之如果一个文件内没有这两个关键字存在的话，那么它的内容将会被视为全局。

2.6 装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。
装饰器的写法：普通装饰器(无法传参)、装饰器工厂(可传参)

  • 装饰器工厂
    如果要定制一个修饰器如何应用到一个声明上，得写一个装饰器工厂函数。 装饰器工厂就是一个简单的函数，它返回一个表达式，以供装饰器在运行时调用。
  • 装饰器组合
    多个装饰器可以同时应用到一个声明上。
//书写在同一行上：
@f @g x
//书写在多行上：
@f
@g
x

同样的，在TypeScript里，当多个装饰器应用在一个声明上时会进行如下步骤的操作：
① 由上至下依次对装饰器表达式求值。
② 求值的结果会被当作函数，由下至上依次调用。

  • 常见的装饰器
  1. 类装饰器
    类装饰器在类声明之前被声明〈紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
  2. 属性装饰器
    属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数:
    装饰的实例。对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
    装饰的属性名
/**
 * 属性装饰器
 * params就是装饰器传入的参数
 * target就是装饰的实例
 * attr就是装饰的属性
 */
function logProperty(params: any) {
  return function (target: any, attr: string) {
    //通过这样的方式就可以通过装饰器来修改属性值
    target[attr] = params
  }
}
​
class HttpClient {
  @logProperty('属性装饰器赋值')
  public apiUrl: string | undefined
  constructor() {
  }
​
  getData() {
    console.log(this.apiUrl)
  }
}
​
const http = new HttpClient()
http.getData() // 属性装饰器赋值
  1. 方法装饰器
    它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。方法装饰会在运行时传入下列个参数:
    装饰的实例。对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
    成员的名字
    成员的属性描述符
/**
 * params 传递给装饰器的值
 * target 装饰器的实例
 * methodName 方法名称
 * descriptor 描述
 */
function get(params: any) {
  console.log(params) // http://www.baidu.com
  return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
    console.log(target)
    console.log(methodName)
    console.log(descriptor)
    //修改前保存原始传入的方法
    let originalMethod = descriptor.value
​
    //重写传入的方法
    descriptor.value = function (...args: any[]) {
      //执行原来的方法
      originalMethod.apply(this, args)
​
      args = args.map(val => +val)
​
      console.log(args)
    }
  }
}
​
class HttpClient {
  constructor() {
  }
​
  @get('http://www.baidu.com')
  getApi() {
  }
}
​
const http: any = new HttpClient()
​
http.getApi('123', '456', '789')  //打印[123, 456, 789]
  1. 参数装饰器
    运行时会被当做函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入3个参数：
    装饰的实例。对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
    方法名
    参数在函数参数列表中的索引
function logParams(param: any) {
  return function (target: any, methodName: string, paramIndex: number) {
    console.log(target)     // httpClient实例
    console.log(methodName) // getApi
    console.log(paramIndex) // 0
  }
}
​
class HttpClient {
  constructor() {
  }
  getApi(@logParams('id') id: number) {
    console.log(id)
  }
}
​
const http = new HttpClient()
​
http.getApi(123456)

2.7 依赖注入

依赖：如果 A类 的功能实现依赖于 B类的功能，那么 类B 就是 类A 的依赖；
注入： 通过 构造函数……方法动态的把 B类的实例，传递给 A类就是注入；【反之在A类的内部实例化一个B类的实例，就不是注入】

declare namespace Type{
    interface Phone {
        call: Phone.Call;
        play: Phone.Play;
    }
    namespace Phone {
        interface Call{
            (n: number): void
        }
        interface Play{
            (): void
        }
    }

    interface Person{
        name: string;
        phone: Phone;
        call: Phone.Call
        play: Phone.Play
    }
}

class Phone implements Type.Phone{
    constructor(){

    }
    call(n: number){
        console.log('call', n)
    }
    play(){
        console.log('play')
    }
}


// 非依赖注入方法
class Person implements Type.Person {
    // 添加了新的类关系 Phone
    phone: Type.Phone = new Phone()
    name: string;
    
    constructor(
        name: string
    ){
        this.name = name;
    }

    call(n: number){
        return this.phone.call(n)
    }

    play(){
        return this.phone.play();
    }
}


// 依赖注入的方式
class Person2 implements Type.Person {
    phone: Type.Phone;
    name: string;
    // 把phone 的实例 通过构造函数注入进去
    // 这样 类 Person2 只依赖接口
    // 没有依赖具体的 Phone 类；
    constructor(name: string, phone: Type.Phone){
        this.phone = phone;
        this.name = name;
    }

    call(n: number){
        return this.phone.call(n)
    }

    play(){
        return this.phone.play();
    }
}


// 测试

const bill = new Person2('bill', new Phone())

bill.call(11)
bill.play()

3 参考资料

  1. TypeScript的函数
  2. TypeScript基础入门 - 类 - 存取器
  3. TypeScript类的静态属性分析
  4. 装饰器
  5. TypeScript装饰器，有必要好好了解一下咯
  6. JavaScript[TypeScript] - 设计模式 依赖注入
YinCanned
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WEB学习之JavaScript & TypeScript总结
qq_54553728的博客
07-05 511
JavaScript和typescript的一些学习
JavaScript & TypeScript 学习总结
m0_64792558的博客
07-09 302
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都可以使用 JavaScript。 JavaScript 非常容易学。 JavaScript 是 web 开发人员必须学习的 3 门语言中的一门： HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 控制了网页的行为JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的
web前端-TypeScript学习
yong_19930826的博客
06-14 5036
TypeScript 是什么？TypeScript(简称：TS)是JavaScript的超集（JS有的TS都有）。TypeScript = Type +JavaScript(在JS基础之上，为JS添加了类型支持TypeScript是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行。TypeScript为什么要为JS添加类型支持？背景： JS的类型系统存在”先天缺陷“，JS代码中绝大部分错误都是类型错误（Uncaught TypeError）。
TypeScript 学习笔记（二十一）：TypeScript 与后端框架的结合使用
Programming Talk
06-14 751
在 TypeScript 项目中，使用类型定义文件（如*.d.ts）可以提升类型检查的准确性。
TypeScript-学习之路
isfor_you的博客
08-25 1125
对比JS js比较简单、易用，但同时容易出现问题，存在安全隐患 js后期维护比较困难，不适合开发大型项目，面向对象写的比较麻烦（是写在构造函数中还是写在原型中） 有值类型的概念但是没有变量类型的概念 //变量动态类型 let age = 10; age = '10'; age = true; 安全问题：当需要a的类型为数字进行运算时，我们亦可以改变a的类型为字符串，在运算时就会发生错误（字符串拼接），同时这个问题不会报错，因此会产生很大的问题。 同时函数的参数也没有类型，在传入参数时没有限制，后续使
TypeScript学习总结
weixin_59049031的博客
07-10 775
这篇笔记主要记录了我在学习TypeScript时的重点知识总结。通过web应用基础这门课程的学习，我对于TypeScript是什么，TypeScript的基本用法和语法有了初步的了解。TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远
TypeScript - 一种思维方式
lentoo的博客
04-25 385
电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开发无疑就是在尝试换一种思维方式做事情。其实直到最近，我才开始系统的学习...
uni-app学期总结
dhxbxh的博客
04-24 1130
通过详细整理uni-app语句并进行应用，我们可以更加深入地理解uni-app的特性和使用方法，提高移动应用开发的效率和质量，希望本文能够对读者有所启发和帮助。Uni-App基于Vue.js框架开发，采用了通用的前端技术栈，开发者可以利用已有的知识和经验快速上手，降低了学习和开发成本。Uni-App拥有丰富的开发生态和周边生态，包括丰富的组件库和插件，开发者可以快速构建出功能丰富、界面美观的应用。多平台适配：考虑不同平台的适配问题，保证应用在各个平台上的一致性和良好的体验。
JavaScript&TypeScript学习总结
qq_52187415的博客
07-05 282
JavaScript&TypeScript学习总结
工作总结-1
人生代码 ---- 公众号
05-29 3314
JavaScript 使用 mediaDevices API 选择摄像头
react-redux-typescript-course
05-23
在现代Web开发中，React、Redux和TypeScript是三个极为重要的工具。本教程将引导你深入理解如何将这三个强大的技术结合在一起，构建高效、健壮且类型安全的前端应用。 一、React：组件化前端框架 React是由...
typescript-doc-intro
03-16
**TypeScript 入门指南** TypeScript 是一种由微软开发的强类型、静态类型的超集语言，它在 JavaScript 的基础上增加了许多高级特性，如接口...通过学习并掌握 TypeScript，开发者可以更好地应对现代 Web 开发的挑战。
typescript-snake:TypeScript中的Snake游戏
04-30
总结来说，typescript-snake项目提供了一个实践TypeScript编程技能的机会，同时也展示了如何将TypeScript应用于创建交互式Web应用。通过参与这样的项目，开发者可以加深对TypeScript的理解，提升编程技巧，为开发更...
apollo-express-prisma-typescript-with-auth
03-10
【标题】"Apollo Express Prisma TypeScript与Auth"项目是一个基于特定技术栈的Web应用程序示例，主要用于演示如何在...对于想要学习或实践GraphQL、TypeScript和现代Web开发的开发者来说，这是一个极好的学习资源。
jquery-plugin-typescript-example：示例项目，演示如何使用TypeScript编写jQuery插件
02-04
总结来说，这个项目“jquery-plugin-typescript-example”为开发者提供了一个实战平台，教导如何将TypeScript的强大功能与jQuery插件开发相结合。通过学习和实践这个项目，开发者不仅可以掌握jQuery插件的编写技巧，...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 779
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 250
【代码】TS如何处理js模块的类型？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 316
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值