TypeScript

【web前端】TypeScript 类型约束

微信扫一扫,分享到朋友圈

【web前端】TypeScript 类型约束
收藏 0 0

1、原始类型约束

在ES5之前的版本,原始数据类型包含string、number、boolean、null、undefined五种,ES6之后新添了一种可作为唯一标识的基本数据类型Symbol,我们来看一下,这些原始类型在TypeScript中如何进行类型约束。

/**
 * 6种原始数据类型
 * 1、string - 字符串
 * 2、number - 数值
 * 3、boolean - 布尔
 * 4、null - 空值
 * 5、undefined - 未知
 * 6、symbol - 唯一值
 */ 

// 字符串类型约束
const a: string = 'foobar'

// 数值类型约束、包含NaN Infinity(无穷大)
const b: number = 100 // NaN Infinity

// 布尔类型约束
const c: boolean = true // false

// 在非严格模式(strictNullChecks)下,
// string, number, boolean 都可以为空
// const d: string = null
// const d: number = null
// const d: boolean = null

// 其它特殊类型
const e: void = undefined
const f: null = null
const g: undefined = undefined

// Symbol 是 ES2015 标准中定义的成员,
// 使用它的前提是必须确保有对应的 ES2015 标准库引用
// 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
const h: symbol = Symbol()

// Promise
// const error: string = 100

2、Object类型约束

// Object 类型约束

export {} // 确保跟其它示例没有成员冲突

// object 类型是指除了原始类型以外的其它类型
const foo: object = function () {} // [] // {}

// 如果需要明确限制对象类型,则应该使用这种类型对象字面量的语法,或者是「接口」
const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }

3、数组类型约束

// 数组类型类型约束

export {} // 确保跟其它示例没有成员冲突

// 数组类型的两种表示方式

const arr1: Array<number> = [1, 2, 3]

const arr2: number[] = [1, 2, 3]

// 案例 -----------------------

// 如果是 JS,需要判断是不是每个成员都是数字
// 使用 TS,类型有保障,不用添加类型判断
function sum (...args: number[]) {
  return args.reduce((prev, current) => prev + current, 0)
}

sum(1, 2, 3) // => 6vv

4、元组类型约束

// 元组(Tuple)

export {} // 确保跟其它示例没有成员冲突

const tuple: [number, string] = [18, 'zce']

// const age = tuple[0]
// const name = tuple[1]

const [age, name] = tuple

// ---------------------

const entries: [string, number][] = Object.entries({
  foo: 123,
  bar: 456
})

const [key, value] = entries[0]
// key => foo, value => 123

5、枚举类型约束

// 枚举(Enum)

export {} // 确保跟其它示例没有成员冲突

// 用对象模拟枚举
// const PostStatus = {
//   Draft: 0,
//   Unpublished: 1,
//   Published: 2
// }

// 标准的数字枚举
// enum PostStatus {
//   Draft = 0,
//   Unpublished = 1,
//   Published = 2
// }

// 数字枚举,枚举值自动基于前一个值自增
// enum PostStatus {
//   Draft = 6,
//   Unpublished, // => 7
//   Published // => 8
// }

// 字符串枚举
// enum PostStatus {
//   Draft = 'aaa',
//   Unpublished = 'bbb',
//   Published = 'ccc'
// }

// 常量枚举,不会侵入编译结果,默认从0开始自增
const enum PostStatus {
  Draft,  // 默认为0
  Unpublished, // 默认为1
  Published   // 默认为2
}

const post = {
  title: 'Hello TypeScript',
  content: 'TypeScript is a typed superset of JavaScript.',
  status: PostStatus.Draft // 3 // 1 // 0
}

// PostStatus[0] // => Draft

6、函数类型约束

函数类型约束主要表现在函数的参数和返回值上。

// 函数类型

export {} // 确保跟其它示例没有成员冲突

// 约定函数参数的数据类型a、b、rest,函数返回类型为string
function func1 (a: number, b: number = 10, ...rest: number[]): string {
  return 'func1'
}

func1(100, 200)

func1(100)

func1(100, 200, 300)

// -----------------------------------------

const func2: (a: number, b: number) => string = function (a: number, b: number): string {
  return 'func2'
}

7、any类型约束

// 任意类型(弱类型)

export {} // 确保跟其它示例没有成员冲突

function stringify (value: any) {
  return JSON.stringify(value)
}

stringify('string')

stringify(100)

stringify(true)

let foo: any = 'string'

foo = 100

foo.bar()

// any 类型是不安全的

8、类型断言

// 类型断言

export {} // 确保跟其它示例没有成员冲突

// 假定这个 nums 来自一个明确的接口
const nums = [110, 120, 119, 112]

const res = nums.find(i => i > 0)

// const square = res * res

// 能够确定 res 最终一定是number,就可以通过以下两种方式,确定类型
const num1 = res as number

const num2 = <number>res // JSX 下不能使用

9、接口类型

// 接口

export {} // 确保跟其它示例没有成员冲突

interface Post {
  title: string
  content: string
}

function printPost (post: Post) {
  console.log(post.title)
  console.log(post.content)
}

printPost({
  title: 'Hello TypeScript',
 // 必须是string
  content: 'A javascript superset'  // 必须是string
})
为自己努力,为亲人拼搏,为幸福奋斗。
上一篇

JavaScript 中数组的常用方法

下一篇

【git】Git 拉取 GitLab 分支上的项目

你也可能喜欢

  • 暂无相关文章!

发表评论

插入图片

热评文章

  1. 抱歉,没有找到文章!

微信扫一扫

微信扫一扫

网站维护中....

网站被非法攻击,数据正在努力恢复中..........