初识typeScript

已于 2022-03-03 16:03:09 修改
阅读量2.2k 收藏
点赞数
文章标签： typescript javascript 前端
于 2022-01-11 11:04:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pure_White520/article/details/122320387
版权

typeScript是js的超集，会被编译成javaScrip代码。

安装TypeScript

npm install -g typescript

查看安装成功

tsc -V

vscode手动编译代码

tsc 加文件路径 编译出相同名称的一个js文件

tsc helloworld.ts

自动编译

  1. 生成tsconfig.json文件
tsc --init
  1. 修改tsconfig.json配置
"outDir": "./js",//编译的js文件位置
"strict": false,    //是否开启严格模式
  1. 启动监视任务
    Terminal -> run Task ->Show All Tasks -> tsc:watch…示例
    创建ts文件就会编译生成一个js文件。

类型注解：

类型注解是一种轻量级的为函数或变量添加约束的方式。
类型不对会报错；而因为js是弱类型语言，故还是可以编译成js。
在这里插入图片描述
编译看到错误：

Argument of type 'number[]' is not assignable to parameter of type 'string'.

接口

interface 规定了结构，如果结构不一样则会报错

 interface Iperson {
    firstName: String;
    lastName: String;
  }
  function showFullName(person:Iperson) {
    return person.firstName +'_'+ person.lastName;
  }
  const person ={
    firstName:'hh',
    lastName:'wy'
  }

  console.log(showFullName(person))

加入我注释person 的firstName，则报错：
在这里插入图片描述

类

interface Iperson {
    firstName: String;
    lastName: String;
  }
  class Person {
    //   定义公共的字段（属性）
    firstName: String;
    lastName: String;
    fullName: String;
    constructor(firstName: String, lastName: String) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullName = this.firstName + "-" + this.lastName;
    }
  }
  const person = new Person("诸葛", "孔明");

  function showFullName(person: Iperson) {
    return person.firstName + "_" + person.lastName;
  }
  console.log(showFullName(person));

typeScript的常用使用

ts中变量一开始是什么变量，后期赋值时也只能用这个类型的数据，不允许用其他类型的数据赋值给当前这个变量。

1. 基础类型

  • 布尔值 boolean
let isDone: boolean = false;
isDone = true;
  • 数字类型 number
let a1: number = 10 // 十进制
let a2: number = 0b1010  // 二进制
let a3: number = 0o12 // 八进制
let a4: number = 0xa // 十六进制
  • 字符串 string
let name: string=''
  • null和undefined
    null和undefined都可以作为其他类型的子类型。可以赋值给其他类型的变量。
let u: undefined = undefined
let n: null = null

let name :string = null//关闭严格模式下不会报错
  • 数组
    数组定义后，里面的数据类型和定义的数据类型要保持一致，否则会报错。
    数组定义方式1：
let arr1 :number[] =[1,2,2]//数组里面只能是number的类型

数组定义方式2：(泛型的存储方式）
语法： let 变量名： Array<数据类型> = [数组]

let arr1 :Array<number> =[1,2,2]
  • 元组
    定义数组的时候，类型和数据的个数一开始就已经限定了，可以不是同一类型。
    元组类型时候的时候，数据的类型的位置和数据的个数应该在和定义元组的时候的数据类型及位置应该是一致的。
let t1: [string, number] 
t1 = ['hello', 10] // OK
t1 = [10, 'hello'] // Error
  • 枚举 enum
    编号从0开始
enum Color {
  Red,
  Green,
  Blue
}
let myColor: Color = Color.Green
console.log(myColor, Color.Red, Color.Blue)

可以手动赋值

enum Color {
  Red=2,
  Green=3,
  Blue=122
}
  • any
    编程阶段不知道数据类型的，可以定义任何类型。
    当一个数组中要存储多个数据，个数不确定，类型不确定，也可以用any。这种情况下编译时没有错误操作的提示信息。
let str :any ='9000'
let str :any =45
let str :any =[1,'字符串']
  • void
    表示没有任何类型
    当一个函数没有返回值时，你通常会见到其返回值类型是 void，一般用来说明函数的返回值不能是undefined和null之外的值。
function fn(): void {
  console.log('fn()')
  // return undefined
  // return null
  // return 1 // error
}

只能为它赋予 undefined 和 null，意义并不大。

let unusable: void = undefined
  • object
function getObj (obj:object) : object{
	return {
	name:'123
	}
}
  • 联合类型

表示取值可以时多种类型中的一种

//参数可以是数字类型或字符串类型
function getString(str:string|number) :string{}
  • 类型断言

告诉编译器我知道我在干嘛，没有运行时的影响，只是在编译的时候影响。
语法方式：

 <类型>变量名
 值 as 类型

function getString(str:string|number) :string{
	if((<string>str).length){
		return (<string>str).length
		// 或者   return (str as string).length
	}else{
		return str.toString().length
	}
}
  • 类型推断

TS会在没有明确的指定类型的时候推测出一个类型。

/* 定义变量时赋值了, 推断为对应的类型 */
let b9 = 123 // number
// b9 = 'abc' // error

/* 定义变量时没有赋值, 推断为any类型 */
let b10  // any类型
b10 = 123
b10 = 'abc'

2. 接口 interface

使用接口来定义对象的类型。
接口时对象的状态（属性）和行为（方法）的抽象（描述）。
限定或约束对象中的属性数据。

只读属性：readonly

readonly id：number//只读属性

？可有可无

sex?:string

示例：

interface IPerson{
	readonly id：number//只读属性
	name:string
	age:number
	sex?:string//加上❓表示可以有 可以没有
}
//person少一个则报错
const person:IPerson={
	id:1,
	name:'hy',
	age:18,
	sex：'女’
}
  • 函数类型

通过接口的方式作为函数的类型来使用，参数列表里的每个参数都需要名字和类型。

interface SearchFunc(){
	(source:string,subString:string):boolean
}

const mySearch: SearchFunc = function (source: string, sub: string): boolean {
  return source.search(sub) > -1
}

console.log(mySearch('abcd', 'bc'))
  • 类类型 implements

类的类型。类可以实现一个接口也可以实现多个接口，注意接口中的内容要真正的实现。

//定义一个接口
interface IFly{
	//该方法中什么都没有
	fly()
}

interface ISwim{
	//该方法中什么都没有
	swim()
}
//定义一个类。这个类的类型就是上面的接口,实际上也可以认为IFly约束了当前的这个person类
class Person implements IFly{
	fly(){
		console.log('1234')
	}
}

//一个类也可以同时被多个接口约束
class Person2 implements ISwim,IFly{
	fly(){
		console.log('1234')
	}
	swim(){
		console.log('1234')
	}
}

const person=new Person()
const person2=new Person2()
person.fly()

person2.fly()
person2.swim()
  • 继承 extends

接口和接口之间叫继承，类和接口之间叫实现。

//接口可以继承其他的多个接口
interface IMflayAndSwim extends Ifly,ISwim{}

3 . 类

可以理解为模板，通过模板实例化对象。面向对象的编程思想。

class Person{
	name:string,
	age:number,
	gender：string,
	//默认值 age=18 
	constructor(name:string='',age:number=18,gender：string){
		this.name=name
		this.age=age
		this.gender=gender
	},
	SayHi(str:string){
		console.log(`大家好，我是${this.name}`+str)
	}
}

const person=new Person()
person.SayHi()

  • 继承
    类与类之间的关系。

  • A类继承了B类 此时A类叫子类（派生类），B类叫基类（超类/父类）。 类和类之间如果有继承关系，需要使用extends关键字

  • 子类中可以调用父类中的构造函数，使用的是super关键字（包括调用父类中的实例方法，可以可以使用super)

  • 子类中可以重写父类的方法

class Students extends Person{
	constructor(name:string='',age:number=18,gender：string){
	//调用父类中的构造函数，使用suoer
		super(name,age,gender)
	},
	SayHi(){
		console.log('学生类中的方法')
		super.SayHi('haha')
	}
}
  • 类的修饰符
    类中的成员的修饰符，主要是描述类中的成员（属性、构造函数、方法）的可访问性。
    public：默认修饰符，公共的，任何位置都可以访问类中的成员。
    private：私有的，外部无法访问这个成员数据，子类中也是无法访问该数据的。
    protected：只能在内部以及字类中访问，外部不能访问。
class Person{
 	readonly name:string,
 	//public name:string,
 	constructor(name:string){
		this.name=name
	}
	eat(){
		console.log('加油啊',this.name)
	}
}

readonly修饰符：只读不能修改。构造函数中可以对只读的属性成员的数据进行修改。如果构造函数中没有任何参数，类中的属性成员此时已经使用readonly进行修饰，那么外部也是不能对这个属性值修改的。
构造函数中的参数，一旦使用readonly 修饰后，就会有对应的一个属性成员。外部也是无法修改类中的属性成员的值的。（同样的public等修饰符修饰后都会自动给类增加对应的属性成员，属性与修饰符定义的一样）

例如：构造函数中的参数，一旦使用readonly 修饰后，Person就会有name属性成员。

class Person{
 	constructor( readonly name:string){//name参数属性，这里不写readonly会报错
		this.name=name
	}
}
  • 存取器
    TypeScript 支持通过 getters/setters 来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。
    只有两个都有的话，就可以又读取又设置。
class Person {
  firstName: string = 'A'
  lastName: string = 'B'
  constructor(firstName:string, lastName: string){
  	this.firstName=firstName
  	this.lastName=lastName
  }
  //读取器--负责读取数据的
  get fullName () {
    return this.firstName + '-' + this.lastName
  }
  //设置器--负责设置数据的
  set fullName (value) {
    const names = value.split('-')
    this.firstName = names[0]
    this.lastName = names[1]
  }
}
const p = new Person()
console.log(p.fullName)
p.fullName='冲_a'//如果没set则会报错，不能修改
  • 静态属性
    static 修饰的属性或方法，在使用的时候是通过 类名.静态属性 的方式调用，不需要实例化。
/* 
静态属性, 是类对象的属性
非静态属性, 是类的实例对象的属性
*/

class Person {
  name1: string = 'A'
  static name2: string = 'B'
  constructor(name:string){
  	//this.name2=name  会报错，因为name2是静态属性，不能通过实例对象来调用
  }
}

console.log(Person.name2)
console.log(new Person().name1)
  • 抽象类
    抽象类做为其它派生类的基类使用。 它们不能被实例化。不同于接口，抽象类可以包含成员的实现细节。 abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。为了让 子类 实例化以及实现内部的抽象方法。
    抽象类的目的或作用最终都是为子类服务的。
abstract class Animal{
	abstract eat()//抽象方法不能有具体的实现
	//理解：每个动物吃的 方式都不一样，所以不能用统一的进行描述
}
class dog extends Animal{
//重新的实现抽象类中的方法，此时这个方法就是dog的实例方法
	eat(){
		console.log('舔着吃')
	}
}

const ani:Animal =new Animal()//报错，，不能实例化抽象类的对象
  • 多态
    父类型的引用指向了子类型的对象，不同类型的对象正对相同的方法，产生了不同的行为。
    如果子类型有扩展的方法, 不能让子类型引用指向父类型的实例 。
    如果子类型没有扩展的方法, 可以让子类型引用指向父类型的实例。
class Animal{
	name:string
	//  构造函数
	constructor(name:string) {
		this.name=name
	}
	run(distance:number){
		console.log(`跑了${distance}米这么远的距离`
	}
}

class Dog extends Animal{
	constructor(name:string) {
		super(name)
	}
	//实例方法，重写父类中的实例方法
	run(distance:number=6){
		console.log(`跑了${distance}米这么远的距离`
	}
}

class Pig extends Animal{
	constructor(name:string) {
		super(name)
	}
	//实例方法，重写父类中的实例方法
	run(distance:number=10){
		console.log(`跑了${distance}米这么远的距离`
	}
}

const ani:Animal =new Animal('动物')


//父子类型创建字类的对象
const dog1:Anmial = new Dog('雪雪')

4.函数

js中

// 命名函数
function add(x, y) {
  return x + y
}

// 匿名函数
let myAdd = function(x, y) { 
  return x + y;
}

ts

function add(x: number, y: number): number {//参数都是Number类型，返回值也是number
  return x + y
}

let myAdd = function(x: number, y: number): number { 
  return x + y
}

完整写法

///(x: number, y: number) => number当前函数的类型
let myAdd2: (x: number, y: number) => number = 
function(x: number, y: number): number {
  return x + y
}

默认参数：在函数申明的时候，内部的参数有自己的默认值
可选参数：函数在申明的时候，内部参数使用了？修饰，表示该参数可传可不传。

function(name:string,fullname ?:string)

剩余参数（rest参数）：放在函数申明的时候的最后一个参数。

//...args:string[]：剩余参数放在了一个字符串数组中
function showMsag(name:string,...args:string[]){}
  • 函数重载
    函数名字相同，函数的参数及个数不同。
    在JS中, 由于弱类型的特点和形参与实参可以不匹配, 是没有函数重载这一说的 但在TS中, 与其它面向对象的语言(如Java)就存在此语法。
function add (x: string, y: string): string
function add (x: number, y: number): number

// 定义函数实现
function add(x: string | number, y: string | number): string | number {
  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 x + y
  if (typeof x === 'string' && typeof y === 'string') {
    return x + y
  } else if (typeof x === 'number' && typeof y === 'number') {
    return x + y
  }
}

console.log(add(1, 2))
console.log(add('a', 'b'))

5.泛型

在定义接口、函数、类的时候不能预先确定数据的类型，而是使用函数、接口、类的时候才能确定数据的类型。

//定义：
function getArr<T>(num:T,count:number):number[]{
	const arr :Array<T>=[]
	for((let i=0;i<count,i++){
		arr.push(value)
	}
	return arr
}
//使用：
const arr=getArr<number>(100.23,3)
  • 多个泛型参数的函数
function swap <K, V> (a: K, b: V): [K, V] {
  return [a, b]
}
const result = swap<string, number>('abc', 123)
console.log(result[0].length, result[1].toFixed())
  • 泛型接口
    在定义类时, 为类中的属性或方法定义泛型类型 在创建类的实例时, 再指定特定的泛型类型
interface IBaseCRUD<T>{
	data:Array<T>
	add:(t:T)=>T
	getUserId:(id:number)=>	T
	constructor(name:string,age:number){
		this.name=name
		this.age=age
	}
}

class userCRUD implements IBaseCRUD<user>{
	data:Array<user> =[]
	add:(t:user):user{
		user.id=Date.now()+Math.random()
		this.data.push(user)
		return user
	}
	getUserId:(id:number):	user{
		return this.data.find(user=>user.id===id)
	}
}

//实例化添加用户信息对象的类
class User{
	id?：number
	name:string
	age:number
}
const userCrud:userCRUD =new userCRUD()
userCRUD.add(new userCRUD('jack',20))
  • 泛型类
class GenericNumber<T> {
  zeroValue: T
  add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function(x, y) {
  return x + y 
}

let myGenericString = new GenericNumber<string>()
myGenericString.zeroValue = 'abc'
myGenericString.add = function(x, y) { 
  return x + y
}

console.log(myGenericString.add(myGenericString.zeroValue, 'test'))
console.log(myGenericNumber.add(myGenericNumber.zeroValue, 12))
  • 泛型约束
interface Lengthwise {
  length: number;
}

// 指定泛型约束
function fn2 <T extends Lengthwise>(x: T): void {
  console.log(x.length)
}

console.log(fn2<string>('what' ))
console.log(fn2<number>(2 ))//必须有length属性

6. 其他

  • 申明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能
需要定义
一般声明文件都会单独写成一个 xxx.d.ts 文件

declare var jQuery: (selector: string) => any;

jQuery('#foo');

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
声明语句: 如果需要ts对新的语法进行检查, 需要要加载了对应的类型说明代码

  declare var jQuery: (selector: string) => any;

声明文件: 把声明语句放到一个单独的文件（jQuery.d.ts）中, ts会自动解析到项目中所有声明文件
下载声明文件:

 npm install @types/jquery --save-dev
  • 内置对象
    ECMAScript 的内置对象：
    Boolean
    Number
    String
    Date
    RegExp
    Error
/* 1. ECMAScript 的内置对象 */
let b: Boolean = new Boolean(1)
let n: Number = new Number(true)
let s: String = new String('abc')
let d: Date = new Date()
let r: RegExp = /^1/
let e: Error = new Error('error message')
b = true

BOM 和 DOM 的内置对象：
Window
Document
HTMLElement
DocumentFragment
Event
NodeList

const div: HTMLElement = document.getElementById('test')
const divs: NodeList = document.querySelectorAll('div')
document.addEventListener('click', (event: MouseEvent) => {
  console.dir(event.target)
})
const fragment: DocumentFragment = document.createDocumentFragment()
二狗子的翠花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript
03-12
适用于简单Typescript任务的样板启动器（由jest测试），由Localhost Academy提供由样板包括： 打字稿以获得更好的代码编写带有打字稿的笑话，可进行舒适的测试用于实时脚本重新加载的nodemon如何安装全局dep（如果...
01 邂逅typescript,环境搭建
yunbabac的博客
07-28 299
这是我的初始目录,创建main.tsutil.ts后npminit之后一直回车创建package.json文件。我们编写的typescript代码最后都会编译成javascript代码来运行,所以需要搭建对应的环境。方案二安装ts-node,ts-node帮我们做两件事,编译,运行在node环境。此时直接运行这个ts文件是报错的,我们需要转为js文件,通过我们刚才安装的tsc。此时你会发现你的目录下多了一个文件,这个js文件就是转化后的。通过ts-node运行ts文件,...
TypeScript --- 快速学习
weixin_34319111的博客
06-10 5790
1. typescript是什么Typescript是由微软开发的一款开源的编程语言Typescript是Javascript的超集，遵循最新的ES5/ES6规范。TypeScript扩展了Javascript语法TypeScript更像后端Java、C#这样的面向对象语言可以让JS开发大型企业应用越来越多的项目是基于TS的，比如VSCode、Angular6、Vue3、React16TS提供的类...
初识TypeScript
个人博客 https://pnkx.top
07-02 2752
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准(ES6 教程)。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。 首先总结一句话ts是js的超集，这说明ts可以兼容js的语法，大大降低了门槛(...
TypeScript -- 初始TS
wust_cyl的博客
08-04 716
因为最近的项目开始使用TS，感觉有必要来学习一波咯，撸起袖子学起来吧！ TS介绍 TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。 [2-5] TypeScript扩展了JavaScript的语法，所以任何现有的...
TypeScript入门
richest_qi的博客
07-02 616
新建项目 新建目录 mkdir test cd test npm init -y 安装下载typescript npm install --save typescript@next 安装了typescript@4.4.0-dev.20210627 创建main.ts interface Point2D{ x:number, y:number } interface Point3D{ x:number, y:number, z:number } var
初识typescript
qq_45365498的博客
03-11 51
let ass：（括号里面写类型值）比如number,string,boolen,null，undefined，和es6的一个新值。安装自动编译包 npm i -g ts-node运行的话 ts-node xxx.ts。type 类型别名可以命名一个函数有几个类型写法如下。这就是一个类型别名 | 这个和与或非的非不一样。这是数值类型前面加了类型注解必须是数值。typescript增加了类型注解。这样写就是可以的这是新家的类型约束。随机填写一个类型等于值里面的类型。如果改成字符串会报错。
初识 TypeScript
老顽固也可爱
02-18 84
TypeScript 的介绍 TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平...
TypeScript手册
12-14
内容概要：本书全面介绍了TypeScript的要点信息，是作为知识温习和搜索的首选。 适合人群：具备一定编程基础，想学习TypeScript或者需要经常查询TypeScript知识的开发者。 能学到什么：1️⃣了解TypeScript的来源及...
Effective TypeScript
05-12
Effective TypeScript: Writing Typed JavaScript that Scales 预发布版 Author: Dan Vanderkam Publisher: by O’Reilly Media Edition： January 2020 Type: epub, azw3, pdf
typescript
03-31
打字稿 安装TypeScript编译器 npm install -g typescript 查看当前版本 tsc --v 全局安装Typescript npm install -g ts-node
《前端面试题》- TypeScript - TypeScript的优/缺点
小张微说的博客
04-22 6116
问题 简述TypeScript的优/缺点 答案 优点 增强了代码的可读性和可维护性 包容性，js可以直接改成ts，ts编译报错也可以生成js文件，兼容第三方库，即使不是ts编写的 社区活跃，完全支持es6 缺点 增加学习成本 增加开发成本，因为增加了类型定义 需要编译，类型检查会增加编译时长，语法和类型系统复杂的话时间特别特别长 eval和new Function()这种操作类型系统管不到 ...
vue3+arco design通过动态表单方式实现自定义筛选
最新发布
m0_72167535的博客
05-07 387
vue3+arco design通过动态表单方式实现自定义筛选
基于Springboot的家具网站
趙兴晨的博客
05-03 545
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1203
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 433
注释很详细，直接上代码……
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1098
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值