preface

This article covers the basics of TypeScript, but you’ll have to check out the official documentation for more information.

There is a library written in TypeScirpt that you are welcome to use and learn from each other. I will write an article on how to develop and publish my own library.

What is a TypeScript

TypeScript is a superset of Javascript and adds optional static types and categories that browsers don’t recognize, so tools have to be used to convert Javascript code to run on browsers.

Why TypeScript

TypeScript makes it easier to write and maintain code because it specifies the type of a variable, makes it easier to know what type and properties it has, and checks for errors at compile time. Many editors have good support for TypeScript with code prompts. Improve development efficiency.

The base type

  • boolean
  • number
  • string
  • Array
let nums: number[] = [1.2.3];
let strings: Array<string> = ['str'];
Copy the code
  • enum
enum Color {Red, Green, Blue}  // Color = [0, 1, 2];
let c: Color = Color.Green;  / / 1
Copy the code
  • any
  • void
  • null,undefined
  • never

interface

Object type

interface Shape {
  readonly type: string;  // Read-only attributecolor? :string;  // Optional attribute
  area: number;
  setColor(color: string) :void;
  [prop: string] :any;  // Other attributes
}
Copy the code

Function types

interface createShape {
    (square: Shape): Shape;
}
Copy the code

Class types and inheritance interfaces

interface Square extends Shape {  // Inherits from Shape
  width: number;
  height: number;
  [prop: string] :any;  // Other attributes
}

interface ShapeConstructor {  // Constructor function structure
  new(shape: Shape): Shape;
}

interface CircleInterface extends Shape {
  radius: number;
}

class Shape implements Shape {  // Generates a class of type Shape
  readonly type = 'shape';  // Read-only attributes can only be assigned at initializationcolor? :string;
  area: number;
  
  constructor(shape: Shape) {
    this.color = shape.color;
  }
  setColor(color: string) {
    this.color = color; }}class Square extends Shape implements Square {
  readonly type = 'square';  // Read-only attributes can only be assigned at initialization
  width: number;
  height: number;

  constructor(square: Square) {
    super(square);

    this.width = square.width;
    this.height = square.height;
    this.area = square.width * square.height; }}class Circle extends Shape implements CircleInterface {
  readonly type = 'circle';
  radius: number;
}

function createNewShape(ctor: ShapeConstructor, shape: Shape) :Shape {
  return new ctor(shape);
}
Copy the code

The generic

Generics allow us the flexibility to specify the type during invocation or to infer the type from TS.

function createArray<T> () : () = >T[] {
    return (a)= > [];
}

const createNumberArray = createArray<number> ();const numberArray = createNumberArray();

numberArray.push(1);
numberArray.push('1');  // An error is reported because the specified array is of numeric type
Copy the code