CODEWITHSUNDEEP
reactjstypescriptreact-native
Quang Khải Đàm
Quang Khải Đàm

Reputation: 633

What is the meaning of this code in React Native and Typescript?

I have read some codes of my company's project and see something strange and do not know what it is.

What is the meaning of the last '&' and an object { invalidMail?: string, ... }?

const InputValidation: React.ForwardRefExoticComponent<
  React.PropsWithoutRef<IInputValidationProps> & React.RefAttributes<TextInput>
> & {
  invalidMail?: string;
  invalidNumber?: string;
  invalidPhone?: string;
  isRequired?: string;
  notPositiveNumber?: string;
  lessThanMinLength?: string;
} = forwardRef<TextInput, IInputValidationProps>((props, ref) => { ... }

InputValidation.invalidMail = 'Mail không hợp lệ';
InputValidation.invalidNumber = 'Số không hợp lệ';
InputValidation.invalidPhone = 'Số điện thoại không hợp lệ';
InputValidation.isRequired = 'Bắt buộc';
InputValidation.notPositiveNumber = 'Không nhận giá trị âm';
InputValidation.lessThanMinLength = 'Số kí tự tối thiểu ';

Does anybody know how this code affect InputValidation component? Thank in advance.

Upvotes: 0

Views: 72

Answers (1)

St&#233;phane Veyret
St&#233;phane Veyret

Reputation: 1971

This is a Typescript intersection type. It means that InputValidation contains all properties and méthods of ForwardRefExoticComponent and all the properties defined in the literal: invalidMail, invalidNumber, etc.

Note anyway that these properties are indicated as optional, so they actually may be present or not.

Just for vocabulary, the literal after the & is not an object, but a type. As you can see, it is not defined as { key: value } but { key: type }.

Upvotes: 2

Related Questions