函数的基本使用
函数是JS应用程序的基础。它帮助你实现抽象层,模拟类,信息隐藏和模块。在TS里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。TS为JS函数添加了额外的功能,让我们可以更容易地使用
函数定义的方式
export default {}
// 匿名函数
const num=function(a:number,b:number):number{
return a+b
}
let res = num(10,20)
console.log(res)
// 又名函数 | 命名函数 | 普通函数
function num2(a2:number,b2:number){
return a2
}
let res2 = num2(10,5)
console.log(res2)
// 箭头函数
const num3 = (a3:number):void =>{
console.log(`你好${a3}`)
}
num3(5)
// 接口函数
type num4 = (x:number,y:number)=>number
const num5:num4 = (a4:number,b4:number)=>a4+b4
console.log(num5(10,20))
函数参数的处理
·可选参数:
在TypeScript函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识?
·默认参数:
我们也可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数,语法格式为
function function_name(param1[:type] ,param2[:type] = default_value){
}
·剩余参数:
有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。
剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。...args :any[]
export default {}
// 可选参数
// const fun=function(a:number,b?:number):number{
// return a
// }
// fun(10)
// fun(10,20)
// 函数的默认值
// const fun2=function(a:number,b:number,c:number=30){
// return a+b+c
// }
// let res = fun2(10,20)
// console.log(res)
// 函数的剩余参数
const fun3 = function(a:number,...args:any[]){
console.log(a)
console.log(args)
}
fun3(1,2,3,"自行车")
构造函数
TypeScript 也支持使用JavaScript 内置的构造函数Function()来定义函数:
语法格式如下:
var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)
参数说明:
arg1, arg2, ... argN:参数列表
functionBody:一个含有包括函数定义的JavaScript 语句的字符串。
export default {}
// 构造函数
var myfun = new Function("a","b","return a*b")
var res = myfun(10,20)
console.log(res)
函数重载
重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。
每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。
参数类型不同:
function disp(string) : void;
function disp(number) : void;
参数数量不同:
function disp(n1:number):void;
function disp(x:number , y:number):void;
参数类型顺序不同:
function disp(n1: number,s1:string):void;
function disp(s :string,n : number):void;
如果参数类型不同,则参数类型应设置为any。
参数数量不同你可以将不同的参数设置为可选。
export default {}
// 定义函数重载
function addFun(a:number,b:number):number
function addFun(a:string,b:string):string
function addFun(a:number,b:string):string
function addFun(a:string,b:number):string
// 使用函数重载
function addFun(a:any,b:any):any{
return a+b
}
console.log(addFun(10,20))
console.log(addFun("刘亦菲","杨幂"))
console.log(addFun("刘亦菲",18))
console.log(addFun(18,"杨幂"))
// 定义参数类型与参数数量不同
function star(a:string):void
function star(a:string,b:number):void
function star(a:any,b?:any):void{
return a
return b
}
console.log(star("自行车"))
console.log(star("自行车",12))
类的使用
类的基本使用
定义
TypeScript是面向对象的javaScript.
类描述了所创建的对象共同的属性和方法。
TypeScript支持面向对象的所有特性,比如类、接口等。
TypeScript类定义方式如下:
class class_name{
// 类作用域
}
定义类的关键字为class,后面紧跟类名,类可以包含以下几个模块(类的数据成员)∶
字段–字段是类里面声明的变量。字段表示对象的有关数据。
构造函数–类实例化时调用,可以为类的对象分配内存。
方法–方法为对象要执行的操作。
this当前类
export default {}
// 创建一个类
class Person {
name:string
age:number
// 构造函数
constructor(name:string,age:number){
this.name=name
this.age=age
}
// 函数(方法)
nh():void{
console.log(`我叫${this.name},今年${this.age}岁`)
}
}
// 实例化类
let p = new Person("张三",20)
p.nh()
类的继承
TypeScript支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。
类继承使用关键字extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。
TypeScript一次只能继承一个类,不支持继承多个类,但TypeScript支持多重继承(A继承B,B继承C)。
语法格式如下:
class child_class_name extends parent_class_name
static与instanceof
static关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。
instanceof运算符用于判断对象是否是指定的类型,如果是返回true,否则返回false。
export default {}
// static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用
class Person1{
static uname:string
static hello():void{
console.log(`你好,我叫${Person1.uname}`)
}
}
Person1.uname="张三"
Person1.hello()
// instanceof运算符
// instanceof运算符用于判断对象是否是指定的类型,如果是返回true,否则返回false
class Person{}
let p = new Person()
let isPerson = p instanceof Person
console.log("t是Person实例化出来的吗?",isPerson)
class Student extends Person{}
let s = new Student()
let isStudent = p instanceof Person
console.log("t是Student实例化出来的吗?",isStudent)
类中的修饰符
public(默认):公有,可以在任何地方被访问
protected:受保护,可以被其自身以及其子类访问
private:私有,只能被其定义所在的类访问。
readonly:可以使用readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。
readonly:字段的前缀可以是readonly 修饰符。这可以防止在构造函数之外对该字段进行赋值
getter与setter
官方的另外一个名字:存取器
通过getters/setters来截取对对象成员的访问
注意点:
如果存在get,但没有set ,则该属性自动是只读的
如果没有指定setter 参数的类型,它将从getter的返回类型中推断出来
访问器和设置器必须有相同的成员可见性
export default {}
class MyName{
private _fullName:string="张三"
// 取值
get fullName():string{
console.log("get被调用")
return this._fullName
}
// 赋值
set fullName(newName:string){
console.log("set被调用")
this._fullName=newName
}
}
let n = new MyName
n.fullName="李四"
console.log(n)
console.log(n.fullName)
抽象类
定义
抽象类做为其它派生类的基类使用。它们一般不会直接被实例化
抽象类是专门用于定义哪些不希望被外界直接创建的类的
抽象类和接口一样用于约束子类
抽象类和接口区别
抽象方法必须包含abstract关键字并且可以包含访问修饰符
接口中只能定义约束,不能定义具体实现。而抽象类中既可以定义约束,又可以定义具体实现
export default {}
abstract class Person{
abstract name:string
abstract age:number
abstract show():string
showName():void{
console.log("hello world")
}
}
class Student extends Person{
name:string="刘亦菲"
age:number=18
show(){
return "仙剑奇侠传"
}
}
let s = new Student()
console.log(s.show())
类的初始化顺序
基类的字段被初始化
基类构造函数运行
子类的字段被初始化
子类构造函数运行
export default {}
// 类的初始化顺序
// 基类的字段被初始化=>基类构造函数运行=>子类的字段被初始化=>子类构造函数运行
// 基类
class Person{
name:string="张三"
constructor(){
console.log("我的名字是"+this.name)
}
}
// 子类
class Student extends Person{
name:string="李四"
constructor(){
super()
console.log("我的名字是"+this.name)
}
}
let s = new Student()
s.name