2020你应该知道的TypeScript学习路线【联合类型-接口】-轻识

公众号：前端微服务
GitHub：https://github.com/yongbolu
作者：子奕

一、概述

TypeScript中除了es5中的string、boolean、number、array、null和undefined之外还多了元组类型tuple、枚举类型enum、任意类型any、void类型、never类型，除此之外还有一种特殊的类型联合类型，学过Java的小伙伴应该并不陌生接口这个名词，今天小编带着大家认识下Typescript中的接口是什么样的，学完这个是不是都对后端的Java又有了更近一步认识，距离全栈开发又近了一步，如果大家觉得有帮助，记得给小编点个赞，如果想获取更多干货请关注前端微服务公众号，不定期为大家带来干货。

二、联合类型（Union Types）

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值（注意：只能赋值指定的类型，如果赋值其它类型就会报错）用一句话概括就是联合类型表示取值可以为多种类型中的一种。

三、创建联合类型的语法格式

Type1|Type2|Type3

四、使用案例

4.1 声明一个联合类型

/**
 * 联合类型
 */
let type:string|number 
type = 12 
console.log("数字为 "+ type) 
type = "xunzhaotech" 
console.log("字符串为 " + type)

//错误代码
type = true
console.log("布尔类型 " + type)

4.2 将联合类型作为函数参数使用

/**
 * 联合类型参数
 */
function getName(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else {  
        		let i:number;
                for(i = 0;i                console.log(name[i])
                } 
        } 
} 
getName("xunzhaotech") 
console.log("输出数组参数....") 
getName(["张三","李四"])

4.3 联合类型数组

/**
 * 联合类型数组
 */
let arr:number[]|string[]; 
let i:number; 
arr = [1,2,4] 
console.log("**数字数组**")  
 
for(i = 0;i   console.log(arr[i]) 
}  
 
arr = ["张三","李四"] 
console.log("**字符串数组**")  
 
for(i = 0;i   console.log(arr[i]) 
}

4.4 接口

关键词interface来定义一个接口

interface Person {
    name: string
}
function getPerson(person:Person): void {
    console.log(person.name);
}
let obj = { age: 10, name: 'xunzhaotech' };
getPerson(obj); // xunzhaotech

4.4.1 可选属性

interface Person {
    name: string;
    age?: string;
}
function getPerson(person:Person): void {
    console.log(person.name);
}
let obj = { name: 'xunzhaotech' };
getPerson(obj); // xunzhaotech

4.4.2 只读属性

拥有只读属性不可改变它的值

interface Iperson {
    readonly name: string;
    age: number;
}
let obj: Person = { name: 'zunzhaotech', age: 29 };
obj.name = 'xunzhaotech' // error

4.4.3 函数类型

interface Person {
    (name: string, age: number): boolean;
}
let getPerson:Person = (name, age) => {
    return age > 20;
}
getPerson('xunzhaotech', 29)

4.4.4 常用的Object定义

interface Person {
    name: string;
    age?: number|string;
}
let list: Person[] = [
 {
    name: '王麻子' 
 },
 {
    name: '张三',
    age: 29
 },
 {
    name: '李四',
    age: '29'
 }
]

五、关注我们

点击下方关注我???