Rzutowanie na inny typ w Reacie

Czy jak przy przekazywaniu propsów do komponentu rzutuje jakiś props na inny typ to jest to dobra praktyka czy lepiej tego się wystrzegać?

Chodzi Ci o taki zapis w TypeScripcie?

<Component value={myValue as any} />
<Component value={myValue as MyType} />

To zależy w jaki sposób tego używasz.

Przy większości przypadków jest to raczej bez sensu, bo TypeScript nie zawsze sprawdza, czy rzutowana wartość jest w 100% poprawna z nowym typem i zależy to od konfiguracji pliku tsconfig.

Rzutowanie propsa na typ ma sens w niektorych przypadkach np masz propsa jakiegos wrappera ktory akceptuje 2 typy dla wartosci,
a w tym wrapperze masz juz typowe komponenty ktore reaguja na konkretny typ

{typeof props.value == 'string' &&
  <ComponentWithStringValue value={props.value as string} /> }
{typeof props.value == 'number' &&
  <ComponentWithNumberValue value={props.value as number} /> }
  
interface Props { //wrapper
    value:string|number; 
}

Ale zasadniczo bardzo rzadko cos takiego sie stosuje,,,

kozakl napisał(a):

Rzutowanie propsa na typ ma sens w niektorych przypadkach np masz propsa jakiegos wrappera ktory akceptuje 2 typy dla wartosci,
a w tym wrapperze masz juz typowe komponenty ktore reaguja na konkretny typ

{typeof props.value == 'string' &&
  <ComponentWithStringValue value={props.value as string} /> }
{typeof props.value == 'number' &&
  <ComponentWithNumberValue value={props.value as number} /> }
  
interface Props { //wrapper
    value:string|number; 
}

Ale zasadniczo bardzo rzadko cos takiego sie stosuje,,,

A jaki to ma sens? :D przecież as string jest w compiletime, a typeof jest w runtime.

TypeScript to wypluje jako:

{typeof props.value == 'string' &&
  <ComponentWithStringValue value={props.value} /> }
{typeof props.value == 'number' &&
  <ComponentWithNumberValue value={props.value} /> }

TomRiddle napisał(a):

kozakl napisał(a):

Rzutowanie propsa na typ ma sens w niektorych przypadkach np masz propsa jakiegos wrappera ktory akceptuje 2 typy dla wartosci,
a w tym wrapperze masz juz typowe komponenty ktore reaguja na konkretny typ

{typeof props.value == 'string' &&
  <ComponentWithStringValue value={props.value as string} /> }
{typeof props.value == 'number' &&
  <ComponentWithNumberValue value={props.value as number} /> }
  
interface Props { //wrapper
    value:string|number; 
}

Ale zasadniczo bardzo rzadko cos takiego sie stosuje,,,

A jaki to ma sens? :D przecież as string jest w compiletime, a typeof jest w runtime.

TypeScript to wypluje jako:

{typeof props.value == 'string' &&
  <ComponentWithStringValue value={props.value} /> }
{typeof props.value == 'number' &&
  <ComponentWithNumberValue value={props.value} /> }

as string / as number faktycznie raczej nie potrzebne, ale chodziło chyba bardziej o przykład, że jeśli props jest typu string to użyj komponentu X, a jeśli jest typ number to weź Y.

Xarviel napisał(a):

as string / as number faktycznie raczej nie potrzebne, ale chodziło chyba bardziej o przykład, że jeśli props jest typu string to użyj komponentu X, a jeśli jest typ number to weź Y.

Ale to nie ma sensu.

Są 2 całkowicie inne komponenty

ComponentWithStringValue -> komponent X
ComponentWithNumberValue -> komponent Y

które wyświetlają się warunkowo na podstawie typu i z technicznego punktu widzenia jest okej.

Jedynie rzutowanie przez as wydaje się nadmiarowe, bo kompilator powinien się domyślić jaki jest typ zmiennej.

Xarviel napisał(a):

Są 2 całkowicie inne komponenty

ComponentWithStringValue -> komponent X
ComponentWithNumberValue -> komponent Y

które wyświetlają się warunkowo na podstawie typu i z technicznego punktu widzenia jest okej.

Jedynie rzutowanie przez as wydaje się nadmiarowe, bo kompilator powinien się domyślić jaki jest typ zmiennej.

Racja w tym przypadku 'as' jest nie potrzebne samo typeof zapewnia pewnosc dla TS ze tym jest poprawny,