Six new types added by typeScripy

Six new types added by typeScripy

1. Tuples

Tuples can be seen as an extension of an array, which represents an array with a known number and type of elements. To be precise, the type of the element at each position in the array is known. Let's look at an example:

let tuple: [string, number, string, boolean]
tuple = ['', 100, '', false]
tuple[1] = 200
tuple[3] = true

// 在 2.6 版本之前,TypeScript 对于元组长度的校验和 2.6 之后的版本有所不同,我们来看下面的例子,前后版本对于该情况的处理:
// tuple = ['', 100, '', false, '']
// 不能将类型“[string, number, string, false, string]”分配给类型“[string, number, string, boolean]”。
// 属性“length”的类型不兼容。
//  不能将类型“5”分配给类型“4”。

2. Enumeration

Enumeration enum types are more common in languages ​​such as C++. TypeScript adds enumeration types on the basis of ES original types, so that we can also assign names to a group of values ​​in TypeScript, which is more friendly to developers. For example, if we want to define a set of roles, and each role is represented by a number, we can use enumerated types to define:

enum Roles {
  SUPER_ADMIN,
  ADMIN = 100,
  USER
}

console.log(Roles[1]) // ADMIN
console.log(Roles.ADMIN) // 1

3.any

JavaScript types are flexible, and programs are sometimes changeable. Sometimes, when we are writing code, we can't clearly know what type a value is. At this time, we need to use the any type, that is, any type. Let's look at an example:

let value: any
value = 'str'
value = false
value = null
value = undefined
value = 100
console.log(value.name)
console.log(value.toFixed())
console.log(value.length)

// 上面这些语句都不会报错,因为 value 是 any 类型,所以后面三个操作都有合法的情况,
// 当 value 是一个对象时,访问 name 属性是没问题的;当 value 是数值类型的时候,
// 调用它的 toFixed 方法没问题;当 value 是字符串或数组时获取它的 length 属性是没问题的。

4.unknown

let un: unknown
un = 'str'
un = false
un = null
un = undefined
un = 100

// console.log(un.name) // 对象的类型为 "unknown"。
// console.log(un.toFixed())
// console.log(un.length)

// 而当你指定值为 unknown 类型的时候,如果没有通过基于控制流的类型断言来缩小范围的话,
// 是不能对它进行任何操作的,unknown 类型的值不是可以随便操作的。

5.void

The opposite of void and any, any means any type, and void means that there is no arbitrary type, that is, no type. This is used when we define a function, and the function has no return value:
Variables of type void can only be assigned values ​​of undefined and null, other types cannot be assigned to variables of type void

const voidFun = (text: string): void => {
  console.log(text)
}
// 这个函数没有返回任何的值,所以它的返回类型为 void。

6.never

The never type refers to the type of values ​​that never exist. It is the return value type of a function expression that always throws an exception or never returns a value.
// When a variable is protected by a never-true type (below The chapter will introduce in detail) when constrained, the variable is also of type never.

const errorFunc = (message: string): never => {
  throw new Error(message)
}

const infiniteFunc = (): never => {
  while (true) {
    console.log(100)
  }
}

Cross type (actually is the relationship with)

const merge = <T, U>(arg1: T, arg2: U): T & U => {
  let res = {} as T & U // as 语法 这里指定返回值的类型兼备 T 和 U 两个类型变量代表的类型的特点
  // let res = <T & U>{}; // 尖括号语法
  res = Object.assign(arg1, arg2) // 这里使用 Object.assign 方法,返回一个合并后的对象;
  // 关于该方法,请在例子下面补充中学习
  return res
}
const info1 = {
  name: 'lison'
}
const info2 = {
  age: 18
}
const lisonInfo = merge(info1, info2)

console.log(lisonInfo.name)
// console.log(lisonInfo.address) // error 类型“{ name: string; } & { age: number; }”上不存在属性“address”

// 可以看到,传入的两个参数分别是带有属性 name 和 age 的两个对象,
// 所以它俩的交叉类型要求返回的对象既有 name 属性又有 age 属性。

Union type (actually an OR relationship)

The joint type was mentioned several times in the previous class, let's take a look now. The union type is actually a combination of several types, but unlike the cross type, the union type requires as long as it conforms to any one of the union types, and it is defined by the | symbol. When our program is diversified and the element type is not unique, we use the combined type.

const getLength = (content: string | number): number => {
  if (typeof content === 'string') {
    return content.length
  } else {
    return content.toString().length
  }
}
console.log(getLength('abc')) // 3
console.log(getLength(123)) // 3

Guess you like

Origin blog.csdn.net/qq_39953537/article/details/102685475