Skip to content

Commit 86ba26f

Browse files
afatihyavasiafatihyavasi
authored
Merge pull request #2 from xaronnn/master
Harf hatası
2 parents ea13abe + 4106da5 commit 86ba26f

File tree

1 file changed

+0
-0
lines changed

1 file changed

+0
-0
lines changed

‎handbook/react-ve-typescript/props-tipleri.md

-2 Bytes

# Props Tipleri React projelerimizde propların tiplerini tanımlamak için farklı yöntemler vardır. Örneğin aşağıdaki gibi propların tipini direk tip objesiyle tanımlayabiliriz. ```typescript type PropTypes = { children?: JSX.Element name?: 'ahmet' | "fatih"; surname?: string; key?: string } const Character = (props: CharacterPropTypes) => { const {name, surname, children} = props; return (

{`${name} ${surname}`}

Props Tipleri

React projelerimizde propların tiplerini tanımlamak için farklı yöntemler vardır. Örneğin aşağıdaki gibi propların tipini direk tip objesiyle tanımlayabiliriz.

type PropTypes = {
    children?: JSX.Element
    name?: 'ahmet' | "fatih";
    surname?: string;
    key?: string
}

const Character = (props: CharacterPropTypes) => {
    const {name, surname, children} = props;
    return (
        <div>
            <h1>{`${name} ${surname}`}</h1>
            {children}
        </div>
    );
};

Bu tanımlamanın en büyük handikapı children ve key için de tip tanımlaması yapmamız gerekmektedir.

Alternatif olarak ve sıklıkla aşağıdaki kullanım ile tip tanımlaması yapılmaktadır. React.FC yerine FC veya FunctionComponent tanımlamaları da yapılabilir.

const Character:React.FC<CharacterPropTypes> = (props) => {
    const {name, surname, children} = props;
    return (
        <div>
            <h1>{`${name} ${surname}`}</h1>
            {children}
        </div>
    );
};

Bu şekilde tip tanımlaması yaptığımızda, children için tip tanımlaması yapmamıza gerek yoktur.

 ); }; ``` Bu tanımlamanın en büyük handikapı children ve key için de tip tanımlaması yapmamız gerekmektedir. Alternatif olarak ve sıklıkla aşağıdaki kullanım ile tip tanımlaması yapılmaktadır. **React.FC** yerine **FC** veye **FunctionComponent** tanımlamaları da yapılabilir. ```typescript const Character:React.FC = (props) => { const {name, surname, children} = props; return (

{`${name} ${surname}`}

 ); }; ``` Bu şekilde tip tanımlaması yaptığımızda, children için tip tanımlaması yapmamıza gerek yoktur.

0 commit comments

Comments
 (0)