TS属性、方法、类、接口声明大杂烩

目录

• 基础类型
  • 基础类型变量声明
• 其他类型
  • 普通方法的声明
  • TS 中的类
    • 普通类的声明
    • 普通类的继承
    • 抽象类和抽象方法
  • TS中的接口
    • 属性接口
    • 函数类型接口
    • 索引接口
    • 类型接口

基础类型

• boolean
• number
• string
• array
• null 和 undefined
• tuple（元组）
• $enum（枚举）$
• $any（任意）$
• $void$
• $never$

对比 es5 的基本类型 enum、any、void、never都是新增的。ts为了使我们的编码更规范增加了类型校验。

基础类型变量声明

• 在 JS 里可以赋值不同类型的值

let types = 1;
types = 'string';
types = false;
types = [1, 2, 3];
...

• 在 TS 里只能同类型赋值

/** 在 ts 的写法，变量:变量类型 */
let numType:number = 1; // number 
let strType:string = 'string'; // string
let boolType:boolean = false; // boolean

/** 单一类型的array(数组) */
let arrType1: number[]= [1, 2, 3]; 
let arrType2: Array<number>= [1, 2, 3];
/** 复合类型的array(数组) */
let mixArr:Array<number|string> = [1, 2, '3'];

 /** 
  * tuple（元组）型赋值，是数组的一种，‘特别’的数组
  * 可以定义数组中每个位置的类型
  */
let tupleType:[number, string] = [1, '2'];

 /** 
  * enum（枚举）类型
  * 这是个令人头秃的类型
  * 可以根据数据要求自定义枚举类型与之匹配，也可以用作语义化常量
  * 下面举一个简单的例子
  */
enum Fruits {
  orange = '橙子',
  apple = '苹果',
  banana = '香蕉'
};
let enumType:fruits = Fruits.orange;
console.log(enumType); // '橙子'

// 当定义的标识符没有赋值，就会取它的下标。
enum Numbers {
  one,
  two,
  three
};
let enumType2:Numbers = Numbers.two;
console.log(enumType2); // 1

 /** 
  * any 型，任意类型
  * 跟 es5 赋值有点像
  */
let anyType:any = 1;
anyType = 'string';
anyType = false;

/**
 * undefined 跟 null 类型
 * 当我们初始化变量不想赋值或者为空的时候可以使用
 */
let undefinedType:number | undefined;
let nullType:number | null = null;

/**
 * void 类型
 * 一般用在没有返回值的方法里
 */
function emptyFun():void { };

/**
 * never类型
 * 它包括 null 和 undefined
 * 从字面理解是从来不会出现的值
 * 一般用作会抛出异常的函数表达式或箭头函数表达式(自执行函数)
 */
let neverType1:never = (function() {
  throw new Error('never type');
})();
let neverType2:never = (() => {
  throw new Error('never type');
})();
// 可以用 any 或者 其他类型替代，上面也可以用 string 替代。

其他类型

• function（方法）：普通的方法、抽象的方法
• class（类）：普通类、抽象类

其他类型变量声明

认识完基础类型的声明再看看其他类型的声明

普通方法的声明

跟 js 的声明差别不大，增加了参数和返回值类型的校验。

// js定义函数的方式
function es5Fun1() {}
let es5Fun2 = function() {}
let es6Fun = () => {}

/** 在 ts 的写法 */

/** 函数声明 */
function es5Fun1():void {} // funciton 方法名():返回值类型 {}
let es5Fun2 = function():void {} // funciton():返回值类型 {}
let es6Fun = ():void => {} // ():返回值类型 => {}
 /** 带参数函数的声明也是一样的，参数带上参数类型进行参数类型的校验 */
let getFullName = (firstName:string, lastName:string):string => `${firstName}${lastName}`; 
console.log(getFullName('lee', '弟弟')); // lee弟弟
 /** 
   * 可选参数和带默认值参数
   * 参数后面加? 表示该参数可选 
   * 参数名:参数类型=默认值，给参数设置默认值
   * 可选参数得放在正常参数的后面，否则传参的时候就会将参数传给可选参数，可选就失去了可选的意义。
   */
let getFullName = (firstName:string = 'lee', lastName?:string):string => `${firstName}${lastName || ''}`;
 console.log(getFullName()); // lee

TS 中的类

在 TS 中，类不仅继承了 es6 中类的特性还多了public、protect、private三个修饰符：

• public：公有的(属性/方法)，在它定义的类及其子类和外部都能被调用，$默认值$。
• protect：保护的(属性/方法)，在它定义的类及其子类能访问，在外部不能被调用。
• private：私有(属性/方法)，只能在定义的类里访问，子类和外部都不能被调用。

普通类的声明

class Name {
  firstName: string;
  lastName: string;
  // constructor：构造函数，在实例化对象的时候执行
  constructor(firstName:string, lastName:string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName():string {
    return `${this.firstName}${this.lastName}`;
  }
}
let myName = new Name('lee', '弟弟');
console.log(myName.getFullNa  me()); // lee弟弟

普通类的继承

/**
 * 类的继承：class 子类 extends 父类、
 * super：执行父类构造函数
 * 如果子类有跟父类同样的方法会覆盖父类的方法
 */
class MyInfo extends Name {
  phoneNum:string;

  constructor(firstName:string, lastName:string, phoneNum:string) {
    super(firstName, lastName);
    this.phoneNum = phoneNum;
  }
  getPhoneNum():string {
    return this.phoneNum;
  }
}
let leeInfo = new MyInfo('lee', '弟弟', '111');
console.log(leeInfo.getPhoneNum()); // 111

抽象类和抽象方法

• ts 中的抽象类，是作为规范基类给它的子类继承，它不能被直接实例化。
• 用 abstract 关键字定义抽象类和抽象方法。
• 抽象类里抽象方法只给出定义，不可以实现，只能在继承它的派生类中实现。
• 继承抽象类的子类必须将抽象类里的抽象方法全部实现。
• 抽象方法只能写在抽象类里。

abstract class Name {
  firstName: string;
  lastName: string;

  constructor(firstName:string, lastName:string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  abstract getName():string;
}

class MyName extends Name{
  constructor(firstName:string, lastName:string) {
    super(firstName, lastName);
  }
  getName():string { // 实现抽象方法
    return `${this.firstName}${this.lastName}`;
  }
}

let myName = new MyName('lee', '弟弟');
console.log(myName.getName()); // lee弟弟

ts 中的接口

接口是一种规范的定义，它定义了行为和动作的规范，是某一批类所需要遵守的规范，接口不关心这些类的内部状态，也不关心这些类方法的实现细节，比抽象类更规范。

接口类型

• 属性接口（规范数据类型）
• 函数类型接口（对方法传参和返回值进行约束）
• 索引接口（数组、对象的约束）
• 类型接口（对类的约束）

属性接口（规范数据类型）

可以用来规范数据变量的结构和函数参数的数据结构。

interface IFullName {
  firstName:string;
  lastName?:string; // 带 '?' 表示可选属性
}
let myName: IFullName = {
  firstName: 'lee',
  lastName: '弟弟' 
};
let getFullName = (params:IFullName) => `${params.firstName}${params.lastName}`;
console.log(getFullName({
  firstName: 'lee',
  lastName: '弟弟'
})); // lee弟弟

函数类型接口（对方法传参和返回值进行约束）

/**
 * 函数类型接口
 * 格式：(参数:参数类型,...):返回值类型
 */

interface IFullName {
  (firstName:string,lastName:string):string;
}

var fullName:IFullName = (firstName:string, lastName:string):string => {
  return `${firstName}${lastName}`;
}
console.log(fullName('lee','弟弟')); // lee弟弟

索引接口（数组、对象的约束）

/**
* 索引接口、数组、对象的约束
* 格式：[index:下标类型]:值的类型
*/

interface INumberKeyStringValue { 
 [index:number]:string  // 限制key为number、值为string
}
// 对数组的约束
var arr:INumberKeyStringValue = ['1','2'];
// 对 对象的约束
var obj:INumberKeyStringValue = {
 1: '1',
 2: '2',
}

类型接口（对类的约束）

/**
 * 类型接口
 * 跟抽象类抽象方法有点像，对派生类的约束
 * 实现接口的派生类需要继承接口所有属性并继承或重写接口定义的方法
 */

interface IFullName{
  firstName:string;
  lastName:string;
  fullName():string
}
class MyName implements IFullName {
  firstName:string;
  lastName:string;
  constructor(firstName:string, lastName:string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  fullName() {
    return `${this.firstName}${this.lastName}`;
  }
}

END…我是个有底线的家伙…END