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

⚡TL;DR: 유형, 유형 주석이 무엇인지, 왜 사용하는지, 어떻게 사용하는지 이해하면 개발 과정에서 오류를 포착하고 코드의 질과 가독성을 향상시킬 수 있습니다.
2주 전에 나는 타자 스크립트를 배우기로 결정했기 때문에 창설TEDFlix을 통해 그것을 배우기 시작했다.그것은 Youtube 공식 채널에서 동영상을 가져와 볼 수 있도록 React와 함께 구축되었다.왜 TEDFlix예요?듣자니 매우 재미있는데, 솔직히 말하면, 나는 이미 생각이 없다😛
이 두 부분으로 구성된 시리즈에서 나는 이 프로젝트에서 배운 것을 공유하고 싶다.
심도 있는 토론을 하기 전에 TS 공식 사이트의 TypeScript(TS)가 무엇인지 간단한 정의를 드리겠습니다.

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.”

이제 저도 응용 프로그램의 기능과 어떻게 반응하는지에 대한 구조적 고차원적인 개술을 드리겠습니다.
이것은 한 페이지의 응용 프로그램으로, 그 중에는 비디오 플레이어 하나, 관련 대화 목록 하나, 검색 표시줄이 있는데, 이것들은 모두 단독 구성 요소로 구축된 것이다.페이지를 불러올 때, 유튜브가 아닌 JSON 파일에서 기본 대화 목록을 가져옵니다. 여러 사용자가 페이지를 불러올 때 유튜브 API의 일일 사용 할당량을 초과하지 않도록 합니다.이 응용 프로그램은 대화 내용을 검색할 때만 Youtube와 통신합니다.
자, 우리 시작합시다.

먼저 프로젝트 설정

TypeScript가 있는 Create React 애플리케이션을 사용하여 프로젝트를 생성했습니다.

create-react-app my-app-name --typescript

이 애플리케이션에서 TypeScript를 어떻게 사용합니까?

저는 TS 초보자이기 때문에 이 언어의 문법과 특성, 특히 유형, 유형 주석과 인터페이스를 먼저 배웁니다.첫 번째 문장에서 나는 유형과 주석만 토론할 것이다.

a형은 무엇입니까?

TypeScript는 유형 언어이기 때문에 변수, 함수 매개변수 및 객체 속성의 유형을 지정/주석할 수 있습니다.
내 이해에 따르면 유형은 변수가 접근할 수 있는 모든 속성과 방법의 기호/표시이다.이것은 우리가 변수에 하나의 유형 number 을 추가하면 TS 컴파일러는 이 변수가 가지고 있고 한 숫자만 가지고 있는 모든 속성과 방법을 알 수 있다는 것을 의미한다.

A type is annotated to the variable, parameter or property using this format :type.
For example, let name: string.

TS에는 사용 가능한 유형이 많지만 이 응용 프로그램에서는 다음 유형을 사용합니다.

기본 유형 - 숫자, 문자열, 부울 값

배열 - 유형(예: []

다음에 추가let names: string[]

비디오 - 비디오 객체의 속성을 나타내는 인터페이스 또는 사용자 정의 유형

을 만들었습니다.
보다 포괄적인 유형 목록은 here을 참조하십시오.

왜 우리는 주석 유형에 관심을 갖습니까?

유형은 가장 좋은 문서 형식 중의 하나이다.이것은 다음에 당신의 코드를 읽어야 하는 개발자에게 매우 도움이 될 것입니다. 이것은 당신의 미래일 수도 있습니다.

TypeScript 컴파일러가 도움을 줍니다.변수를 숫자로 주석하고 문자열 값을 몇 줄로 나누면 컴파일러가 다음과 같은 오류를 발생합니다.

let x: number = 123;
x = '123'; // Error: cannot assign a `string` to a `number`

변수:number에서 주석x을 삭제하더라도 컴파일러는 TypeScript가 스마트하기 때문에*와 같은 오류를 낸다.

*If you declare a variable with a value without specifying the type, TypeScript will figure out the type of the variable based on the initial value assigned to it.

This is called type inference.

"그럼, 유형 추정이 존재한다면, 나는 왜 변수를 주석하는 데 신경을 써야 합니까?"
유형 추정이 항상 유효하지는 않습니다.
하나의 예시 장면은 지연 변수의 초기화이다. 아래와 같다.

let age;

// a few lines later
age = 12; 
// The compiler will NOT give an error even 
// if we assign a non-numeric value to `age`
age = 'Ana'; 

지연 변수가 유형에 주석을 달지 않고 초기화되면 TS 컴파일러가 나중에 어떤 유형의 속성을 가져올지 모르기 때문에 지연 변수는 자동으로 관련 유형any을 가지게 됩니다age.
가능한 한 유형이 any인 변수의 사용을 피해야 한다.그것은 개발 과정에서 가능한 한 많은 오류를 포착하기를 바라는 TS 유형 시스템의 배후 이념에 위배된다.왜?컴파일러가 any 의 유형을 버그 검사할 수 없기 때문이다.
유형 도움말 TS 컴파일러를 사용하면 도움이 된다는 것을 기억하십시오.

응용 프로그램에서 유형 주석을 어떻게 사용합니까?

변수 성명에서 형식을 사용하는 것 외에 함수 성명에서 주석을 사용합니다.
함수는 다음과 같은 방법으로 주석을 달 수 있습니다.

1. 화살표 기능

const add = (a:number, b:number):number => {
 return a + b;
}

// or
const add: (a: number, b: number) => number = (a, b) => {
  return a + b;
};

2. 비화살표 기능

function add(a:number, b:number):number {
 return a + b;
}

이 두 예시에서 함수가 되돌아오는 문자열이나 어떤 종류가 숫자가 아니라면 컴파일러는 숫자가 필요하기 때문에 오류를 낼 것이다.
채널의 동영상을 얻기 위해 fetchChannelVideos라는 함수를 만들었습니다. 이 함수는 JSON 파일과 검색 검색 문자열에서 기본 동영상을 가져올지 여부를 표시하는 브리 로고를 받아들였습니다.이 두 파라미터는 모두 선택할 수 있는 파라미터입니다. (속성 이름 뒤에 추가하기 ? 를 통해 인터페이스로 표시됩니다.잠시 후에 나는 인터페이스가 무엇인지 설명할 것이지만, 지금 우리는 함수가 어떻게 주석되는지 더욱 자세히 봅시다.

interface FetchVideosArguments {
 shouldUseDefaultVideos?: boolean;
 searchQuery?: string;
}

export const fetchChannelVideos: (
 args: FetchVideosArguments
) => Promise < Video[] > = async ({
 shouldUseDefaultVideos = false,
 searchQuery
}) => {};

대입 연산자=의 왼쪽에서

const fetchChannelVideos: (args: FetchVideosArguments) => Promise <Video[]>

우리는 비지정 함수로 성명된 변수 fetchChannelVideos 를 주석하고 있다.우리는 TS 컴파일러에게 이 변수는 이런 종류의 매개 변수와 되돌아오는 값을 가진 함수가 있을 것이라고 알려 주었다.=의 오른쪽 부분은 분배 기능이다.

async ({
 shouldUseDefaultVideos = false,
 searchQuery
}) => {};

함수 자체에 주석을 달려면, 우리는 그 매개 변수와 그 유형, 그리고 되돌아오는 값을 지정해야 한다.

So why didn't I annotate the function to assigned to fetchChannelVideos? Because again, TypeScript is smart.

내가 함수를 주석이 있는 변수에 부여한 것을 보면 함수가 같은 매개 변수의 이름과 유형, 그리고 되돌아오는 값을 가지고 있을 것이라고 추정할 수 있다. 그렇지 않으면 내가 다른 매개 변수의 이름을 추가하거나 지정하거나 다른 값을 되돌아오면 오류가 발생할 것이다.
* 추정 함수 매개 변수와 반환값
그러나 만약 내가 함수를 직접 내보내서 변수에 분배하지 않는다면, 나는 아래와 같이 함수를 주석해야 한다.

export async function fetchChannelVideos({
 shouldUseDefaultVideos = false,
 searchQuery
}: FetchVideosArguments): Promise<Video[]> {
 // function body
}

자, 이제 우리는 유형 주석의 내용, 원인과 방식을 이해했고 마지막으로 문제가 하나 더 있습니다.

우리는 어디에서 유형을 사용합니까?

답은: 없는 곳이 없다.TypeScript를 사용하면 어플리케이션의 각 데이터에는 사용자가 좋아하든 안 좋아하든 연관된 유형이 있습니다.

결어

지금까지 나는 기본 지식만 접했지만, 그 도움말을 보았고, 컴파일러가 코드를 작성할 때 발생하는 오류를 보았으며, 나중에 프로그램을 실행할 때 그것들을 발견하는 것이 아니라, 나로 하여금 많은 시간을 절약하게 했다.

학습 자원

더 많은 정보를 알고 내 여정에 참여하고 싶다면, 시작할 수 있는 자원이 있다.
TypeScript in 5 Minutes
TypeScript Deep Dive
Official TypeScript Documentation
Netlify 에 애플리케이션 구축: https://tedflix.netlify.com/
나는 곧 이 프로젝트의 Github 환매 협의를 공유할 것이다.
* 업데이트: 06/07*
인터페이스의 마지막 부분은 이미 끝났다🎉

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

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

#typescript #react #javascript #webdev

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