typescript TypeScript基础知识

Posted 2021-05-21

/*
  Types:
  Many people do not realize it, but JavaScript does in fact have types, they're just "Duck
  Typed", which roughly means that the developer does not have to think about them.
  
  JavaScript's types also exist in TypeScript:
   boolean: (true/false)
   number: integers, floats, Infinity , and NaN
   string: characters, and strings of characters
   []: Arrays of other types, like number[] or boolean[]
   {}: Object literal
   undefined: not set
   
  TypeScript also adds
   enum: enumerations like { Red, Blue, Green }
   any: use any type
   void: nothing
*/

// Primitive type example:
  let isDone: boolean = false;
  let height: number = 6;
  let name: string = "bob";
  let list: number[] = [1, 2, 3];
  let list: Array<number> = [1, 2, 3];
  enum Color {Red, Green, Blue};
  let c: Color = Color.Green;
  let notSure: any = 4;
  notSure = "maybe a string instead";
  notSure = false;
  
  function showMessage(data: string): void {
    alert(data);
  }
  showMessage('hello');

// optional parameters using ?
  function logMessage(message: string, isDebug?: boolean)
  {
    if (isDebug) {
    console.log('Debug: ' + message);
    } else {
    console.log(message);
    }
  }

/*Typescript classes
  TypeScript also treats classes as their own type
*/

  class Foo { foo: number; }
  class Bar { bar: string; }
  class Baz {
    constructor(foo: Foo, bar: Bar) { }
  }

/*Interfaces
  Sometimes classes are "more" than a developer wants. Classes end up creating code, in the
  form of transpiled ES2015 classes, or transpiled ES5 constructor functions.
  
  Interfaces are abstract descriptions of things. Interfaces can be used to represent any non-primitive
  JavaScript object. Interfaces   are literally "abstract" in the sense that they produce no code,
  ES2015, or ES5. Interfaces exist only to describe types to tsc.
*/

// Here is an example of an interface describing an Object literal:
  interface Action {
    name: string;
  }
  
  let a: Action = {
    name: 'clean kitchen today'
  }

/* Shapes 
  Underneath TypeScript is JavaScript, and underneath JavaScript is typically a JIT (just in
  time compiler). Given JavaScript's underlying semantics, types are typically reasoned about
  by "shapes". These underlying "shapes" work like TypeScript's interfaces, and are in fact
  how TypeScript compares custom types like classes, and interfaces.
*/

// Consider an expansion of the previous example:
  interface Action {
    name: string;
  }
  let a: Action = {
    name: 'clean kitchen today'
  }
  class NotAnAction {
    name: string;
    constructor() {
      this.name = 'Constructor function (class)';
    }
  }
  a = new NotAnAction(); // valid TypeScript!

/*
  Despite the fact that Action, and NotAnAction have different identifiers, tsc lets us
  assign an instance of NotAnAction to 'a' which has a type of Action . This is because
  TypeScript only really cares that Objects have the same "shape". In other words if two
  objects have the same attributes, with the same typings, those two objects are considered to
  be of the same type.
*/