上一篇随笔复习了一下es5中的类，这一篇随笔记录一下ts中的类
简单demo演示语法
class Animals { //1.class关键字写父级
name:string;
constructor(name:string){ //2.必备构造函数，也是实例化类的时候触发的方法,与react中的类语法写法相似
this.name = name
}
getName(): string {
return this.name
}
setName(name: string): void { //void用于无返回值的方法中
this.name = name
}
}
3.依旧需要实例化构造函数
var animal = new Animals('kitten')
console.log(animal.getName()) //输出 kitten
animal.setName('page')
console.log(animal.getName()) //输出 page
ts中实现继承 关键字extends super
简单demo帮助理解：
class Person{
name:string;
constructor(name:string){
this.name = name
}
run():string{
return ${this.name} is doing exercise
}
}
var p = new Person('王五')
console.log(p.run()) //王五 is doing exercise
子类继承父类
class Web extends Person{
constructor(name:string){
super(name) //初始化父类的构造函数
}
working(){
console.log(${this.name}在干嘛)
}
}
var w = new Web('Josie')
console.log(w.run()) //输出 Josie is doing exercise
w.working() //输出Josie在干嘛 //如果父类与子类都有一样的方法，会先在子类中优先找并使用
ts 中类属性的三种修饰符-----public protected private
// public ：公有，在类里面，子类，类外面都可以访问
// protected:保护类型，在类里面，子类里面可以访问，在类外面不能访问
// private：私有，在类里可以访问，其它都不能，子类也一样排除在外
class Person{
public name:string;
constructor(name:string){
this.name = name
}
run():string{
console.log(${this.name} is doing exercise)
}
}
var people= new Person('Josie')
console.log(people.name) ---输出Josie
class Someone extends Person{
constructor(name:string){
super(name)
}
}
var sb = new Someone('Jeff')
console.log(sb.run()) ---输出 Jeff is doing exercise.
--public 时公有都可以访问，protected时people.name 报错 sb.run()正常； private时均报错
ts中的静态方法
es5静态属性 静态方法：
function Person3(){
this.run1=function(){
//实例方法
}
}
Person3.run2=function(){
//静态方法
}
ts静态属性 静态方法：
class Person {
public name: string;
public age:number = 20;
static gender="男" --------关键字 static
constructor(name: string) {
this.name = name
}
run(): string { //实例方法
return ${this.name} is doing exercise
}
static print(){ //静态方法，里面不能直接调用类里面的数据，除非改成静态属性
console.log('print方法'+Person.gender) //输出男，静态属性正常显示
//console.log('print方法'+Person.age)//报错 非静态属性
}
}
var p2 = new Person('abc')
console.log(p2.run())
Person.print() //调用
多态：父类定义一个方法不去实现，让继承他的子类去实现，每一个子类有不同的表现；多态也属于继承
class Animal{
public name:string;
constructor(name:string){
this.name = name
};
eat(){
console.log('吃的方法')
}
}
// 子类
class Dog extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+'吃骨头'
}
}
var d = new Dog('狗狗')
console.log(d.eat()) //狗狗吃骨头
class Cat extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+'吃猫粮'
}
}
var c = new Cat('猫猫')
console.log(c.eat()) //猫猫吃猫粮
抽象方法 抽象类：提供其它类继承的基类不能直接被实例化，只能放在抽象类里面 abstract
// 抽象类和抽象方法用来定义标准
// 如：定义标准Animal1这个类要求他的子类都必须包含eat方法
abstract class Animal1 {
public name:string;
constructor(name:string){
this.name = name
}
abstract eat():any;
speak(){
console.log(${this.name}会说话)
}
}
//var a= new Animal1() //报错，不能直接被实例化
class Dog1 extends Animal1 {
constructor(name:any){
super(name)
}
eat(){ //必须写这个方法，否则报错
console.log(this.name+'吃猫咪')
}
}
var a1 = new Dog1('狗狗')
a1.eat() //输出 狗狗吃猫咪
a1.speak() //输出 狗狗会说话
ts中的接口
接口的作用：在面向对象的编程中，接口时一种规范的定义，定义了行为和动作的规范，在程序设计中，接口起到一种限制和规范的作用，接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这些类里必须提供某些方法，提供这些方法的类就可以满足实际需要。ts中的接口类似于Java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类等
6.1属性接口----对json的约束
function printlabel(label:string):void {
console.log('printlabel')
}
printlabel('123'); //约束参数
printlabel(122); //报错
function printlabel(labelInfo:{label:string}):void {
console.log('printlabel')
}
var labelJson={label:'33311'} //约束参数为对象
printlabel(labelJson) //正常打印 printlabel
// 对批量方法传入参数的约束-----关键字 interface 接口：对行为和动作的规范，对批量方法进行约束
interface FullName{
firstName:string;
secondName:string;
}
function printName(name:FullName) {
console.log(name.firstName+'---'+name.secondName)
}
printName({firstName:'李',secondName:'白'}) //李---白
let obj={
age:20, //包含之外可以有自己的东西，但interface中并没有，所以printName中写了name.age会报错
firstName:'李',
secondName:'白'
}
printName(obj)
// 接口：可选属性
interface FullName2{
firstName:string,
secondName?:string //可选可不选
}
------------------------------------demo------------------------------------------------------------------------------
// ajax请求原理---原生js封装请求
// 1.设置接口规范
interface Config{
type:string,
url:string,
data?:string,
dataType:string
}
// 2.封装
function ajax(config:Config) {
var xhr = new XMLHttpRequest();
xhr.open(config.type,config.url,true)
xhr.send(config.data)
xhr.onreadystatechange= function () {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log('成功')
if(config.dataType=='json'){
JSON.parse(xhr.responseText)
}else{
console.log(xhr.responseText)
}
}
}
}
// 3.调用
ajax({
type:'get',
url:'http://www.baidu.com',
data:'name=zhangsan',
dataType:'json'
})
加密的函数类型接口：对方法传入的参数以及返回值进行约束
interface fun1{
(key:string,value:string):string;
}
var md:fun1=function(key:string,value:string):string{
return key+'--'+value
}
console.log(md('name','窝窝头')) //name----窝窝头，控制参数，也控制返回值
对数组的约束，可索引接口
interface userArr{
[index:number]:string
}
var arr:userArr=['123','34']
console.log(arr[0]) //123
6.4 对对象的约，可索引接口
interface userObj{
[index:string]:string
}
var obj:userObj={name:'zhangsan'};
console.log(obj.name) //zhangsan
类类型接口：对类的约束和抽象有点相似 关键字 implements
interface Animals{
name:string;
eat(str:string):void;
}
class dog implements Animals{
name:string;
constructor(name:string) {
this.name=name;
}
eat(){
console.log(this.name+'吃粮食')
}
}
var dd = new dog('大黑')
dd.eat()
class cat implements Animals{
name:string;
constructor(name:string) {
this.name=name;
}
eat(food:string){
console.log(this.name+'吃'+food)
}
}
var cc = new cat('大黑')
cc.eat('老鼠') //大黑吃老鼠
接口的扩展：接口可以继承接口
interface Animal2{
eat():void;
}
interface Personn extends Animal2{
work():void; //此处继承了Animal2
}
class Web3 implements Personn{ //约束类
public name:string;
constructor(name:string) {
this.name=name
}
eat(){ //必须包含Animal2中的继承方法
}
work(){ //以及必须包含Personn中的约束方法
}
}