Typescript基础3

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

这是typescript学习的系列课程，今天开启typescript的第3篇。

不多说废话，直接精简出最精华的部分给大家。

如果有朋友对于typescript的基础不是很了解的话，欢迎点击下面两篇文章跳转进行学习。

接前面两篇：

• Typescript基础一，这一篇介绍了如何执行typescript文件，以及类型注解的例子。
• Typescript基础二，这一篇介绍了typescript在函数中的一些基础使用。

接下来我们看一些稍复杂的知识点。

联合类型

当一个函数的入参可能是string、number或者undefiend的时候，这个时候就可以使用联合类型的方式去定义入参。在函数体内通过类型判断执行不同数据类型时的逻辑，这样就不会报错了。

例子如下：

function sayHello(value: string | number | undefined) {
  if (typeof value === 'string') {
    return value.length;
  } else if (typeof value === 'number') {
    return value.toFixed(3);
  } else if (typeof value === 'number') {
    return value;
  }
}

类型别名

比如上面使用到的联合类型，但是这个类型的定义可能会在几个地方都用到，这个时候建议使用类型别名的方式把他抽离出来，方便在不同的地方使用，一般使用关键字type定义。

例子如下:

// 定义一个Person类型的参数，在函数getCollect1和getCollect2中都会用到
type IPersontype = {
    name: string;
    age: number;
    hobby: string[]
}

function getCollect1(params: IPersontype){ ...... }
function getCollect2(params: IPersontype){ ...... }

在ts中，接口的定义跟别名的定义非常类型，我下面用接口的方法，定义一个跟尚敏IPersontype相同的，以达到相同的效果。

接口

接口的定义用关键字interface表示。

例子如下：

interface IPersonInterface = {
    name: string;
    age: number;
    hobby: string[]
}

function getCollect3(params: IPersonInterface){ ...... }
function getCollect4(params: IPersonInterface){ ...... }

通过执行以上的例子，发现效果跟类型别名的设置一模一样。那么接口和类型别名之间有什么区别呢?

类型别名和接口的区别

主要有以下四个不同的区别。

1、type的定义范围更广，可以定义普通类型，也可以定义对象；但是interface只能定义对象。
2、在定义对象的时候type只能定义一次，但是interface可以定义多次并且做合并。
3、type不支持继承，但是interface支持继承。
4、type不能被类实现，但是interface可以。

下面分别用几个例子演示一下上面的差别

例子1

// type方式
type num1 = number

// interface方式，这样会报错
interface num2 = number

例子2

// interface方式
interface Iperson = {
    name: string;
}
interface Iperson = {
    age: number;
    hobby: string[]
}

// => 以上相当于
interface Iperson = {
    name: string;
    age: number;
    hobby: string[]
}

例子3

interface IPerson {
  name: string
  age: number
}

interface IMySelf extends IPerson {
  hobby: string[]
}
const hero: IMySelf = {
  name: "雨来",
  age: 8,
  hobby: ['养牛', '放羊']
}

例子4

// 通过implements类的实现
class IMySelf implements IPerson {
    ......
}

ok，以上为今天Typescript联合类型、类型别名和接口的内容。

学如逆水行舟，不进则退。学习不求贪多，只求稳步的进步。