极简TypeScript教程--高级类型
传入给一个联合类型的值是非常简单的:只要保证是联合类型中的某一个类型的值即可,但是我们拿到这个值之后,我们应该如何使用它呢?在JavaScript开发中,函数是重要的组成部分,并且函数可以作为一等公民(可以作为参数,也可以作为返回值进行传递),我们可以编写函数类型的表达式(Function Type Expressions),来表示函数类型;联合类型是由两个或者多个其他类型组成的类型,表示可以是这
TypeScript的类型系统允许我们使用多种运算符,从现有类型中构建新类型
联合类型(Union Type)
联合类型是由两个或者多个其他类型组成的类型,表示可以是这些类型中的任何一个值,联合类型中的每一个类型被称之为联合成员
// id可以传number或者string类型
function printId(id: number | string) {
console.log(id)
}
printId(10)
printId("cloud")
传入给一个联合类型的值是非常简单的:只要保证是联合类型中的某一个类型的值即可,但是我们拿到这个值之后,我们应该如何使用它呢?因为它可能是任何一种类型,比如我们拿到的值可能是string或者number,我们就不能对其调用string上的一些方法
这时我们要使用缩小联合,TypeScript可以根据我们缩小的代码结构,推断出更加具体的类型
function printId(id: number | string) {
if (typeof id === 'number') {
console.log(id + 1) // 数字类型可以进行数学计算
} else {
console.log(id.toUpperCase()) // string类型可以调用string方法
}
}
类型别名
当我们想要重复使用对象类型和联合类型的时候,可以通过类型别名来简化操作
type ID = number | string
function printId(id: ID) {
console.log(id)
}
接口的声明
interface可以定义对象类型
interface Person {
name: string
age: number
}
let cloud: Person = {name: 'cloud', age: 18}
交叉类型
交叉类似表示需要满足多个类型的条件,交叉类型使用 & 符号
interface Person {
name: string
age: number
}
interface Run {
running: ()=> void
}
// NewType同时具备Person和Run接口的属性
type NewType = Person & Run
let cloud: NewType = {name: 'cloud', age: 18, running: () => {console.log('running')}}
函数类型
在JavaScript开发中,函数是重要的组成部分,并且函数可以作为一等公民(可以作为参数,也可以作为返回值进行传递),我们可以编写函数类型的表达式(Function Type Expressions),来表示函数类型;
// 定义函数类型,该函数接收两个number型参数,不返回值
type CalcFunc = (num1: number, num2: number) => void
function calc(fn: CalcFunc) {
console.log(fn(20, 30))
}
function sum(num1: number, num2: number) {
return num1 + num2
}
// 可以把函数名当做参数来传递
calc(sum)
默认参数
从ES6开始,JavaScript是支持默认参数的,TypeScript也是支持默认参数的:
function foo(x: number, y: number = 6) {
console.log(x, y)
}
// 不传y默认是6
foo(10)
剩余参数
从ES6开始,JavaScript也支持剩余参数,剩余参数语法允许我们将一个不定数量的参数放到一个数组中。
// 剩余参数类型为数组
function sum(...nums: number[]) {
console.log(nums)
}
sum(1, 2, 3)
更多推荐
所有评论(0)