50000 word TypeScript introduction series (phase III) (recommended Collection)

Geek Jiangnan: a programmer who is particularly dedicated to development technology, has unique insights and in-depth research on mobile development, has many years of experience in iOS, Android and HTML5 development, has unique insights and in-depth research on NativeApp, HybridApp and WebApp development, and is also proficient in JavaScript, AngularJS, NodeJS, Ajax, jQuery, Cordova A variety of Web front-end technologies such as React Native and server-side technologies such as Java and PHP.

Beginners play TypeScript Series, with a total of 5 issues. This article is the third issue, with praise, collection, comments, attention and triple support!

Click here for phase I knowledge

Click here for phase II knowledge

For beginners, the most fear of learning programming is that it is difficult.

So, is Typescript difficult?

First of all, I can assure you that your anxiety is superfluous. Novices have a strong rejection of learning new technologies, mainly because the foundation is not solid enough, and then their self-confidence is not strong enough.

1. Class

The classes in TS are almost the same as those in ES6

class Person {
    name:string; // Unlike ES6, instance properties need to be defined before they can be used
    age:number;
    constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
    say():void{
        console.log(`My name is ${this.name}, My age is ${this.age}`);
    }
    static food:string; // Static properties
    static eat():void{ // Static method
        console.log(`I'm eating ${this.food}`);
    }
}
let p = new Person('lnj', 34);
p.say();
Person.food = 'Egg Tart';
Person.eat();

class Student extends Person{
    book:string;
    constructor(name:string, age:number, book:string){
        super(name, age);
        this.book = book;
    }
    say():void{
        console.log(`I was rewritten say-${this.name}${this.age}${this.book}`);
    }
    static eat():void{
        console.log(`I was rewritten eat-${this.food}`);
    }
}
let stu = new Student('zs', 18, 'Code love');
stu.say();
Student.food = 'ice cream';
Student.eat();

2. Class attribute modifier

Public:
- If you use public to modify an attribute, it means that the attribute is public
- It can be used inside a class, in a subclass, or outside
Protected:
- If protected is used to modify an attribute, it means that the attribute is protected
- It can be used inside a class or in subclasses
Private:
- If you use private to modify an attribute, it means that the attribute is private
- Can be used inside a class
Readonly:

/*
class Person {
    public name:string; // It is public by default
    protected age:number;
    private gender:string;
    constructor(name:string, age:number, gender:string){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    say():void{
        console.log(`name=${this.name},age=${this.age},gender=${this.gender}`);
    }
}
class Student extends Person{
    constructor(name:string, age:number, gender:string){
       super(name,age,gender);
    }
    say():void{
        // console.log(`name=${this.name}`);
        // console.log(`age=${this.age}`);
        // console.log(`gender=${this.gender}`);
    }
}
let p = new Person('lnj',34, 'male');
p.say();
// console.log(p.age);
// console.log(p.gender);

let stu = new Student('zs', 18, 'female');
stu.say();
// console.log(stu.age);
 */

/*
class Demo {
    readonly name:string;
    constructor(name:string){
        this.name = name;
    }
    static food:string;
}
let demo = new Demo('123');
console.log(demo.name);
// demo.name = 'abc';
console.log(demo.name);
*/

3. Class method modifier

public :
- If you use public to modify a method, it means that the method is public
- It can be used inside a class, in a subclass, or outside
protected :
- If you use protected to modify a method, it means that the method is protected
- It can be used inside a class or in subclasses
private
- If you use private to modify a method, it means that the method is private
- Can be used inside a class

/*
class Person {
    name:string;
    age:number;
    gender:string;
    constructor(name:string, age:number, gender:string){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    public sayName():void{
        console.log(`name=${this.name}`);
    }
    protected sayAge():void{
        console.log(`age=${this.age}`);
    }
    private sayGender():void{
        console.log(`gender=${this.gender}`);
    }
    say():void{
        this.sayName();
        this.sayAge();
        this.sayGender();
    }
}
class Student extends Person {
    constructor(name: string, age: number, gender: string) {
        super(name, age, gender);
    }
    say():void{
        this.sayName();
        this.sayAge();
        this.sayGender();
    }
}
let p = new Person('lnj', 34, 'male');
p.say();
p.sayName();
p.sayAge();
p.sayGender();
let stu = new Student('zs', 18, 'female');
stu.say();
*/

/*
Requirement: there is a base class. All subclasses need to inherit from this base class, but we don't want others to create objects through the base class
* */
/*
class Person {
    name:string;
    age:number;
    gender:string;
    protected constructor(name:string, age:number, gender:string){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    say():void{
        console.log(`name=${this.name},age=${this.age},gender=${this.gender}`);
    }
}
class Student extends Person {
    constructor(name: string, age: number, gender: string) {
        super(name, age, gender);
    }
}
let p = new Person('lnj', 34, 'male');
let stu = new Student('zs', 18, 'female');
 */

4. Class optional attributes and parameter attributes

optional attribute
- Like the optional attributes in the interface, attributes that can be passed or not can be passed

class Person {
    // Note: if the instance attribute is defined in TS, it must be used in the constructor, otherwise an error will be reported
    name:string;
    age?:number; // optional attribute 
    constructor(name:string, age?:number){
        this.name = name;
        this.age = age;
    }
    // setNameAndAge(name:string, age:number){
    //     this.name = name;
    //     this.age = age;
    // }
}
let p = new Person('lnj');
console.log(p);

Parameter properties
- Receive and define instance properties

/*
class Person {
    name:string;
    age:number;
    constructor(name:string, age?:number){
        this.name = name;
        this.age = age;
    }
}
* */
class Person {
    constructor(public name:string,public age:number){
    }
}
let p = new Person('lnj', 34);
console.log(p);

5. Class accessor

What is an accessor?
Intercept access to object members through getters/setters

class Person {
    private _age:number = 0;
    set age(val:number){
        console.log('Entered set age method');
        if(val<0){
            throw new Error('The age of a person cannot be less than zero');
        }
        this._age = val;
    }
    get age():number{
        console.log('Entered get age method');
        return this._age;
    }
}
let p = new Person();
p.age = 34;
// p.age = -6; // p.age(-6);
console.log(p.age);

6. Abstract class

What is an abstract class?
Abstract classes are specifically used to define classes that do not want to be created directly by the outside world
Abstract classes are generally used to define base classes
Abstract classes, like interfaces, are used to constrain subclasses
What is the difference between abstract classes and interfaces?
Only constraints can be defined in the interface, and specific implementations cannot be defined
Abstract classes can define both constraints and concrete implementations

class Person {
    name:string;
    age: number;
    protected constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
}
class Student extends Person{
    constructor(name:string, age:number){
        super(name, age);
    }
}
// let p = new Person('lnj', 34);
let stu = new Student('lnj', 34);
console.log(stu);
 */

abstract class Person {
    abstract name:string;
    abstract say():void;
    eat():void{
        console.log(`${this.name}I'm eating`);
    }
}
// let p = new Person();
class Student extends Person{
    name:string = 'lnj';
    say():void{
        console.log(`My name is ${this.name}`);
    }
}
let stu = new Student();
stu.say();
stu.eat();

7. Class and interface

// Class "implementation" interface
/*
interface PersonInterface {
    name:string;
    say():void;
}
// As long as an interface is implemented, all properties and methods in the interface must be implemented
class Person implements PersonInterface{
    name:string = 'lnj';
    say():void{
        console.log(`My name is ${this.name} `;
    }
}
let p = new Person();
p.say();
*/

// Interface "inheritance" class
class Person {
    // protected name:string = 'lnj';
    name:string = 'lnj';
    age:number = 34;
    protected say():void{
        console.log(`name = ${this.name}, age = ${this.age}`);
    }
}
// let p = new Person();
// p.say();
// Note: as long as an interface inherits a class, it will inherit all the properties and methods in the class
//         However, it only inherits the declaration of properties and methods, and does not inherit the implementation of properties and methods
// Note: if the class inherited by the interface contains protected properties and methods, only the subclasses of this class can implement the interface
interface PersonInterface extends Person{
    gender:string;
}

class Student extends Person implements PersonInterface{
    gender:string = 'male';
    name:string = 'zs';
    age:number = 18;
    say():void{
        console.log(`name = ${this.name}, age = ${this.age}, gender = ${this.gender}`);
    }
}
let stu = new Student();
stu.say();

8. Classes and generics

// Generic class
class Chache<T> {
    arr:T[] = [];
    add(value:T):T{
        this.arr.push(value);
        return value;
    }
    all():T[]{
        return this.arr;
    }
}
let chache = new Chache<number>();
chache.add(1);
chache.add(3);
chache.add(5);
console.log(chache.all());

9. Interface consolidation

// When we define multiple interfaces with the same name, the contents of multiple interfaces will be merged automatically
interface TestInterface {
    name:string;
}
interface TestInterface {
    age:number;
}
/*
interface TestInterface {
    name:string;
    age:number;
}
* */

class Person implements TestInterface{
    age:number = 19;
    name:string = 'lnj';
}

Codeword is not easy. Ask for three connection support online.

Everyone remember to give a praise before collecting! Good articles are worth seeing by more people.

Programming VIP