WEB前端技术

/* 
* X 兼容 Y: X(目标类型) = Y(源类型)
*/

let s: string = 'a'
s = null;

// 接口兼容性
interface X {
    a: any;
    b: any;
}
interface Y {
    a: any;
    b: any;
    c: any;
}
let x: X = {a: 1, b: 2}
let y: Y = {a: 1, b: 2, c: 3}
x = y;
// 函数兼容性
type Handler = (a: number, b: number) => void
function hof(Handler: Handler) {
    return Handler
}

//1)参数个数
let handler1 = (a: number) => {}
hof(handler1)
let handler2 = (a: number, b: number, c:number) => {}
// hof(handler2)

// 可选参数和生育参数
let a = (p1: number, p2: number) => {}
let b= (p1?: number, p2?: number) => {}
let c = (...args: number[]) => {}
a = b
a = c 
b = c
b = a 
c = a 
c = b

//2)参数类型
let handler3 = (a: string) => {}
// hof(handler3)

interface Point3D {
    x: number;
    y: number;
    z: number;
}
interface Point2D {
    x: number;
    y: number;
}
let p3d = (point: Point3D) => {};
let p2d = (point: Point2D) => {};
p3d = p2d 
p2d = p3d 

//3)返回值类型
let f = () => ({name: 'Alice'});
let g = () => ({name: 'Alice', location: 'Beijing'});
f = g
// g = f

function overload(a: number, b: number): number;
function overload(a: string, b: string): string;
function overload(a: any, b: any): any {}

// 枚举兼容性
enum Fruit { Apple, Banana }
enum Color { Red, Yellow }
let fruit: Fruit.Apple = 3
let no: number = Fruit.Apple
let color: Color.Red = Fruit.Apple

// 类兼容性
class A {
    constructor(p: number, q: number) {}
    id: number = 1
    private name: string = ''
}
class B {
    static s = 1
    constructor(p: number) {}
    id: number = 2
    private name: string = ''
}
let aa = new A(1, 2);
let bb = new B(1)
// aa = bb
// bb = aa
class C extends A {}
let cc = new C(1, 2)
aa = cc 
cc = aa 

// 泛型兼容性
interface Empty<T> {
    value: T
}
// let obj1: Empty<number> = {};
// let obj2: Empty<string> = {};
// obj1 = obj2

let log1 = <T>(x: T): T => {
    console.log('x')
    return x
}
let log2 = <U>(y: U): U => {
    console.log('y')
    return y
}
log1 = log2

let a = 1;
let b = [1, null];

let c = (x = 1) => x + 1;

window.onkeydown = (event) => {
    // console.log(event.button);
}

interface Foo {
    bar: number
}
// let foo = {} as Foo;
let foo: Foo = {
    bar: 1
}
// foo.bar = 1;

enum Type { Strong, Week}

class Java {
    helloJava() {
        console.log('Hello Java')
    }
}

class JavaScript {
    helloJavaScript() {
        console.log('Hello JavaScript')
    }
}

function getLanguage(type: Type) {
    let lang = type === Type.Strong ? new Java() : new JavaScript()
    if (lang.helloJava){
        lang.helloJava()
    }
    return lang
}

getLanguage(Type.Strong)

class Log1<T> {
    run(value: T) {
        console.log(value);
        return value;
    }
}
let log1 = new Log1<number>()
log1.run(1)
let log2 = new Log1()
log2.run('1')


interface Length {
    length: number
}
function log3<T extends Length>(value: T): T {
    console.log(value, value.length);
    return value;
}
log3([1])
log3('123')
log3({length: 1})

function log<T>(value: T): T {
    console.log(value);
    return value;
}

log<string[]>(['a','b']);
log(['a','b'])

// type Log = <T>(value: T) => T
// let myLog: Log = log;

interface Log<T = string> {
    (value: T): T
}
let myLog: Log = log
myLog('1');

interface Human {
    // new (name: string): void;
    name: string;
    eat(): void;
}

class Asian implements Human {
    constructor(name:string){
        this.name = name;
    }
    name: string;
    eat(){};
    sleep(){}
}

interface Man extends Human{
    run(): void;
}

interface Child {
    cry():void;
}

interface Boy extends Man, Child{}

let boy: Boy = {
    name: '',
    run(){},
    eat(){},
    cry(){}
}

class Auto {
    state = 1
    // private state2 = 0
}
interface AutoInterface extends Auto{

}
class C implements AutoInterface{
    state = 1
}

class Bus extends Auto implements AutoInterface{
    
}