TypeScript学习笔记（二）

1、TypeScript的类型注解和类型推断

1. 类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。可以为变量、函数参数、函数返回值等添加类型注解。

  let num1: number = 12; // 该变量为number类型
  let num2: number = 20;

  function sum(a: number, b: number): number{ // 该函数接收两个number类型的参数，返回一个number类型的值
    return a + b; 
  }

  console.log(sum(num1, num2));

2. 类型推断

当未给变量添加类型注解时，TypeScript会自动的去尝试分析变量的类型。
例如下面这行代码，虽然未给变量添加类型注解，但当鼠标放上去时，ts自动将其添加为number类型。

2、TypeScript的数组类型定义

1. 简单数组类型

  let numArr: number[] = [1, 2, 3, 4]; // number数组
  let strArr: string[] = ['a', 'b', 'c']; // string数组

2. 复合数组类型

当一个数组有多种数据类型时:

  let arr: (number | string)[] = ['a', 'b', 1, 4, 'c']; // 既有number类型，又有string类型的数组
  let arr2: any[] = ['a', 1, null, undefined, {a: 1}]; // 任意类型的数组

3. 对象数组类型

当一个数组每一项都为一个对象时：

  let xjjArr: { name: string, age: number }[] = [
    { name: "小红", age: 18 },
    { name: "小兰", age: 20 },
  ];

这样定义比较麻烦，可以使用类型别名来简化：

  type Lady = { name: string, age: number }; // 用type来定义类型别名
  let xjjArr: Lady[] = [
    { name: "小红", age: 18 },
    { name: "小兰", age: 20 },
  ];

4. 类 数组类型

  class Lady {
    name: string;
    age: number;
  }

  let xjjArr: Lady[] = [
    { name: "小红", age: 18 },
    { name: "小兰", age: 20 },
  ];

3、TypeScript的函数参数和返回类型定义

1. 无返回值

如果一个函数没有返回值的话，我们可以给它加void类型注解，表示没有任何返回值。

  function say(): void{ // 该函数没有返回值
    console.log("hello world"); 
  }

2. 简单类型

我们可以给函数参数及返回值加上类型注释，提高程序的健壮性。

  function sum(a: number, b: number): number{ // 该函数接收两个number类型的参数，返回一个number类型的值
    return a + b; 
  }

3.参数为对象解构时

当参数为对象解构时，写法会稍微麻烦些

  function sum({num1, num2}: {num1: number, num2: number}): number{
    return num1 + num2;
  }
  console.log(sum({num1: 123, num2: 456}));