React를 사용하여 타자 스크립트 학습 - 섹션 2(인터페이스의 내용, 원인 및 방식)

⚡TL;DR: 인터페이스가 무엇인지, 왜 사용해야 하는지, 어떻게 사용해야 하는지, 다시 사용할 수 있는 코드를 더 많이 작성하고 훌륭한 프로그램을 만드는 데 도움을 줄 수 있습니다.
과정에서 우리는 유형, 그것이 무엇인지, 그것을 어떻게 사용하는지, 그리고 왜 사용하는지 토론했다.만약 네가 아직 읽지 않았다면, 나는 네가 먼저 읽어 보라고 건의한다.
이 글에서 우리는 인터페이스가 무엇인지, 왜 인터페이스에 관심을 가져야 하는지, 그리고 그것을 어떻게 사용해서 더 많은 재사용 가능한 코드를 만드는지 이해할 것이다.
시작하자.

인터페이스란?

TypeScript에서 인터페이스는 여러 유형의 주석을 하나의 명명된 주석으로 조합하는 핵심 방식입니다.
이것은 대상의 속성 이름과 유형을 설명하는 새로운 형식을 만드는 방법입니다.우리가 전에 토론한 유형(숫자, 부울 값, 문자열 등)을 기억하십니까?인터페이스는 이런 유형과 같다.

왜 인터페이스에 관심을 가져야 합니까?

인터페이스는 TypeScript 언어의 가장 좋은 특징 중 하나입니다.이게 얼마나 좋은지 내가 알려줄게.
아래의 예부터 시작합시다.renderVideo라는 함수가 있습니다. 이 함수는 video를 매개 변수로 받아들입니다. 이 함수는 비디오 대상에 존재해야 할 모든 속성을 설명합니다.

const video = {
  videoId: '',
  title: '',
  description: '',
  thumbnailURL: ''
};

const renderVideo = (video: { videoId: string; title: string; description: string; thumbnailURL: string }): void => {

}

비록 매개 변수의 주석이 매우 길지만, 위의 코드는 함수 매개 변수와 반환값의 주석이 정확하다.
하지만 동영상을 받기 위해 더 많은 기능을 추가했다면 상상해 보세요.

const video = {
  videoId: '',
  title: '',
  description: '',
  thumbnailURL: ''
};

const renderVideo = (video: { videoId: string; title: string; description: string; thumbnailURL: string }): void => {

}

const getVideoSummary = (video: { videoId: string; title: string; description: string; thumbnailURL: string }): void => {

}

// another function has a `video` parameter
// another one
// and another one
// *shouts* "DJ Khaled"

네?나는 너의 상황을 모르겠지만, 나에게 있어서 위의 코드는 보기에 그리 좋지 않다.
긴 주석이 여러 번 복사되었다.코드도 더 읽기 어려워요.
지금 다시 한 번 상상해 보세요. (우리는 여기서 많은 것을 상상했다) 당신은 동영상에 대해 다음과 같은 하나 이상의 변경을 해야 합니다.

새 재산으로 추가된 날짜

thumbnailURL의 이름을 imageURL로 변경합니다.

유형videoId을 string에서 숫자

로 변경
이 새 변경 사항을 상기 코드에 적용하는 것은 많은 곳에서 모든 동영상 주석을 변경해야 한다는 것을 의미합니다.
이것은 매우 큰 일이다. 우리는 이렇게 하기를 원하지 않는다. 그래서 우리는 어떻게 해야만 이 문제를 해결할 수 있습니까?
간단하다

인터페이스를 어떻게 만듭니까?

우리는 이 긴 동영상 주석을 Video라는 인터페이스로 바꿀 수 있다.

To create an interface, use the interface keyword followed by a name that represents the object, in this case Video.

The name should start with a capital letter just like how we create React components and a set of curly braces where you declare all of the object's properties and methods and its types.

이것이 바로 Video 인터페이스를 만드는 방식이다.

interface Video {
  videoId: string;
  title: string;
  description: string;
  thumbnailURL: string;
}

인터페이스를 어떻게 사용합니까?

인터페이스는 사용자 정의 형식이기 때문에, 우리는 일반 형식처럼 그것을 변수로 주석할 수 있다.

let item: Video;

Video 인터페이스를 사용하면 앞의 예제를 다음과 같이 바꿀 수 있습니다.

interface Video {
  videoId: string;
  title: string;
  description: string;
  thumbnailURL: string;
}

const renderVideo = (video: Video): void => {};
const getVideoSummary = (video: Video): void => {};

// another function that uses a video
// another one
// and another one

const video = {
  videoId: "",
  title: "",
  description: "",
  thumbnailURL: ""
};

renderVideo(video);

이 코드는 이전보다 훨씬 좋아 보이는데, 맞습니까?
그것은 보기에 더욱 깨끗해서 한눈에 파라미터가 Video의 한 종류임을 알 수 있다.
가장 중요한 것은 인터페이스에서 설명하는 한 곳에서만 속성을 추가하거나 삭제하거나 이름을 바꾸거나 변경할 수 있습니다.경탄할 만한!

💡 If you use VS code, which I highly recommend you should, you can see all the property names and types of an interface by holding the ctrl/cmd key and hovering over the interface name.

Pretty cool right?

응용 프로그램에서 인터페이스를 어떻게 사용합니까?

Video 인터페이스를 사용하는 것 외에 유튜브 API 응답을 나타내는 또 다른 인터페이스를 만들었습니다.

interface YoutubeVideo {
  id: { videoId: string };
  snippet: {
    publishedAt: string;
    title: string;
    description: string;
    thumbnails: { medium: { url: string }; default: { url: string } };
    channelTitle: string;
    channelId: string;
  };
}

interface YoutubeAPIResponse {
  data: { items: YoutubeVideo[] };
}

이 인터페이스는 fetchChannelVideos 기능에 사용됩니다.

export const fetchChannelVideos: (
  args: FetchVideosArguments
) => Promise<Video[]> = async ({
  shouldUseDefaultVideos = false,
  searchQuery
}) => {
 const requestURL = '';
 const response:YoutubeAPIResponse = await axios.get(requestURL);
};

인터페이스가 유형이기 때문에 TS 컴파일러도 주석이 있는 데이터에 대해 오류 검사를 할 수 있습니다.
API 응답 구조에 인터페이스를 생성하고 변수에 주석을 달면 존재하지 않는 속성에 예기치 않게 액세스할 수 있습니다.
따라서 API 응답에 포함되지 않은 comments에 액세스하려고 하면 TypeScript 컴파일러에 오류가 발생합니다.

인터페이스로 재사용 가능한 코드를 작성하다

인터페이스의 내용, 원인, 방식에 대해 논의했으니, 다시 사용할 수 있는 코드를 어떻게 사용하는지 이야기해 봅시다.
만약 구성 요소가 있다면 유튜브 사용자와 채널에서 온 평론을 보여줄 수 있습니다.
우선 우리는 이렇게 쓴다.

interface User { name: string; avatar: string; }
interface Channel { name: string; avatar: string; }

const renderUserComment: (user: User, comment: string) => React.ReactNode = (
  user,
  comment
) => { /* return user comment */ };

const user = { name: "Ana", avatar: "ana.png" };
const channel = { name: "Tedx Talks", avatar: "tedxtalks.png" };

const renderChannelComment: (
  channel: Channel,
  comment: string
) => React.ReactNode = (channel, comment) => {/* return channel comment */};

renderUserComment(user, 'hello there');
renderChannelComment(channel, 'hi, thanks for watching');

사용자와 채널을 나타내는 두 개의 인터페이스와 주석을 나타내는 함수가 있습니다. 설령 그들이 같은 일을 하더라도 작가와 함께 주석을 나타냅니다.

우리는 어떻게 그것을 다시 써서 중복된 코드를 삭제합니까?

비록 우리는 aunion type를 사용하여 평론가가 aUser 또는 aChannel일 수 있지만,

const renderComment: (author: User|Channel, comment: string) => React.ReactNode = (
  author,
  comment
) => { /* return comment */ };

이런 상황에서 이 두 가지 유형의 사용자를 나타내는 인터페이스를 만드는 것이 가장 좋다.
더 일반적인 인터페이스 Author 로 다시 쓰자.

interface Author { name: string; avatar: string; }

const renderComment: (author: Author, comment: string) => React.ReactNode = (
  author,
  comment
) => { /* return comment */};

const user = { name: "Ana", avatar: "ana.png", github: "analizapandac" };
const channel = { name: "Tedx Talks", avatar: "tedxtalks.png", channelId: "UCsT0YIqwnpJCM-mx7-gSA4Q" };

renderComment(user, 'hello there');
renderComment(channel, 'hi, thanks for watching');

비록 user와 channel는 두 가지 서로 다른 유형의 데이터를 대표하지만 author로 간주되는 요구, 즉 name와 avatar를 만족시키기 때문에 renderComment 함수는 이 두 대상에 적용된다.

The examples above are very basic but the point here is that we can use a generic interface to represent different objects which can work with different functions. This is one way to use interfaces to write more reusable code.

결어

인터페이스의 내용, 원인, 방식을 이해하는 것 외에, 나는 인터페이스의 힘, 그리고 그것을 어떻게 사용해서 놀라운 응용 프로그램을 만드는지 당신에게 보여 주기를 바랍니다.
특히 인터페이스를 다른 종류의 스크립트 기능(예를 들어 클래스)과 어떻게 결합시켜 사용하는지, 그리고 더 좋은 코드를 어떻게 만드는지에 관한 내용도 많다.
나는 계속해서 더욱 선진적인 TS 개념을 배워서 그것들을 이용하여 새로운 감동적인 프로젝트를 만들고 여러분과 공유할 것이다.
너도 그랬으면 좋겠어.😊

Github 재구매 프로젝트

다음은 응용 프로그램의 소스 코드입니다: https://github.com/analizapandac/tedflix
만약 네가 원한다면, 너는 그것을 복제해서 로컬 컴퓨터에서 원본 코드를 가지고 놀 수 있다.
배치된 응용 프로그램을 https://tedflix.netlify.com/에서 볼 수 있습니다.
이것은 앞의 문장이다.

React를 사용하여 타자 스크립트 학습 - 섹션 1

안나 리사 판다크・ 19년 7월 1일・ 6 분 읽기

#typescript #react #beginners #webdev

만약 피드백, 건의 또는 다음 방향이 있다면 아래의 평론에서 저에게 알려주세요.미리 고마워요.