npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

type-enum

v2.2.0

Published

在 ts/js 获得更强的enum类型提示

Downloads

28

Readme

ts-enum

DEMO

动机

ts/js 的前端中后台项目中存在大量的枚举值,需要在各种地方引用!
因为js没有类型系统 tsenum类型没有很强大的api,导致在很多情况下在各业务代码之间引用枚举时不知道此枚举的期望值是多少,可读性和CR体验很差

做了什么

基于业务场景,锻炼了类型体操

  • 借助 ts 类型系统,获得枚举值的 IDE 提示
  • 改善开发体验
  • 工具类库

安装

$ npm install type-enum

V2 版本

枚举值定义

约定: 枚举常量为二维数组([ label, value, code ]):

[
  ["未开始", 0, "UNDO"],
  ["进行中", 1, "DOING"],
  ["已结束", 2, "DONE"]
]

需要使用借助 typescript 的 const 断言const assertions
所以在 js 和 ts 中构建 enum 有一点差异

V2 版本

>= 2.0 版本保留了之前 TsEnum 的默认导出之外还新增了两个函数的导出:

  • createTsEnum 函数的入参与之前的TsEnum类构造器参数保持一致,返回值的对象行为业余 TsEnum类示例保持一致
  • createCustomEnum 函数的支持自定义枚举的 label,会根据传入的labels顺序解析常量的二维数组,并且生成相应的get方法
import { createTsEnum, createCustomEnum } from 'type-enum'

/**
 * 默认标签 [label, value, key]
 */
const workStatusEnum = createTsEnum([
  ['未开始', 0, 'UNDO'],
  ['进行中', 1, 'DOING'],
  ['已结束', 2, 'DONE'],
] as const) // 必须使用 as const !!

/**
 * 自定义标签 ['label', 'value', 'key', 'isValid']
 */
const customWorkStatusEnum = createCustomEnum(
  [
    [0, '未开始', 'UNDO', true],
    [1, '进行中', 'DOING', false],
    [2, '已结束', 'DONE', true],
  ] as const,
  ['label', 'value', 'key', 'isValid'] as const,
) // 必须使用 as const !!

V1 版本

in typescript

import { TsEnum } from 'type-enum'
/**
 * 枚举值定义
 * @param {array[]} 二维数组,[label, value, key]
 */
const workStatusEnum = new TsEnum([
  ['未开始', 0, 'UNDO'],
  ['进行中', 1, 'DOING'],
  ['已结束', 2, 'DONE'],
] as const) // 必须使用 as const !!

in javascript

最新的 typescript + vscode 已经支持采用 jsdoc 的方式 支持 const assertions
vs-code >= 1.63 typescript >= 4.5.2

import { TsEnum } from 'type-enum'

const WORK_STATUS = /** @type {const} */ ([
  ['未开始', 0, 'UNDO'],
  ['进行中', 1, 'DOING'],
  ['已结束', 2, 'DONE'],
])
/**
 * 枚举值定义
 * @param {array[]} 二维数组,[label, value, key]
 */
const workStatusEnum = new TsEnum(WORK_STATUS) // 必须使用 as const !!

在旧版本中可以采用 .d.ts 补充类型提示

// src/enum/enum.js
export const WORK_STATUS = [
  ["未开始", 0, "UNDO"],
  ["进行中", 1, "DOING"],
  ["已结束", 2, "DONE"],
];

// src/enum/enum.d.ts
export const WORK_STATUS = [
  ["未开始", 0, "UNDO"],
  ["进行中", 1, "DOING"],
  ["已结束", 2, "DONE"],
] as const;

// src/enum/index.js
import { TsEnum } from 'type-enum'
import { WORK_STATUS } from './enum'

const workStatusEnum = new TsEnum(WORK_STATUS)
/**
 * 下拉框数据:
 * 可以推导  options 类型
 *@type {[ { "label": "未开始", "value": "0" }, { "label": "进行中", "value": "1" }, { "label": "已结束", "value": "2" } ]}
 */
const options = workStatusEnum.options()

// 通过 key 获取 value:
const codes = workStatusEnum.getCodes()

codes.DOING.label // IDE 自动推导出 label is '进行中'
codes.DOING.value // IDE 自动推导出 value is 1