交叉类型
& 简单的理解成从两个对象中创建一个新对象,新对象拥有两个对象所有的功能
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';