타입스크립트 기본
~처럼
원사 생성 반응 앱 입력 --템플릿 typescript
Src 폴더 안에 component 폴더를 만들고 components 폴더 안에 다음과 같은 파일을 만듭니다.
인사.tsx
표제.tsx
오스카.tsx
사람.tsx
PersonList.tsx
상태.tsx
인사.tsx
type GreetProps = {
name: string;
messageCount: number;
isLoggedin: boolean;
};
export const Greet = (props: GreetProps) => {
return (
<div>
<h2>
{props.isLoggedin
? ` welcome ${props.name}! you have ${props.messageCount} unread message`
: "welcome guess!!"}
</h2>
</div>
);
};
표제.tsx
type HeadingProps = {
children: string;
};
export const Heading = (props: HeadingProps) => {
return <h2>{props.children}</h2>;
};
오스카.tsx
type OscarProps = {
children: React.ReactNode;
};
export const Oscar = (props: OscarProps) => {
return <div>{props.children}</div>;
};
사람.tsx
type PersonProps = {
name: {
first: string;
last: string;
};
};
export const Person = (props: PersonProps) => {
return (
<div>
{props.name.first} {props.name.last}
</div>
);
};
PersonList.tsx
type PersonListProps = {
names: {
first: string;
last: string;
}[];
};
export const PersonList = (props: PersonListProps) => {
return (
<div>
{props.names.map((name) => {
return (
<h2 key={name.first}>
{name.first} {name.last}
</h2>
);
})}
</div>
);
};
상태.tsx
import React, { useEffect, useState } from "react";
type StatusProps = {
status: string;
};
export const Status: React.FC<StatusProps> = (props) => {
const [message, setMessage] = useState("");
// ? (message = "data fetched successfully")
// : props.status === "Error"
// ? (message = "Error fetching Data...")
// : (message = "not valid input");
useEffect(() => {
setMessage(props.status);
}, [props.status]);
// if (props.status === "Loading") {
// message = "Loading...";
// } else if (props.status === "success") {
// message = "Data fetched successfully";
// } else if (props.status === "error") {
// message = "error occured";
// }
return (
<div>
<h2>Status - {message}</h2>
{/* loading
success
error */}
</div>
);
};
App.tsx
import React from "react";
import "./App.css";
import { Greet } from "./components/Greet";
import { Person } from "./components/Person";
import { PersonList } from "./components/PersonList";
import { Status } from "./components/Status";
import { Heading } from "./components/Heading";
import { Oscar } from "./components/Oscar";
function App() {
const personName = {
first: "nothing",
last: "nothing1",
};
const nameList = [
{
first: "nothing",
last: "nothing1",
},
{
first: "nothing",
last: "nothing1",
},
{
first: "nothing",
last: "nothing1",
},
{
first: "nothing",
last: "nothing1",
},
];
return (
<div className="App">
<Greet name="nothing" messageCount={30} isLoggedin={false} />
<Person name={personName} />
<PersonList names={nameList} />
<Status status="loading" />
<Heading>Placeholder text</Heading>
<Oscar>
<Heading>here you go</Heading>
</Oscar>
</div>
);
}
export default App;
Reference
이 문제에 관하여(타입스크립트 기본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/entrepreneur123/typescript-basic-34d4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)