Primer
In the previous article, we introduced the flexibility of JS and the ability of TS to "control" JS, so can TS retain the flexibility of the code while "managing" it?
from ?the use of
?The use of can greatly keep your code flexible and avoid xxx is not definedproblems. For example, for the menu component we talked about before, I hope that when each menu item is clicked, if the current menu has an "onClick" method bound to it, it will be executed when each menu item is clicked, otherwise it will be ignored, similar to this:
A better way is to use this onClickas an optional attribute of the Menu props:
export interface MenuProps {
onClick?: (selectIndex: string) => void
/**other props */
// ...
}In this way, when you need to handle onClick in a component, if this attribute may be undefined, Ts will prompt you:
In this way, you can focus on the business during development, and hand over xxx is not definedthe work that may not be processed to TS. Of course, the premise of all this is that you have a clear and accurate definition of your input parameters.
Unions using &implementing types, with Partialimplementing optional parameters
I mentioned in the last article 使用TS可以从定义入参的type和interface开始, and I also mentioned a question, how to ensure that the button component we write has native methods of all buttons such as onClick/onFocus, so that users can use it without learning costs? It’s too cumbersome to implement all of them. Of course, React has already prepared the native properties and methods of the button for us—— ButtonHTMLAttributes . Our custom buttonProps can be used as long as they contain all of them &. Of course, we definitely hope that the native properties added in this way are all ?optional properties, so that the code is more flexible and simple, just use it Partial:
interface BaseButtonProps {
/** 设置按钮样式 */
className?: string
/** 设置按钮禁用 */
disabled?: boolean
/** 设置按钮大小 */
size?: buttonSize
/** 设置按钮类型 */
btnType?: buttonType
}
// 帮助当前Button组件获取诸如onClick方法等Button的原生属性，方法
type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLElement>
// 将所有属性均变为可选的，通过Partial实现
export type ButtonProps = Partial<NativeButtonProps>In this way, when developers use it, it is exactly the same as the native button experience:
Use extendsinheritance of implementing interfaces, and Omitexclude by implementation
The example given just now introduced how to &realize the "inheritance" of the type . Are you curious, isn't inheritance extends ?
Of course, you can.
For example, if we want to develop an Input component, according to the idea mentioned above, we can inherit React's InputHTMLAttributes, which can be written like this:
type InputSize = 'lg' | 'sm'
export interface InputProps extends InputHTMLAttributes<HTMLElement> {
// 自定义属性
/**
* 设置input的size
*/
size?: InputSize;
}However, this code will report an error because there is a sizeInputHTMLAttributes attribute in . Of course, you can rename your custom attribute size , or use Omit to "exclude" this attribute, which is similar to requiring the use of the subclass's own attributes instead of inheriting the specific attributes of the parent class.
what good is inheritance
Some of the TS skills shared above start from the type limitation of input attributes in functions/pure functions, and then realize coding hints in code, error checking hints, etc. In fact, the output of a function/pure function can also be limited. That is through ReturnType. Many types, skills, you can also learn more through here .
The experience of using TS to develop code is to constantly fight against the type. This behavior is called: 类型体操. If you are interested in the implementation of these types, you can take a look here , and I hope that after these honing, you can shout out that sentence——
Coming towards us is the OpenTiny phalanx
&The /extends we introduced today has something to do with "inheritance". So, what's so good about inheritance?
The simplest benefit is that it can reduce your repetitive code. For example, in the button component mentioned above, there is no need to implement methods such as onClick and onFocus by inheriting React.ButtonHTMLAttributes. Of course, more broadly speaking, many complex components are also a combination of multiple simple components, so their properties must be simplified through inheritance. For example, an AutoComplete component is an Input component plus a Select component. Then its props may be like this:
Of course, you can also extract the public properties of many components, which may further simplify the code, similar to this design:
or this:
That's right, this is our TinyUI component library, the design concept of the Angular version. Now that TinyUI has been officially open source, you can learn more from here ~ Of course, you are also welcome to click a star, and welcome to search our little assistant on WeChat: opentiny-official, and interact with us more!