Typescript中的类
1.es5中的类：
function Person(){
this.name = '张三';
this.age = 20;
this.info=function(){
console.log( `我叫${this.name}，今年${this.name}`);
}
}
var p = new Person();
p.name //张三
p.info()
2.ts中的类:
class Person {
name: string='李四';
age: number = 20;
constructor(message: string) {
this.name = message;
}
info():void {
console.log( `我叫${this.name}，今年${this.name}`);
}
}
let g2 = new Person('张三');
console.log(g2.name);
console.log(g2.info());
3.ts中类的继承
//(3) ts类的继承，
class Shape {
Area:number
constructor(a:number) {
this.Area = a
}
}
class Circle extends Shape {
disp():void {
console.log("圆的面积: "+this.Area)
}
}
//实例中创建了 Shape 类，Circle 类继承了 Shape 类，Circle 类可以直接使用 Area 属性
var obj = new Circle(223);
obj.disp()
4.ts中类的重载
//(4) ts类的重载
class PrinterClass {
doPrint():void {
console.log("父类的 doPrint() 方法。")
}
}
class StringPrinter extends PrinterClass {
doPrint():void {
super.doPrint() // 调用父类的函数
console.log("子类的 doPrint()方法。")
}
}
//类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。
// 其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。
5.ts中类的多态
//(5) ts中的多态
// 父类定义一个方法不去实现，让继承他的派生类去实现，每一个派生类有不同的表现
class Father {
public age: number;
constructor(age: number) {
this.age = age
}
counts(): void {
console.log(this.age)
}
}
class children1 extends Father {
constructor(age: number) {
super(age)
}
counts(): void { /* 多态，重写方法不执行父类方法 */
console.log(this.age - 1)
}
}
class children2 extends Father {
constructor(age: number) {
super(age)
}
counts(): void {
console.log(this.age + 1)
}
}
6.static 关键字
//static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。
class StaticMem {
static num:number;
static disp():void {
console.log("num 值为 "+ StaticMem.num)
}
}
StaticMem.num = 12 // 初始化静态变量
StaticMem.disp() // 调用静态方法
7.访问控制修饰符
//(7) 访问控制修饰符
// public（默认） : 公有，可以在任何地方被访问。
// protected : 受保护，可以被其自身以及其子类和父类访问。
// private : 私有，只能被其定义所在的类访问。
// readonly ：只读属性
class Person {
public name: string;
// private name: string;
// protected name: string;
// readonly name: string;
constructor(name: string) {
this.name = name;
}
}
class Man extends Person {
private love: string;
constructor(name: string, love: string) {
super(name);
this.love = love;
}
public say():void {
// 如果Person 中用 private 修饰 name 则不能访问到 name 属性
console.log(`my name is ${this.name}, and my love is ${this.love}`);
}
}
let me = new Man('funlee', 'TS');
me.name = 'new name'; // error
8.ts 中的抽象类
// (8) ts中的抽象类
// 抽象类只能作为其他派生类的基类使用，抽象类不能被实例化
// 抽象类可以包含成员的实现细节，且抽象类必须用 abstract 声明
// 抽象类里不含方法体的方法称为抽象方法，使用 abstract 声明，抽象方法必须被派生类实现（抽象方法必须使用 abstract 关键字声明，且可以包含访问修饰符）
abstract class Person { //抽象类
public love: string;
constructor(love: string) {
this.love = love;
}
abstract sayLove(): string; // 必须在派生类中实现
}
class Woman extends Person{
constructor(love: string){
super(love)
}
sayLove():string {
return `my love is ${this.love}`;
}
}
let you = new Woman('TS');
console.log(you.sayLove()); // my love is TS
9.类作为接口使用
//(9) 把类当做接口使用
//类定义会创建两个东西：类的实例类型和一个构造函数，因为类可以创建出类型，所以能够在允许使用接口的地方使用类。
class Person {
name: string;
age: number;
constructor(name: string, age:number) {
this.name = name;
this.age = age;
}
}
interface Jerry extends Person {
love: string;
}
let he: Jerry = {
name: 'jerry',
age: 18,
love: 'TS'
}
Typescript中的接口
问题：什么是接口？
我觉得接口就是在面向对象编程中的一种规范的定义，定义行为和动作，起到一种限制和规范代码的作用
1.属性接口
//对json的约束
interface Person{
name:string;
age?:number
}
2.对函数的约束
interface Memo{ //对函数的约束
(value:number,name:string):void
}
3.对数组的约束
interface Arr{ //定义数组
[index:number]:string //index:索引值，
}
let arr:Arr=['ddd'] //value为string
4.对象的约束
interface Obj{ //定义对象
[index:string]:string //index:索引值，
}
let ob:Obj={name:'123'} //value为string
5.接口的实现
interface Anmails{
name:string;
eat(name:string):void
}
class Dog implements Anmails{ //implements关键字 为‘实现’ 相当于class Dog 实现Anmails 接口
name:string;
constructor(name:string){
this.name=name
}
eat(name:string){
console.log(this.name)
}
}
6.接口的继承
//接口的继承
interface Anmails{
eat(food:string):string
}
interface Cat extends Anmails{
runing():void
}
class buleCat implements Cat{
name:string
constructor(name:string){
this.name=name
}
eat(food:string){
return this.name+'吃'+food
}
runing(){
console.log( this.name+'在跑');
}
}
var xiaoke = new buleCat('小可');
xiaoke.eat('猫粮')
xiaoke.runing()
Typescript中的泛型
\
泛型是什么呢?
泛型的可以理解 为一个类似于基类概念的类型检查，
举个例子
// T表示泛型
function getData(value: any): any {
return value;
}
getData(123)
//getData('123')
//getData(true)
/**********************************************************************************/
function getData<T>(value: T): T { // T表示泛型 可以保证函数的参数类型和返回值类型一致
return value;
}
getData<number>(123)
//getData<string>('123')
//getData<boolean>(123)
//这里的第一种写法和第二种写法是一样的效果 但是第一种写法使用any就等于放弃了类型检查
泛型类
class Demo {
getValue(val:number):number {
return val
}
}
let demo = new Demo();
console.log(demo.getValue(1)); //1
//这里的 Demo 只能传入number 类型的参数 不能传入string
//这种情况下 可以用泛型类
/**********************************************************************************/
class Demo<T> {
getValue(val:T):T {
return this.a+val
}
}
let demo = new Demo<number>();
console.log(demo.getValue(1)); //1
let demo2 = new Demo<string>();
console.log(demo.getValue('2')); //2
泛型接口
//第一种写法
interface Demo{
T(val?:T)T
}
let getData:Demo=function<T>(value:T):T{
return value
}
getData<string>('12356')
getData<number>(12356)
getData<number>('123456') //错误写法
/**********************************************************************************/
//第二种写法
interface Demo<T>{
(val?:T)T
}
function getData<T>(value:T):T{
return value
}
let myGetData:Demo<string>=getData;
myGetData('20')
myGetData(20) //错误写法
