typescript整理

联合类型——接口

1. 联合类型

let muchType: string | number = 'hello';
muchType = 10;
console.log(muchType.toString()); //这里需要使用定义类型共用的方法

2. 接口定义 强约束

一般首字母大写，有的编程语言建议加上 I 做开头

interface Istate {
  name: string;
  age: number;
}
let obj: Istate = { name: 'zhangsan', age: 20 };

3. 可选属性

interface Istate2 {
  name: string;
  age?: number; //存疑 可有可无
}
let obj2: Istate2;
obj2 = {
  name: '张三',
  age: 10,
};
obj2 = { name: '里斯' };

4. 属性个数不确定的时候 类型必须是any类型

interface Istate3 {
  name: string;
  age: number;
  [propName: string]: any; //propName为形参
}
let obj3: Istate3;
obj3 = { name: '张三', age: 20, sex: 'nan', isMarry: false };

5. 只读类型

interface Istate4 {
  name: string;
  readonly age: number;
}
let obj4: Istate4;
obj4 = { name: 'zhangsan', age: 20 };
obj4.name = 'lisi';
// obj4.age=10 //报错 只读

数组类型

1. 类型+方括号

let arr: number[] = [1, 2, 3];
let arr2: string[] = ['1', '2', '3'];
let arr3: any[] = [1, '2', true];

2. 采用数组泛型 array <elemType> 表示法

let arrType: Array<number> = [1, 2, 3];
let arrType2: Array<string> = ['1', '2', '3'];
let arrType3: Array<any> = [1, '2', true];

3. 接口表示法

interface Istate {
  name: string;
  age: number;
}

interface IArr {
  [index: number]: Istate; //index为形参
}

let arrType4: IArr = [{ name: 'shang', age: 19 }];
let arrType5: Array<Istate> = [{ name: 'shang', age: 19 }];
let arrType6: Istate[] = [{ name: 'shang', age: 19 }];

函数类型

1. 声明式类型的函数

function funcType(name: string, age: number): number /* 函数的返回值类型*/ {
  return age;
}
let ageNum: number = funcType('zhansan', 19);

2. 函数参数不确定

function funcType2(name: string, age: number, sex?: string): number {
  return age;
}
let ageNum2: number = funcType2('lisi', 18, 'nan');

3. 函数参数的默认值

function funcTypt3(name: string = 'zhangsan', age: number = 18): number {
  return age;
}

4. 表达式类型的函数

let funcType4 = function (name: string, age: number): number {
  return age;
};

let funcType5: (name: string, age: number) => number = function (
  name: string,
  age: number,
): number {
  return age;
};

interface funcType6 {
  (name: string, age: number): number;
}
let funcType6: funcType6 = function (name: string, age: number): number {
  return age;
};

5. 对于联合类型的函数，可以采用重载的方式

输入是string类型，输出也是string类型
输入是number类型，输出也是number类型

function getValue(value: string): string;
function getValue(value: number): number;
function getValue(value: string | number): string | number {
  return value;
}
let a: string = getValue('1');
let b: number = getValue(1);

类型断言

// let num: string | number = '10';
// num = 20;
// console.log(num.length); //类型“number”上面不存在“length”

1. 类型断言 只能断言联合类型中存在的类型

function getAssert(name: string | number) {
  // 可以用“<类型>”值或者 “值as类型”，但是在jsx语法中只能用“值as类型”
  // return (<string>name).length;
  return (name as string).length;
}

类型别名

1. 类型别名

type strType = string | number | boolean;
let str: strType = '10';
let str1: strType = 10;
let str3: strType = true;

2. 对于接口采用类型别名

interface muchType1 {
  name: string;
}
interface muchType2 {
  name: number;
}
type muchType = muchType1 | muchType2;
let much = { name: 'zhangsan' };
let much2 = { name: 1 };

3. 限制字符串的选择

type sex = 'nan' | 'nv';
function getSex(s: sex): string {
  return s;
}
getSex('nan');

枚举

1.使用枚举定义一些有名字的数据常量

enum Days {
  Sun = 10,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat,
}

console.log(Days.Sun); //10
console.log(Days.Sat); //16

console.log(Days); //枚举类型会被编译成一个双向印射的对象
console.log(Days[10] === 'Sun'); //true

类修饰符

创建Person类

export class Person {
  private name = 'zhangsan';
  protected age = 18;
  sex = 'nan';
  say() {
    console.log('my name ' + this.name + ', my age ' + this.age);
  }
}
let p = new Person(); //当类成员变量没有修饰的时候，默认是public修饰
p.say(); //my name zhangsan, my age 18

//private 私有属性只能在类的内部进行访问
// console.log(p.name); //属性“name”为私有属性，只能在类“Person”中访问。

//protected 保护属性只能在类的内部进行访问
// console.log(p.age); //属性“age”受保护，只能在类“Person”及其子类中访问。

创建Child子类

export class Child extends Person {
  callParsent() {
    super.say(); //super关键字可以获取到父类原型链上的方法
  }
  static test() {
    console.log('test');
  }
}
let c = new Child();
c.callParsent(); //my name zhangsan, my age 18

//子类继承了父类，但是无法获取父类私有或受保护的属性
// console.log(c.name);//属性“name”为私有属性，只能在类“Person”中访问。
// console.log(c.age);//属性“age”为私有属性，只能在类“person”中访问。

//子类继承了父类，子类就可以访问到父类公开的方法了
console.log(c.sex); //nan

Child.test(); //类的静态方法上面，不允许使用this

泛型

没有确切定义返回值类型，运行的数组每一项都可以是任意类型

function createArray(length: number, value: any): Array<any> {
  let arr = [];
  for (let i = 0; i < length; i++) {
    arr[i] = value;
  }
  return arr;
}
createArray(3, 1);

使用范型将其改造
泛型可以帮助我们约定线束规范

function createArray<T>(length: number, value: T): Array<T> {
  let arr = [];
  for (let i = 0; i < length; i++) {
    arr[i] = value;
  }
  return arr;
}
let strArray: string[] = createArray<string>(3, '1');

不传的时候根据类型进行反推

let numArray: number[] = createArray(3, 1);

接口当中采用泛型

interface ICreate {
  <T>(name: string, value: T): Array<T>;
}
let func: ICreate = function <T>(name: string, value: T): Array<T> {
  return [];
};