TypeScript learning notes

The data type

• Number type number

• String type String

• Boolean type Boolean

• Array type Array

  Two definitions:

const arr:number[] = [1.2.3]
Copy the code

const arr:Array\<number> = [1.2.3]
Copy the code

• Tuple type Tuple

  * Tuple types are one of the array types

const arr:[string, number, boolean] = ['curry'.123.true]
Copy the code

• Enum Type enum

enum Flag {
    success = 1,
    error = -1
}
Copy the code

* When an element is not assigned, it prints the index value. When the next element of the assigned element is not assigned, the value of that element is printed as the value of the previous element +1

 enum Color {
    red, blue, green=5, yellow
 }
 console.log(Color.blue, Color.yellow) / / 1 6
Copy the code

• Any type

  * Normal DOM elements are of type any

• Null, and undefined

• There is no type void

  * Usually used to define methods that do not return values

• Other types never

  * A value that never appears

function

class

• The definition of a class

class Person {
    name: string;
    constructor(name: string){
        this.name = name;
    }
    getName():string {
        return this.name
    }
}
const p = new Person('curry');
p.getName();
Copy the code

• inheritance

  * Note the need for extends and super

class Programmer extends Person {
    constructor(name:string) {
        super(name); }}const programmer = new Programmer('ha ha');
programmer.getName();
Copy the code

• Class modifier

  Public public – accessible inside, outside, and in subclasses

  Protected types — accessible by subclasses, but not by classes

  Private private – accessible inside the class, not outside the subclass or class

• polymorphism

  * Polymorphism is inheritance

  * A parent class defines a method to be implemented by subclasses that inherit from it, each of which behaves differently

interface

• The attribute interface

  * Attribute plus? Represents is an optional parameter

interface Info {
    name: string; age: number; variety? : string; }function getInfo(info: Info) :void {
    console.log(` name:${info.name}Age:${info.age}`)
}
getInfo({name: 'curry'.age: 6}) // Name: curry, age: 6
Copy the code

• Function type interface

  * Constraints on the parameters passed to the method as well as the value returned by the method

interface getInfo {
    (name:string, age:number):string;
}
const getInfo:getInfo = function(name:string, age:number) :string{
    return ` name:${info.name}Age:${info.age}`
}
console.log(getInfo('curry'.6)) // Name: curry, age: 6
Copy the code

• Indexable interface

// Constraints on arrays
interface UserArr {
    [index:number]: string
}
const arr: UserArr = ['curry'.Siamese Cat]
Copy the code

// Constraints on objects
interface UserObj {
    [key:string]: string
}
const obj: UserObj = { name: 'curry'.variety: Siamese cat}Copy the code

• Class type interface

// Constraints on classes
interface Animal {
    name: string;
    eat(name: string): void;
}
// implements an interface
class Cat implements Animal {
    public name: string;
    constructor(name:string) {
        this.name = name
    }
    eat() {
        console.log(`The ${this.name}` eat cat food)}}const c = new Cat('curry');
c.eat() // Curry cat food
Copy the code

• Inheritance of interfaces

interface Catamount extends Animal {
    play(): void
}
class Cat implements Catamount {
    public name:string;
    constructor(name: string) {
        this.name = name
    }
    eat() {
        console.log(`The ${this.name}` eat cat food)}// An error is reported if the play method is not defined because the Catamount interface construres the play method
    play() {
        console.log(`The ${this.name}Play with the cat stick)}}const c = new Cat('curry');
c.play(); // Curry plays with the cat stick

// Extend class inheritance + class implementation interface
class LazyCat {
    name: string;
    constructor(name:string) {
        this.name = name
    }
    sleep() {
        console.log(`The ${this.name}Love sleeping `)}}class Cat extends LazyCat implements Catamount {
    constructor(name:string) {
        super(name)
    }
    eat() {
        console.log(`The ${this.name}` eat cat food)}play() {
        console.log(`The ${this.name}Play with the cat stick)}}const c = new Cat('curry');
c.sleep(); // Curry likes sleeping
Copy the code

The generic

* Generics address the reuse of classes, interfaces, methods, and support for non-specific data types

* Replace all types with a generic (T), which can be called either as a number or as a string, returning a number when a number is passed in and a string when a string is passed in

• A generic class

class MinClass<T> {
    public list: T[] = [];
    add(num: T): void{
        this.list.push(num);
    }
    min(): T{
        let minNum = this.list[0];
        for(let i=0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i]
            }
        }
        return minNum
    }
}
const num = new MinClass<number>();
num.add(2);
num.add(1);
num.add(3);
console.log(num.min()) / / 1

const str = new MinClass<string>();
str.add('b');
str.add('a');
str.add('c');
console.log(str.min()) // 'a'
Copy the code

• A generic interface

interface ConfigFn {
    <T>(value: T): T
}
const getData:ConfigFn = function<T> (value: T) :T{
    return value;
}
getData<string>('123');
getData<number>(123);
Copy the code