From cf258953db0f11e54859d7010ddf1c5301787a3a Mon Sep 17 00:00:00 2001 From: uhyo Date: Wed, 3 Jul 2019 01:41:39 +0900 Subject: [PATCH] [classnames] improve types for `classnames/bind` and add types for `classnames/dedupe` (#36458) * enable classnames/bind usage without bind * add test for classnames/bind * add classnames/dedupe support * same default export trick for classnames/bind * add me to definition author * add dedupe.d.ts to files --- types/classnames/bind.d.ts | 12 ++++++++++-- types/classnames/classnames-tests.ts | 19 ++++++++++++++----- types/classnames/dedupe.d.ts | 5 +++++ types/classnames/index.d.ts | 7 ++----- types/classnames/tsconfig.json | 3 ++- types/classnames/types.d.ts | 8 ++++++-- 6 files changed, 39 insertions(+), 15 deletions(-) create mode 100644 types/classnames/dedupe.d.ts diff --git a/types/classnames/bind.d.ts b/types/classnames/bind.d.ts index 9befbabd4c..d5c3bb6d52 100644 --- a/types/classnames/bind.d.ts +++ b/types/classnames/bind.d.ts @@ -1,3 +1,11 @@ -import classNames = require('./index'); +import { ClassNamesFn } from './types'; -export function bind(styles: Record): typeof classNames; +interface ClassNamesBind extends ClassNamesFn { + bind(styles: Record): ClassNamesFn; +} +type ClassNamesBindExport = ClassNamesBind & { + default: ClassNamesBind; +}; +declare const classNamesBind: ClassNamesBindExport; + +export = classNamesBind; diff --git a/types/classnames/classnames-tests.ts b/types/classnames/classnames-tests.ts index 55b801eb40..4b090318b3 100644 --- a/types/classnames/classnames-tests.ts +++ b/types/classnames/classnames-tests.ts @@ -1,6 +1,8 @@ import classNames = require('classnames'); import * as classNames2 from 'classnames'; import * as cn from 'classnames/bind'; +import classNamesDedupe = require('classnames/dedupe'); +import * as classNamesDedupe2 from 'classnames/dedupe'; classNames2('foo', 'bar'); // => 'foo bar' @@ -17,7 +19,7 @@ classNames(['foo', 'bar', 'baz']); // => 'foo bar baz' classNames([1, 2, 3]); // => '1 2 3' classNames([{ foo: true, bar: false }, { baz: true }]); // => 'foo baz' -classNames(["foo", ["bar", {baz: true}]]); // => 'foo bar baz' +classNames(['foo', ['bar', { baz: true }]]); // => 'foo bar baz' // falsey values are just ignored classNames(null, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' @@ -28,9 +30,9 @@ classNames(null, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' // Support for CSS-Modules. Example from README: // https://github.com/JedWatson/classnames/blob/master/README.md#alternate-bind-version-for-css-modules const styles = { - foo: 'abc', - bar: 'def', - baz: 'xyz' + foo: 'abc', + bar: 'def', + baz: 'xyz', }; const cx = cn.bind(styles); @@ -40,4 +42,11 @@ const className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz" cx(null, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' // true is just ignored -cx(true || "foo"); +cx(true || 'foo'); + +// export of classnames/bind can be used the same as normal classnames +cn(null, 'bar', undefined, 1, ['foo', 'bar', { baz: true }], ''); + +// classnames/dedupe has same usage as normal classnames +classNamesDedupe('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' +classNamesDedupe2('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' diff --git a/types/classnames/dedupe.d.ts b/types/classnames/dedupe.d.ts new file mode 100644 index 0000000000..9be72db877 --- /dev/null +++ b/types/classnames/dedupe.d.ts @@ -0,0 +1,5 @@ +import { ClassNamesExport } from './types'; + +declare const classNamesDedupe: ClassNamesExport; + +export = classNamesDedupe; diff --git a/types/classnames/index.d.ts b/types/classnames/index.d.ts index 8a212daa62..dd354875d7 100644 --- a/types/classnames/index.d.ts +++ b/types/classnames/index.d.ts @@ -7,14 +7,11 @@ // Michal Adamczyk // Marvin Hagemeister // Josh McCullough +// uhyo // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -import { ClassValue } from './types'; - -type ClassNamesFn = (...classes: ClassValue[]) => string; - -type ClassNamesExport = ClassNamesFn & { default: ClassNamesFn }; +import { ClassValue, ClassNamesExport } from './types'; declare const classNames: ClassNamesExport; diff --git a/types/classnames/tsconfig.json b/types/classnames/tsconfig.json index f07424646f..2a5b04bda4 100644 --- a/types/classnames/tsconfig.json +++ b/types/classnames/tsconfig.json @@ -19,7 +19,8 @@ "files": [ "index.d.ts", "bind.d.ts", + "dedupe.d.ts", "types.d.ts", "classnames-tests.ts" ] -} \ No newline at end of file +} diff --git a/types/classnames/types.d.ts b/types/classnames/types.d.ts index 9e35446233..11625e342d 100644 --- a/types/classnames/types.d.ts +++ b/types/classnames/types.d.ts @@ -1,9 +1,13 @@ // This is the only way I found to break circular references between ClassArray and ClassValue // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540 -export interface ClassArray extends Array { } // tslint:disable-line no-empty-interface +export interface ClassArray extends Array {} // tslint:disable-line no-empty-interface export interface ClassDictionary { - [id: string]: any; + [id: string]: any; } export type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean; + +export type ClassNamesFn = (...classes: ClassValue[]) => string; + +export type ClassNamesExport = ClassNamesFn & { default: ClassNamesFn };