U React-u sa TypeScript-om možemo koristiti dva glavna pristupa za kreiranje komponenti: funkcionalne i klasne komponente. Oba pristupa omogućuju rad sa props i state, ali koriste nešto drugačije paradigme. TypeScript dodatno pojačava razvojnu sigurnost pružanjem statičkog tipiziranja, što nam omogućuje da precizno definišemo oblik props i state.
U nastavku ćemo pogledati primere različitih komponenti, koristeći interface za definisanje tipova, kako bismo osigurali doslednost i čitljivost koda.
F-1. Funkcionalna komponenta bez props i state
U ovom slučaju, jednostavna funkcionalna komponenta koja ne koristi ni props ni state izgleda ovako:
import React from 'react';
const FunctionalComponent: React.FC = () => {
return <div>Hello, DEV.to!</div>;
};
Ova komponenta samo prikazuje statički tekst.
F-2. Funkcionalna komponenta sa props
Kada želimo da prosledimo podatke kroz props, koristimo interface kako bismo definisali oblik tih podataka:
import React from 'react';
interface IMyProps {
name: string;
}
const FunctionalComponentWithProps: React.FC<IMyProps> = ({ name }) => {
return <div>Hello, {name}!</div>;
};
Ovde IMyProps sadrži name koji se koristi za prikaz personalizovanog pozdrava.
F-3. Funkcionalna komponenta sa state
Kada koristimo state u funkcionalnim komponentama, koristimo React-ov useState hook:
import React, { useState } from 'react';
const FunctionalComponentWithState: React.FC = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
};
Ova komponenta koristi lokalni state za praćenje brojača.
F-4. Funkcionalna komponenta sa props i state
Kombinovanjem props i state možemo imati fleksibilne komponente koje primaju podatke kroz props, a manipulišu stanjem interno:
import React, { useState } from 'react';
interface IMyProps {
initialCount: number;
}
const FunctionalComponentWithPropsAndState: React.FC<IMyProps> = ({ initialCount }) => {
const [count, setCount] = useState(initialCount);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
};
Ova komponenta koristi initialCount kao prop, a interni state za dinamičko praćenje brojača.
K-1. Klasna komponenta bez props i state
Klasna komponenta bez props i state u React-u izgleda ovako:
import React from 'react';
class ClassComponent extends React.Component {
render() {
return <div>Hello, DEV.to!</div>;
}
}
Ovo je jednostavna klasna komponenta koja prikazuje statički tekst.
K-2. Klasna komponenta sa props
Kada klasna komponenta prima props, definišemo ih pomoću interface:
import React from 'react';
interface IMyProps {
name: string;
}
class ClassComponentWithProps extends React.Component<IMyProps> {
render() {
return <div>Hello, {this.props.name}!</div>;
}
}
Kao i kod funkcionalne komponente, ovde koristimo props za prikaz personalizovanih podataka.
K-3. Klasna komponenta sa state
Kod klasnih komponenti sa state, definišemo stanje unutar konstruktora:
- Prazne zagrade u konstruktoru
Ako ne koristite props, možete jednostavno ostaviti prazne zagrade u konstruktoru:
import React from 'react';
interface IMyState {
count: number;
}
class ClassComponentWithState extends React.Component<{}, IMyState> {
constructor() {
super({});
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button>
</div>
);
}
}
- Eksplicitno navesti {} kao tip za props
Ako želite biti eksplicitni u vezi sa props, možete navesti {} kao tip:
import React from 'react';
interface IMyState {
count: number;
}
class ClassComponentWithState extends React.Component<{}, IMyState> {
constructor(props: {}) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button>
</div>
);
}
}
-> U oba slučaja, TypeScript i React će ispravno funkcionisati. Ako vaša komponenta ne koristi props, jednostavno možete koristiti prazne zagrade u konstruktoru, ali obavezno prosledite {} u super pozivu kako biste izbegli greške u inicijalizaciji.
Ova komponenta koristi state kako bi pratila promene brojača.
K-4. Klasna komponenta sa props i state
Za klasne komponente koje koriste i props i state, možemo kombinovati oba koncepta:
import React from 'react';
interface IMyProps {
initialCount: number;
}
interface IMyState {
count: number;
}
class ClassComponentWithPropsAndState extends React.Component<IMyProps, IMyState> {
constructor(props: IMyProps) {
super(props);
this.state = {
count: props.initialCount
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button>
</div>
);
}
}
Ova komponenta prima početni brojač kroz props, a dalje manipuliše stanjem interno.
Korišćenje interface u TypeScript-u donosi bolje tipiziranje i lakšu čitljivost koda, pogotovo kada radimo sa složenijim strukturama podataka. Sa ovim osnovnim primerima, imate osnovu za pisanje funkcionalnih i klasnih komponenti sa React-om i TypeScript-om.
Top comments (0)