Typescript进阶类型-简化基础

typescript进阶类型主要是有联合类型、交叉类型、类型断言以及类型断言接口，在开发场景中使用这些类型是比较常见的。接下来，讲简化如何使用这些类型，如下：

1.联合类型

这个联合类型的概念，使用比较简单，一般通过管道(|)设置多种类型,例如number｜string｜boolean等。返回类型结果就要根据设置过多种类型。

typescript 复制代码

// 联合类型
let phone:number | string = 19231233 
// OR
let phone:number | string = '175232323'

以上的就是有两种类型为字符串类型和数字类型，返回类型可以是数字也可以是字符串。

typescript 复制代码

const fn = (something:number|boolean):boolean =>{
     return !!something
 }
 console.log(fn(1))

参数返回类型有两个类型：数字和布尔的类型，当被调用的时候传参数为数字，且返回类型是布尔类型。

typescript 复制代码

let arr:number[]|string[]
arr = [1,2,3]
// OR
arr = ['数字','字符串','布尔']

联合类型也可以写数组以及类型。

2.交叉类型

交叉类型就是多种类型合并为一个类型，简称说并集。交叉类型和联合类型很类似，但是区别在于联合类型一般当返回类型的时候根据变量名设置多个指定类型去匹配；交叉类型支持把每个类型称为合并类型。

typescript 复制代码

interface Info{
    name:string,
    age:number
}
interface Sex{
    sex:string
}
 // 类似extend继承
 const result = (people:Info & Sex):void=>{
     console.log(people)
 }
 result({
     name:'小斌',
     age:18,
     sex:'男'
 })

交叉类型接口，和extend继承差不多一样的，通过交叉&两个不同的接口合并为一个接口，说明扩展性很强。

3.类型断言

类型断言就是可以通过手动指定一个类型，同时要告诉编译器为了推断根据手动指定的类型，使用类型断言语法：值 as 类型。 (1)非类型断言

typescript 复制代码

 let fn = function(num:string|number):void {
     console.log(num.length)
 }
 fn('1234')

报错，length不存在，是因为传一个字符串类型，所以并不是一个数字类型。

(2)类型断言

typescript 复制代码

 let fn = function(num:string|number):void {
    console.log((num as string).length)
 }
 fn('123534')

通过类型断言，告诉编译器指定类型为数字类型。

4.类型断言接口

typescript 复制代码

 interface A{
    name:string
 }
 interface B{
     build:string
 }
 const fn = (type:A | B):string=>{
     return type.name
 }

这样写上有警告的应为B的接口上面是没有定义这个成员属性。

typescript 复制代码

interface A {
    name: string
}
interface B {
    build: string
}
const fn = (type: A | B): string => {
    return (type as A).name
}

可以使用类型断言来推断他传入的是A接口的值。

需要注意的是，类型断言只能够欺骗typescript编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误。

5.深入类型断言

(1)any

typescript 复制代码

  // 使用any临时断言
  window.abc = 123

这样写会报错因为window没有abc这个变量名。

使用类型断言如下：

typescript 复制代码

  （window as any).abc = 123

可以使用any临时断言在any类型的变量上，访问任何属性都是允许的。

(2)const

typescript 复制代码

   const abc:string = 'const'
   abc = 'tutu'

这样写const一旦声明之后赋值是无法修改的。

(3)数组

typescript 复制代码

let a1 = [10, 20] as const;
const a2 = [10, 20];

a1.unshift(30); // 错误，此时意见断言字面量为[10,20],数据是没办法修改的。

a2.unshift(40); //通过，是没有修改的指针。