TS学习笔记（四）

1. 类型缩小(联合类型)

对变量进行类型缩小，除了使用as断言外，还可以使用if else（switch也行）。如下

function printId(
  id:number|string
) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

类型缩小是TS处理联合类型的标准方法（说明处理联合类型时，经常需要类型缩小），凡是遇到可能为多种类型的场合，都需要先缩小类型，再进行处理。

 

2.交叉类型

指的是多个类型组成一个新类型，&。其实就是逻辑并且的意思，都要包含才行。

let x:number&string;

上面事例中，变量x同时是数值和字符串，这当然是不可能的，所以ts会认为x的类型实际上是never。

 

3.typeof运算符

js里面，typeof 运算符只可能返回八种结果，而且都是字符串。

而ts里面，它的操作数依然是一个值，但是返回的不是字符串，而是该值的类型。

它们两个的一个重要区别是，编译后，前者会保留，后者会被全部删除。(type类型别名也是一样，会被全部删除)

 

4. 数组

ts的数组有一个根本特征：所有成员的类型必须相同。

数组类型声明后，成员数量是不限制的，任意输了的成员都可以，也可以是空数组。

 

5. 元组

元组是ts特有的数据类型。它表示成员类型可以自由设置的数组。

由于成员类型可以不一样，所以元组必须明确声明每个成员的类型。

const s:[string, string, boolean] = ['a', 'b', true];

元组类型的写法与数组有一个重大差异。数组的成员类型写在方括号外卖（number[]），元组的类型写在方括号里面（[number]）

由于需要声明每个成员的类型，所以大多数情况下，元组的成员数量是有限的，从类型声明就可以明确知道，元组包含多少个成员，越界的成员会报错。

 

 

只读元组是元组的父类型

 

 6.symbol

Symbol值不存在字面量，

 

7. 函数类型

函数的实际参数个数，可以少于类型指定的参数个数，但是不能多于，即ts允许省略参数。

let myFunc:(a:number,b:number) => number;

myFunc = (a:number) => a;  // 正确

myFunc = (a:number,b:number,c:number)=> a+b+c // 报错

这是因为js函数在声明时往往有多余的参数，实际使用可以只传入一部分参数。比如,forEach的参数是一个函数，默认有三个参数（item,index,array）=>void，实际往往只使用第一个参数。因此，ts允许传入的参数不足。

函数的类型声明还有一种对象的写法。这种写法非常适合一种场景：函数本身存在对象,如下。

let foo:{
    (x:number):void;
    version:string
}

function f(x:number) {
  console.log(x);
}

f.version = '1.0';

 

8.Function类型

任何函数都属于这个类型，Function类型的函数可以接收任意数量的参数，每个参数的类型都是any，返回值的类型也是any，代表没有任何约束。牛逼！以后不知道函数的类型怎么声明，就用它。

 

9.可选参数

如果函数的某个参数可以省略，则在参数名后面加问号表示。

参数名带有问号，表示该参数的类型实际上是原始类型 | undefined，

function f(x?:number){
    return x  
}
f()   // 正确
f(undefined)  // 正确

上面示例中，参数x是可选的，等同于说x可以赋值为undefined。

但是反过来就不成立，类型显示设为undefined的参数，就不能省略。

function f(x:number|undefined) {
  return x;
}

f() // 报错

函数的可选参数只能在参数列表的尾部，跟在必选参数的后面，放在必选参数前面会报错。

如果一个变量要套用另一个函数类型，有一个小技巧，就是使用typeof 运算符

 

function add(
  x:number,
  y:number
) {
  return x + y;
}

const myAdd:typeof add = function (x, y) {
  return x + y;
}

 

10. 函数参数默认值

设有默认值的参数，如果传入undefined，也会触发默认值

function f(x = 456) {
  return x;
}

f(undefined) // 456

 

11. void类型

void类型可以返回undefined或null，返回其他值会报错。

js规定，如果函数没有返回值，就等同于返回undefined。