WEB前端技术

abstract class Animal {
    eat(){
        console.log('eat');
    }
    abstract sleep(): void;
}

class Dog1 extends Animal{
    constructor(name: string) {
        super();
        this.name = name;
    }
    name: string
    run(){}
    sleep(){
        console.log('dog sleep');
    }
}
let dog1 = new Dog1('wangwang');
dog1.eat();

class Cat extends Animal{
sleep(){
    console.log('Cat sleep');
}
}
let cat = new Cat();

let animals: Animal[] = [dog1, cat]
animals.forEach(i=>{
    i.sleep();
})

class WorkFlow {
    step1(){
        return this;
    }
    step2(){
        return this;
    }
}
new WorkFlow().step1().step2();

class Myflow extends WorkFlow{
    next(){
        return this;
    }
}
new Myflow().next().step1().step2();

class Dog{
    constructor(name: string) {
        this.name = name;
    }
    public name: string = 'dog';
    run(){}
    private pri(){}
    protected pro(){}
    readonly legs: number = 4
    static food: string = 'bones'
}
console.log(Dog.prototype);
let dog = new Dog('wangwang');
console.log(dog)
// dog.pri()
// dog.pro()
console.log(Dog.food)

class Husky extends Dog {
    constructor(name: string, public color: string) {
        super(name);
        this.color = color;
        // this.pri()
        this.pro();
    }
    // color: string;
}
console.log(Husky.food)

// 函数定义
function add1(x:number, y:number){
    return x + y;
}

let add2: (x:number, y:number) => number

type add3 = (x:number, y:number) => number

interface add4{
    (x:number,y:number): number;
}

// add1(1,2,3)

function add5(x:number,y?:number){
    return y?x+y:x;
}
add5(1)

function add6(x:number,y=0,z:number,q=1){
    return x + y + z + q;
}
console.log(add6(1,undefined, 3));

function add7(x:number,...rest:number[]){
    return x + rest.reduce((pre, cur)=> pre +cur) ;
}

console.log(add7(1,2,3,4,5))

function add8(...rest: number[]): number;
function add8(...rest: string[]): string;
function add8(...rest: any[]): any{
    let first = rest[0];
    if(typeof first === 'string'){
        return rest.join('')
    }
    if(typeof first === 'number'){
        return rest.reduce((pre, cur)=> pre + cur);
    }
}
console.log(add8(1,2,3));
console.log(add8('a','b','c'));

// let add: (x:number,y:number) => number

// interface Add{
//     (x:number, y:number): number
// }

type  Adds = (x: number, y:number) => number

let adds: Adds = (a, b) => a + b

interface Lib{
    ():void;
    version: string;
    doSomething():void
}

function getLib(){
    let lib: Lib = (() => {}) as Lib
    lib.version = '1.0';
    lib.doSomething = () => {}
    return lib;
}

let lib1 = getLib();
lib1();
lib1.doSomething();

let lib2 = getLib();

interface List {
    readonly id: number,
    name:string,
    // [x: string]: any;
    age?: number
}
interface Result {
    data:List[]
}
function render(result: Result) {
  result.data.forEach((value) => {
    console.log(value.id, value.name);
    if (value.age) {
      console.log(value.age);
    }
    // value.id++
  });
}
const result = {
  'data': [
    { 'id': 1, 'name': 'A', 'sex': 'male' },
    { 'id': 2, 'name': 'B', 'age': 10 }
  ]
};
render(result);

interface StringArray{
  [index: number]: string
}
let chars: StringArray = ['A', 'B']

interface Names{
  [x: string]: any;
  // y: number;
  [z: number]: number
}

// render(<Result>{
//     'data': [
//         { 'id': 1, 'name': 'A', 'sex': 'male' },
//         { 'id': 2, 'name': 'B' }
//     ]
// } as Result);
// render(<Result>{
//   'data': [
//     { 'id': 1, 'name': 'A', 'sex': 'male' },
//     { 'id': 2, 'name': 'B' }
//   ]
// });

import './datatype';
import './enum'; // 新增这句话
let hello : String = 'Hello TypeScript';
document.querySelectorAll('.app')[0].innerHTML = 'hello';

// 06-枚举类型

// 数字枚举
enum Role {
    Reporter = 1,
    Developer,
    Maintainer,
    Owner,
    Guest
}
console.log(Role.Reporter)
console.log(Role)

// 字符串枚举
enum Message {
    Success = '恭喜你，成功了',
    Fail = '抱歉，失败了'
}
console.log(Message)

// 异构枚举，容易混淆，不建议使用
enum Answer {
    N,
    Y = 'Yes'
}

// 枚举成员
// Role.Reporter = 2
enum Char {
// const
    a,
    b = Char.a,
    c= 1 + 3,
    d = Math.random(),
    e = '123'.length,
    f = 4
}
console.log(Char)

// 常量枚举
const enum Month {
    Jan,
    Feb,
    Mar
}
let month = [Month.Jan, Month.Feb, Month.Mar]
console.log(month)

// 枚举类型
enum E { a, b}
enum F { a = 0, b = 1}
enum G { a = 'apple', b = 'banana'}

let e: E = 3
let f: F = 3
// e === f

let e1: E.a = 1
let e2: E.b
// e1 === e2
let e3: E.a = 1
e1 === e3

let g1: G = G.b
let g2: G.a = G.a

import './datatype'; // 新增这句话

let hello : String = 'Hello TypeScript';
document.querySelectorAll('.app')[0].innerHTML = 'hello';

// 原始类型
let bool: boolean = true;
let num: number | undefined | null = 123;
let str: string = 'abc';
// str = 123; // TS2322: Type 'number' is not assignable to type 'string'.

// 数组
let arr1: number[] = [1, 2, 3];
let arr2: Array<number | string> = [1, 2, 3, '666'];

// 元组
let tuple: [number, string] = [0, '1'];

// 函数
let add = (x: number, y:number) => x + y;
let compute: (x: number, y: number) => number;
compute = (a, b) => a + b;

// 对象
let obj: {x: number, y: number} = {x: 1, y: 2};
obj.x = 3;

// symbol
let s1: symbol = Symbol();
let s2 = Symbol();
console.log(s1 === s2);

// undefined, null
let un: undefined = undefined;
let nu: null = null;
num = undefined; // TS2322: Type 'undefined' is not assignable to type 'number'.
num = null; // TS2322: Type 'null' is not assignable to type 'number'.

// void
let noReturn = () => {};

// any
let x;
x = 1;
x = [];
x = () => {}

// never
let error = () => {
    throw new Error('error');
}
let endless = () => {
    while(true) {}
}