typescript(02)

TypeScript 中数组类型的定义

1.一般数组类型的定义

TypeScript 通过类型推断自己推断出来的。

const numberArr = [1, 2, 3];

const numberArr: number[] = [1, 2, 3];

同样道理，如果你的数组各项是字符串，你就可以写成这样。

const stringArr: string[] = ["a", "b", "c"];

也就是说你可以定义任意类型的数组，比如是undefined。

const undefinedArr: undefined[] = [undefined, undefined];

如果数组中有多种类型，比如既有数字类型，又有字符串的时候。

很简单，只要加个()，然后在里边加上|就可以了，具体看代码。

const arr: (number | string)[] = [1, "string", 2];

2.数组中对象类型的定义

const xiaoJieJies: { name: string, age: Number }[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

就可以定义一个类型别名，定义别名的时候要以type关键字开始。现在定义一个Lady的别名。

type Lady = { name: string, age: Number };
type Lady = { name: string, age: Number };
const xiaoJieJies: Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

类进行定义：

class Madam {
  name: string;
  age: number;
}

const xiaoJieJies: Madam[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

TypeScript 中元组的使用和类型约束

TypeScript 中提供了元组的概念，这个概念是JavaScript中没有的。其实你可以把元组看成数组的一个加强，它可以更好的控制或者说规范里边的类型。约束更强了，每一个数组元素必须一一对应。

const xiaojiejie: [string, string, number] = ["dajiao", "teacher", 28];

这时候我们就把数组中的每个元素类型的位置给固定住了，这就叫做元组。

元组的使用

一般可以用来二维数组。

const xiaojiejies: [string, string, number][] = [
  ["dajiao", "teacher", 28],
  ["liuying", "teacher", 18],
  ["cuihua", "teacher", 25],
];

TypeScript 中的 interface 接口

上节课我们学了一个类型别名的知识可以解决代码重复的问题，这节课我们就学习一个更常用的语法接口（Interface）。

interface Girl {
  name: string;
  age: number;
  bust: number;
}

const screenResume = (girl: Girl) => {
  girl.age < 24 && girl.bust >= 90 && console.log(girl.name + "进入面试");
  girl.age > 24 || (girl.bust < 90 && console.log(girl.name + "你被淘汰"));
};

const getResume = (girl: Girl) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "胸围是：" + girl.bust);
};
const girl = {
  name: "大脚",
  age: 18,
  bust: 94,
};

screenResume(girl);
getResume(girl);

接口和类型别名的区别

其实这两种方法很相似，但是我们可以这样理解。类型别名只是在有一个类型之后，把这个类型赋给了一个变量，以后这个变量来代替这个类型就可以了，别名其实与自定义类型的声明并没有直接的联系。

而接口就是我们声明自定义类型的一种方式而已。

类型别名可以直接给类型，比如string，而接口必须代表对象。

接口非必选值得定义

有时候我们在定义完接口之后，所创建的对象必须对应这接口，但是这不是绝对的，我们可以来定义可选择的属性来进行，对象生成。其实typeScript已经为我们准备好了相应的办法，就是在:号前加一个?，这个时候属性就可传可不传了。

interface Girl {
  name: string;
  age: number;
  bust: number;
  waistline?: number;
}

允许加入任意值

简历一般是有自由发挥的空间的，所以这时候需要一些任意值，就是自己愿意写什么就写什么。这时候interface接口也是支持的。

interface Girl {
  name: string;
  age: number;
  bust: number;
  waistline?: number;
  [propname: string]: any;
}

接口里的方法

interface Girl {
  name: string;
  age: number;
  bust: number;
  waistline?: number;
  [propname: string]: any;
  say(): string;
}

关于接口的知识就讲到这里吧，这基本包含了接口60%的知识。

TypeScript 中类的概念和使用

类的基本使用

class Lady {
  content = "Hi，帅哥";
  sayHello() {
    return this.content;
  }
}

const goddess = new Lady();
console.log(goddess.sayHello());

类的继承

这里提前说一下 TypeScrip 的继承和ES6中的继承是一样的。关键字也是extends

class Lady {
  content = "Hi，帅哥";
  sayHello() {
    return this.content;
  }
}
class XiaoJieJie extends Lady {
  sayLove() {
    return "I love you";
  }
}

const goddess = new XiaoJieJie();
console.log(goddess.sayHello());
console.log(goddess.sayLove());

类的重写

讲了继承，那就必须继续讲讲重写，重写就是子类可以重新编写父类里边的代码。现在我们在XiaoJieJie这个类里重写父类的sayHello()方法

class XiaoJieJie extends Lady {
  sayLove() {
    return "I love you!";
  }
  sayHello() {
    return "Hi , honey!";
  }
}

super 关键字的使用

我们再多讲一点，就是super关键字的使用，比如我们还是想使用Lady类中说的话，但是在后面，加上你好两个字就可以了。这时候就可以使用super关键字，它代表父类中的方法。那我们的代码就可以写成这个样子了。

class XiaoJieJie extends Lady {
  sayLove() {
    return "I love you!";
  }
  sayHello() {
    return super.sayHello() + "。你好！";
  }
}

TypeScript 中类的访问类型

其实类的访问类型就是基于三个关键词private、protected，public。

public 访问属性讲解

这是一种默认关键字，就是我们正常定义属性或者方法的时候前面什么都不加的时候就会默认是public

class Person {
    public name:string;
}

public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用.

class Person {
    public name:string;
    public sayHello(){
        console.log(this.name + ' say Hello')
    }
}

class Person {
    public name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')
    }
}
//-------以下属于类的外部--------
const person = new Person()
person.name = 'jspang.com'
person.sayHello()
console.log(person.name)

private 访问属性讲解

private 访问属性的意思是，只允许再类的内部被调用，外部不允许调用，继承自他的子类也不允许进行调用

class Person {
    private name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此处不报错
    }
}
//-------以下属于类的外部--------
const person = new Person()
person.name = 'jspang.com'    //此处报错
person.sayHello()
console.log(person.name)  //此处报错

protected 访问属性讲解

protected 允许在类内及继承的子类中使用

class Person {
    protected name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此处不报错
    }
}

class Teacher extends Person{
    public sayBye(){
        this.name;
    }
}

TypeScript 类的构造函数

class Person{
    public name :string ;
    constructor(name:string){
        this.name=name
    }

}

const person= new Person('jspang')
console.log(person.name)

类继承中的构造器写法

普通类的构造器我们已经会了，在子类中使用构造函数需要用super()调用父类的构造函数。

class Person{
    constructor(public name:string){}
}

class Teacher extends Person{
    constructor(public age:number){
        super('jspang')
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)
console.log(teacher.name)

这就是子类继承父类并有构造函数的原则，就是在子类里写构造函数时，必须用super()调用父类的构造函数，如果需要传值，也必须进行传值操作。就是是父类没有构造函数，子类也要使用super()进行调用，否则就会报错。

class Person{}

class Teacher extends Person{
    constructor(public age:number){
        super()
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)