Typescript study notes

Why use Typescript?

Microsoft introduced TypeScript mainly to achieve two goals:

• Provide an optional type system for Javascript;
• Compatible with current and future JavaScript features.

The benefits of static typing:

• Conducive to code refactoring, it can catch errors when the compiler compiles.
• A clear type is good for reading.

JavaScript common syntax

TypeScript is a "superset" of JavaScript, and typescript standardizes JavaScript syntax.

1. == and ===

   When using == for comparison, an implicit conversion is performed.

   2 == 2 true
   2 == '2' true
   2 === '2' false

2. Quote

   Except for literals, any object in JavaScript (including functions, arrays, regular expressions, etc.) is a reference.

3. null and undefined

   The variable is not initialized: undefined. Variables are not available as null.

   undefined == undefined true
   undefined == null true
   // 检查变量是否初始化
   if( typeof val !== 'undefined'){}

4. this

   this keyword points to the calling context

   function foo(){console.log(this)} /** this --> window **/
   var obj = {foo:function(){console.log(this)}} 
   obj.foo() /** this --> obj */ 

5. Closure

   The internal function accesses the external variable. At this time, the external function variable is bound by the internal function, which is called a closure.

   function outer(){
     var outerVal = '1'
     function inner(){
       console.log(outerVal)
     }
     outer()
   }
   /** inner 绑定了 outerVal */

6. digital

   The value in JavaScript is a double-precision 64-bit number

   console.log(.1 + .2) // 0.30000000000000004

Built-in integer type limit Number.MAX_SAFE_INTEGER-Number.MIN_SAFE_INTEGER

Big.js is generally used in financial calculations

NaN, return NaN when the calculated result is not a legal value, check NaN, Number.isNaN.

7. thuthy

! ! Double exclamation mark, the first one! Is to convert the value to a Boolean value, and the second logic is inverted.

ES6 syntax

1. class

   /*ES6*/
   class Point {
     x: number
     y: number
     constructor(x: number, y: number) {
       this.x = x
       this.y = y
     }
     add(point: Point) {
       return new Point(this.x + point.x, this.y + point.y)
     }
   }
   
   /*编译后ES5*/
   var point = function(){
     function Point(x, y){
       this.x = x;
       this.y = y;
     }
     Point.prototype.add = function(point){
      return  new Point(this.x + point.x, this.y + point.y)
     }
     return Point;
   }()

inherit

/*ES6*/
class Point3D extends Point {
  z: number
  constructor(x: number, y: number, z: number) {
    super(x, y)
    this.z = z
  }
  add(point: Point3D) {
    var point2D = super.add(point)
    return new Point3D(this.x + point2D.x, this.y + point2D.y, this.z + point.z)
  }
}

/*编译后ES5*/
var point3D = function(_super){
  __extends(Point3D, _super)
  function Point3D(x, y, z){
    _super.call(this, x, y)
    this.z = z;
  }
  Point3D.prototype.add = function(point){
     var point2D = _super.prototype.add.call(this, point)
   return new Point3D(this.x + point2D.x, this.y + point2D.y, this.z + point.z)
  }
  return Point;
}(Point)

/**__extends typescript 编译 extends 时生成*/
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
/*
d表示派生类，b表示基类
*/
  return function (d, b) {
        extendStatics(d, b); // 拷贝静态变量
        function __() { this.constructor = d; } // 保留派生构造器
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); //d.prototype.__proto__ = b.prototype
    };
})();

Distinguish proto prototype

All objects in javascript have properties __ proto __

/** 查找属性顺序 
obj.property
obj.__proto__.property
obj.__proto__.__proto__.property
**/

All functions in javasript have an attribute prototype, and prototype has a constructor that points to the function itself.

function Foo(){
  this.name = "xm"
}
var foo = new Foo();
/**通过函数创建的对象，会将函数prototype传给对象__proto__*/
console.log(foo.__proto__ === Foo.prototype)

2. Arrow function

   var inc = x => x + 1;

Arrow functions bring succinct syntax and this loss.

3. rest parameter

   ...+The form of parameter name represents the last parameter, which is converted to an array when it is acquired.

4. let and const

   var variable is function scope, let variable block scope

   /**闭包中的var*/
   var funcs = []
   for(var i = 0;i < 3; i++){
     funcs.push(function(){
       console.log(i)
     })
   }
   for(var j = 0;j < 3; j++){
     funcs[j]();
   }
   /*输出 3*/

const declares a constant value.

5. Deconstruction

   Support object and array destructuring.

   /*对象解构*/
   var person = {name:'x',age:12,gender:1}
   var {name, age} = person
   console.log(name, age) // x, 12
   var {x, y, ...remaining} = {x: 1, y: 2, z: 4, w: 5} // 看作删除了x,y
   console.log(x,y,remaining) // 1,2 {z:4,w:5}

6. Spread operator

   Function.prototype.apply

   /*apply调用*/
   function foo(x,y){}
   var args = [0,1]
   foo.apply(null, args)
   // 新语法
   foo(...args)
   // 数组追加元素
   var list = [1, 2]
   list = [...list, 3] //  [1,2,3]
   list = [0,...list,4] // [0,1,2,3,4]

7. for...of

   /*for...in*/
   for(var e in [7,8,9]){console.log(e) }// 返回索引
   for(var e of [7,8,9]){console.log(e) }// 返回元素

8. Promise

   Use Promise to handle asynchronous and callback functions.

   var promise = new Promise((resolve, reject) => {resolve()//回调正确值
                                                  reject() // 异常值
                                                  })
   promise.then(res => {}) // 正常
   .catch(err => {}) // 异常

Parallel process control, Promise.all([promise1,promise2]).then(res => [result1, result2])

9. generators

   function* idGen(){
       let index = 0
       while(index < 3) yield /*暂停*/ index++;
   }
   var id = idGen();
   console.log(id.next());
   console.log(id.next());
   console.log(id.next());
   console.log(id.next());

10. async/await

    async function foo(){
        var result = await exPromise() //等待promise执行返回
        console.log(result)
    }

TS project composition

1. Compilation context

   tsconfig.json configuration file, configuration options: tsconfig

2. Declaration space

   Type declaration space and variable declaration space.

   • class : type , value .
   • interface (interface) : type .
   • enumeration (enum) : type , value .
   • category name (type) : type .
   • function : value .
   • variable (let, const, var, parameters) : value .

3. Module

   By default, the declaration is in the global namespace. Use export to become a file module.

   Module path finding

   /**相对路径**/
   import * as foo from './foo' // 同级目录
   import * as foo from '../foo' // 上级目录
   import * as foo from '../someFolder/foo // 相对目录
   
   /**导入路径不是相对路径时，动态查找**/
   import * as foo from 'foo'
   /*
   查找顺序
   ./node_modules/foo
   ../node_modules/foo
   ../../node_modules/foo
   */
   import * as foo from 'something/foo'
   /**
   ./node_modules/something/foo
   ../node_modules/something/foo
   ../../node_modules/something/foo
   */
   /* place */
   import * as foo from 'foo'
   /**查找顺序*/
   /**
   foo 是文件 foo.ts
   foo 是目录 foo/index.ts
   foo 是目录 foo/package.json 有 types
   foo 是目录 foo/package.json 有 main
   **/

4. Namespaces

   //typescript 声明
   namespace Utility {
     export function log(msg) {
       console.log(msg);
     }
     export function error(msg) {
       console.log(msg);
     }
   }
   // usage
   Utility.log('Call me');
   Utility.error('maybe');

var Utility;
(function (Utility) {
    function log(msg) {
        console.log(msg);
    }
    Utility.log = log;
    function error(msg) {
        console.log(msg);
    }
    Utility.error = error;
})(Utility || (Utility = {}));
// usage
Utility.log('Call me');
Utility.error('maybe');

5. Dynamically import expressions

   // 动态加载
   import(/* webpackChunkName: "momentjs" */ 'moment')
     .then(moment => {
       // 懒加载的模块拥有所有的类型，并且能够按期工作
       const time = moment().format();
       console.log('TypeScript >= 2.4.0 Dynamic Import Expression:');
       console.log(time);
     })
     .catch(err => {
       console.log('Failed to load moment', err);
     });

Create TS project

1. Install the node environment, create a directory, enter and execute npm init -y;
2. Install ts npm install typescript --save-dev;
3. Create the file node.d.ts npm install @types/node --save-dev;
4. Initialize tsconfig.json npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6, dom --module commonjs;
5. Add ts-node: npm install ts-node --save-dev to compile and run in real time;
6. Add nodemon: npm install nodemon --save-dev, as long as the file is changed, it will call ts-node.

TS type system

1. basic concepts

   Basic type number string boolean string[]

   Interface

   Special types any, null, undefined and void

   // 接口
   interface Name{
       first: string,
       last: string
   };
   let n : Name;
   n = {
       first: 'Li',
       last:'p'
   }
   // 泛型
   function contact<T>(items : T[]): T[]{
       //......
       return items;
   }
   // 联合类型
   function join(items : string[] | string){
       //......
   }
   // 交叉类型
   function extend<T, U>(first: T, last : U) :T & U{
       const result = <T & U>{}
       return result
   }
   // 元祖类型
   let nameNum : [string, number]
   //类型别名
   type mind = string | Number
   let m : mind

2. @types

   Repository @types controls the global by configuring compilerOptions.types in tsconfig.json.

3. Environmental declaration

   Use the keyword declare to declare, generally in the .d.ts file.

4. enumerate

   Number enumeration and string enumeration.

5. lib.d.ts

   When installing TypeScript, a lib.d.ts declaration file will be installed by the way. This file contains various common JavaScript environment declarations that exist in the JavaScript runtime and DOM (Document Object Model).

6. function

   Declare function type inc = (num: number) => number

7. Callable and instantiable

   // 可调用
   interface ReturnStr{
    () : string;
   }
   declare const foo : ReturnStr
   const str = foo() // str 字符串
   // 内联注解
   const overload: {
    (foo: string): string;
    (foo: number): number;
   } = (foo: any) => foo
   // 可实例化
   interface NewAble {
    new (): string;
   }
   declare const newAble: NewAble;
   const foo = new newAble

8. Type assertion

   Ts can rewrite its inferred and analyzed types in any way, which is called type assertion.

   interface Foo{
     Bar : string
   }
   const f1 = {} as Foo;
   f1.bar = "1";
   const f2 = <Foo>{};
   f2.bar = "2";

9. Freshness

   Check literal type

   function hasName(some: { name: string }) {
     some.name = "name"; // 正确
     some.age = 12; // 错误
   }

10. Type protection

    typeof （typeof x === 'string'）

    instanceof (foo instanceof Foo)

    in Check whether the object has a corresponding attribute

11. readonly

    type Foo = {
      readonly bar: string;
    };
    const f: Foo = { bar: "x" };
    f.bar = "y"; // 错误，不可修改

12. Generic

    Constraints between class instance members, class methods, function parameters, and function return values.

13. never

    The never type is the bottom type in TypeScript. Used for a function that always throws an error or a function that always throws an error.

    The difference between never and void, void means that there is no type, and never means the type of value that never exists.

14. Exception handling

    try {
      throw new Error("err.");
    } catch (error) {
      console.log(error)
    } 

Coding style conventions

1. Use camelCase form to name variables and functions.
2. Use PascalCase form to name the class.
3. Use PascalCase format to name the interface.
4. Type aliases are named in PascalCase format.
5. The namespace is named in PascalCase format.
6. Enumerated types are named using PascalCase format.
7. For situations that need to be clearly indicated as unavailable, neither null nor undefined are recommended.

8. format

   tsfmt command format, use single quotes, spaces and two tabs, if you want to use extends or implements, it is recommended to use interface.

TS compilation principle

..... to be continued