TypeScript basic syntax

Quick start

This document is prepared for the current JS development colleagues to quickly adapt to TS development. Therefore, some commonly used grammar rules are listed to improve the efficiency of development. Learning TS mainly includes the following modules:

directory structure

To generate a directory with [TOC]:

Foundation type

Name key
Boolean value boolean
Numeric type number
Character string string
Array type Array
enumeration enum
Any type any
Type Asserts
  • Boolean let baseType: boolean = false;
  • let baseType: number = 123456;
  • String let baseType:string = 'string';
  • Array type let basetype: array < number > = [1,2,3];
  • enumeration

      enum Color { Red = 1,Green = 2,Blue = 4};
      let baseType:Color = Color.Red
  • Any type

    let baseType: any = 1;
    baseType = 'a string'; // string
    baseType = false // boolean
  • Type Asserts

    let baseType: any = 'a string value';
    let str_length: number = (<string>baseType).length; // Assert type checking
  • Variable declaration

    >

    • let

          let variable = 'Hello!';
  • var

        var variable = 'Hello!';
  • const

        const variable = 'Hello!';
  • Object deconstruction

        let obj = {
            a: 'foo',
            b: 123,
            c: 'b00'
    }
    let {a,b} = obj; // That is: ({a,b} = {a:'foo',b:123,c:'b00'});
  • Function declaration

        type C = {a:string,b:number};
        function func ({a,b} = {a:'', b: 0}):void {
            // ...
        }
        func();  // Default value: a = = '', B = = = 0
  • class

    Class declaration:

        class Greeter {
            greeting: string; // Internal attributes
            constructor(message: string) {  // Constructor
                this.greeting = message;
            }
            greet() { // Internal method
                return 'Hello, ' + this.greeting;    
        }
       }
       let greeter = new Greeter('World');

    Class inheritance:

        class Animal{
            name: string;
            constructor(value: string) {
                this.name = value;
            }
            greet(distance: number = 0) {
                return  `Hello, ${this.name} move ${distance}`;     // es6 syntax
            }
       }
       class People extends Animal {
            construct(name: string) { 
                super(name);
            }
            greet(distance: number = 5) {
                super.greet(distance);
         }
       }
       let greeter = new Greeter('Cat');
       greeter.greet() // Hello, Cat move 0
       greeter.greet(34) // Hello, Cat move 34
    

    Modifier for class:
    static, privite, readonly, (default), protected, public

      // Default public ownership
        class Greeter {
            static origin = {x: 0, y:0}; // Static attribute
            private greeting: string; // Private attributes
            readonly name: string = 'onlyread'; // Read-only attribute
            constructor(message: string) {  // Default public ownership
                this.greeting = message;
            }
            protected greet() { // under protection
                return 'Hello, ' + this.greeting;    
            }
            public speed() { // public Method
                console.log('Test');
            }
       }
       let greeter = new Greeter('World');
    

    get and set methods:

      // Default public ownership
        class Greeter {
            name: string = 'read';
            constructor(message: string = '') {  // Default public ownership
                this.name = message;
            }
            set greet(value) { // set
                this.name = value; 
            }
            get speed() { // get
                return this.name;
            }
       }
       let greeter = new Greeter();
       greeter.set('Cat');
       greeter.get(); // Cat

    function

    es6 Function writing:

        function func(x: number, y: number) {
            return x + y;
        }
        // Equivalent to:
        let func=  function(x: number, y: number):number{
            return x + y;
        } 
        //

    Modular

    Export declaration

    export const num = 123;  // Derived constant
    export class Animal { // Derived class
        speed(value: number) {
            return value;
        }
        export * from './baseClass'; // Export the entire module
    }

    Import declaration

        import {simpleModule as other} from './baseClass'; // Import new module and rename
        let obj = new other(); 
        // Whole introduction
        import * from './baseClass';    
    

    import and require
    export and exports

    Namespace

        namespace Validation {
        const numberRegexp = /^[0-9]+$/;
        export class ZipCodeValidator implements StringValidator {
            isAcceptable(s: string) {
                return s.length === 5 && numberRegexp.test(s);
            }
        }
    }

    To be continued...

    Keywords: Attribute

    Added by rick007 on Thu, 02 Apr 2020 01:38:25 +0300