typescript高级编程(三)

交叉类型

& 简单的理解成从两个对象中创建一个新对象,新对象拥有两个对象所有的功能

function extend<T extends object, U extends object>(first: T, second: U): T & U {
  return Object.assign(first, second)
}

console.log(extend({name: 'xx', age: 12}, {sex: 12}));
// { name: 'xx', age: 12, sex: 12 }

type F1 = (a: number, b: number) => number;
type F2 = (a: string, b: string) => string;
const add: F1 & F2 = (a, b) => a + b;
console.log(add(10, 20)); // 30
console.log(add('x', 'b')); // xb
add('x',1) //error

@types

原来@types是一个存放javascript的库

例如jq

npm install @types/文件库
npm install @types/jquery -S

keyof

keyof与 Object.keys相似,只是keyof取interface的键

interface Inits {
  x: number,
  y: number
}
// type A= 'x' | 'y'
type A = keyof Inits
const add = (a: A) => {
};
add('x');
add('y');
add('1') // 报错

type X = { name: 'xxx', age: 12 }
type A = {
  [T in keyof X]: X[T] | null
}
let obj: A = {
  name: 'xxx',
  age: 12
};
//  // {a: 1 | null, b: 1 | null, c: 1 | null}

in 循环

type A = 'name' | 'age' | 'sex';
type B = {
  [T in A]: number
}
let arr: B = {
  name: 12,
  age: 12,
  sex: 12
}

接口中extends 使用

interface Iyear {
  year: number
}

interface Ivalidator {
  isClient: boolean
}

interface Iemploy extends Iyear, Ivalidator {
  place: string
}

let sum: Iemploy = {
  place: 'xxx',
  year: 10,
  isClient: true
};

typescript 继承

class Person {
  public ccc = 10;
  constructor() {
  }
}

class Employee extends Person {
  constructor() {
    super();
  }
}

let e = new Employee();
console.log(e.ccc);
// 10

class Person {

  constructor(private firstName: string) {
    this.firstName=firstName;
  }
}

class Employee extends Person {
  constructor(firstName: string) {
    super(firstName);
  }
}
我们在学习react的时候也会发现,super(props) ,先在自身找,自身找不到再去上层找

Abstract class

abstract 关键字添加到类声明中,则不能实例化它

类的特定声明

interface Motor {
  start(): boolean

  brake(num: number): void
}

class Car implements Motor {
  constructor() {
  }

  start(): boolean {
    return true;
  }

  brake(num: number) {

  }
}

interface MotorVehicle {
  fly(how: number);
  land();
}

interface Motor extends MotorVehicle {
  start(): boolean
  brake(num: number): void
}

class Car implements Motor {
  constructor() {
  }
  fly(how: number) {
  }
  land() {
  }

  start(): boolean {
    return true;
  }

  brake(num: number) {

  }
}

enum 枚举

enum Direction {
  Up = 'Up',
  Down = 'Down',
  Left = 'left',
  Right = 'Right'
}

const move = (where: Direction) => {
  console.log(where);
};
move(Direction.Down);
// Down

=====
type Direction1 = 'Up' | 'Down' | 'left' | 'Right';
const move1 = (where: Direction1) => {
  console.log(where);
};
move1('Up')

泛型

class A<T> {
  value: T;
}

function printMe<T>(content: T): T {
  return content;
}

const b = <T>(content: T): T => {
  return content;
};

class Pair<K, V> {
  constructor(public key: K, public value: V) {
  }
}

function compare<K, V>(pair1: Pair<K, V>, pair2: Pair<K, V>): boolean {
  return pair1.key === pair2.key && pair1.value === pair2.value;
}

let p1: Pair<number, string> = new Pair(1, 'xxxx'); // 两种方式
let p2 = new Pair(1, 'xxxx');
console.log(compare(p1, p2)); // true

let p3 = new Pair<number, string>(1, 'ssss');

type numFunc<T> = (arg: T) => (c: number) => number;

const a: numFunc<number> = b => c => {
  return b + c;
};
console.log(a(10)(20));
// 30

interface Person {
  name: string;
  age: number
}

type propNames = keyof Person;
// 相当于   'name'|'age'
type propTypes = Person[propNames]
//      相当于   string | number

interface Person {
  name: string,
  age: number
}

const persons: Person[] = [
  {name: 'xxx', age: 1},
  {name: 'bbb', age: 2},
];

function filterBy<T>(property: any, value: any, array: T[]) {
  return array.filter(item => item[property] === value);
}

console.log(filterBy('age', 2, persons));

function filterByOne<T,P extends keyof T>(property:P,value:T[P],array:T[]){
  return array.filter(item => item[property] === value);
}

console.log(filterByOne('age', 2, persons));

interface Person {
  readonly name: string
  readonly age: number
}

const worker1: Person = {name: 'John', age: 23};
// 定义了不能被更改了
=============
type ReadonlyB<T> = {
  readonly [P in keyof T]: T[P]
}
interface Person {
  name:string,
  age:number,
  firstName:string
}
// 只读
let a:Readonly<Person>={name:'xxx',age:12,firstName:'xxx'}
// 源码实现
let b:ReadonlyB<Person>={name:'xxx',age:12,firstName:'xxx'}  

type Partials<T> = {
  [P in keyof T]?: T[P]
}
interface Person {
  name:string,
  age:number
// 可选
const work1:Partial<Person>={name:'xxx'}
// 源码实现
const work2:Partials<Person>={name:'xxx'}

// 可以移除(删除)指定属性，可以修改类型， 但是不能添加类型
type ReadonlyB<T> = {
  -readonly [P in keyof T]: T[P]
}
interface Person {
  name:string,
  age:number,
  firstName:string
}
let b:ReadonlyB<Person>={name:'xxx',age:12,firstName:'xxx'}
delete b['age']

// ?.  可选    -? 必传
type RequiredB<T> = {
  [P in keyof T]-?: T[P]
}

interface Person {
  name: string,
  age: number,
  firstName: string
}

let a: Required<Person> = {name: 'xxx', age: 12, firstName: 'bbb'};
// 源码方式
let b: RequiredB<Person> = {name: 'xxx', age: 12, firstName: 'bbb'};

// 挑选  
type PickB<T, K extends keyof T> = {
  [P in K]: T[P]
}

interface Person {
  name: string,
  age: number,
  firstName: string
}

type PersonNameAge = PickB<Person, 'name' | 'age'>
let a: PersonNameAge = {name: 'xxx', age: 12};
let b:Pick<Person,'name'|'firstName'>={name:'xxx',firstName:'xxx'}

// 排除
type T1 = Exclude<'a' | 'b' | 'c', 'c'>
 //type T1='a'|'b'
let a: T1 = 'a';
let b: T1 = 'b';

// 自己实现一个
type ExcludeB<T, U> = T extends U ? never : T;
interface Person {
  id: number;
  name: string;
  age: number;
}
type RemoveProps<T, K> = ExcludeB<keyof T, K>;
type Remainning = RemoveProps<Person, 'name' | 'age'>
							// keyof Person = 'id'|'name'|'age'
let c: Remainning = 'id';