速通TS基本语法

概念：

TS: JavaScript with syntax for types

一种带类型语法的JS，为解决原生JS弱类型安全问题，提高结果可信度和代码维护性，便于模块化开发。

安装：

npm install -g typescript

速通基本语法：

参考官网文档：TypeScript 手册 (nodejs.cn)

体验：原js因为类型问题，在console输出的结果很怪（这些原本不该成立或者应该报错更为合理）：

""==0  // true
x = true
1<x<3  // true
4/[]   // Infinity

TS语法：

• 类型注解

  // 变量注释
  let myName: string = "Alice";
  // 函数入参，返回值注释
  function getUserName(userId: number) :string{
      return `name_${userId}`
  }
  

• 静态类型检测

  const message = "hello!";
   message(); // Error Type 'String' has no call signatures.
  

• 非异常故障

  const user = {}
  user.name // js环境 undefined ; ts环境报错:Property 'location' does not exist on type ...
  

• 对象类型

  // pt为x,y的字典对象
  function printCoord(pt: { x: number; y: number }) {
    console.log("x value is " + pt.x);
    console.log("y value is " + pt.y);
  }
  printCoord({ x: 3, y: 7 });
  
  // 可选的对象类型,加上? 标识
  function printName(obj: { a: string; b?: string }) {
    // ...
  }
  // Both OK
  printName({ a: "Bob" });
  printName({ a: "Alice", b: "Alisson" });
  

  如果两个对象具有相同的形状，则认为它们属于同一类型

  interface Point {
  x: number;
  y: number;
  }
  
  function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
  }
  
  // 这里point不需要定义为Point类型也可使用
  const point = { x: 12, y: 26 };
  logPoint(point);
  
  # 类对象的形式
  class VirtualPoint {
  x: number;
  y: number;
  
  constructor(x: number, y: number) {
      this.x = x;
      this.y = y;
  }
  }
  
  const newVPoint = new VirtualPoint(13, 56);
  logPoint(newVPoint); // logs "13, 56"
  

• 自动推断类型：

  let a = 'ss'
  

• 类型别名 (自己组合一个类型)

  type User = {
      name: string;
      id: number;
  };
  const user:User = {name:"Name",id:0};
  // 扩展类型用交叉扩展
  type SuperUser = User & {
      isSuperUser: boolean;
  }
   const user2:SuperUser = {name:"Name",id:0, isSuperUser:true};
  

• 接口类型
  和类型别名很像，但是接口类型可以被继承后，新增其他属性，类别不行。

  interface User {
  name: string;
  id: number;
  };
  const user:User = {name:"Name",id:0};
  // 扩展属性通过继承
  interface SuperUser extends User{
  isSuperUser: boolean;
  }
  const user:SuperUser = {name:"Name",id:0,isSuperUser:true};
  

• 字面类型（可做出参数枚举效果）

  // 限制alignment只能传入"left","right","center"
    function printText(s: string, alignment: "left" | "right" | "center") {
    // ...
    }
    printText("Hello, world", "left");
  
  

• 枚举类型

  enum Color {Red, Green, Blue};  
  let c: Color = Color.Green;
  

• 组合类型：

1. 联合类型

   // obj参数可以接受 string或者string数组
   function getLength(obj: string | string[]) {
     return obj.length;
   }
   

2. 泛型：

   为类型提供变量

   type StringArray = Array<string>;
   type NumberArray = Array<number>;
   type ObjectWithNameArray = Array<{ name: string }>;
   

• 类

  class Greeter {  
    greeting: string;  
    constructor(message: string) {  
      this.greeting = message;  
    }  
    greet() {  
      return "Hello, " + this.greeting;  
    }  
  }  
  let greeter = new Greeter("world");
  

• 泛型（Generics)
  泛型允许你定义组件时，不具体指定组件工作的具体类型，而是在组件被使用的时候才指定。

  function identity<T>(arg: T): T {  
    return arg;  
  }  
    
  let output = identity<string>("myString");  
  let outputNum = identity<number>(42);