TypeScript: 기본 React 배우기

이 기사에서는 TypeScript의 이점과 특히 React 개발 내에서의 기본적인 사용법을 살펴봅니다. 이전 기사(간결함을 위해 링크 생략)에서 TypeScript의 소개와 환경 설정에 대해 다루었습니다.

TypeScript를 선택하는 이유는 무엇입니까?

JavaScript의 초기 강점인 유연성은 대규모 프로젝트에서는 약점이 되는 경우가 많습니다. 동적 타이핑으로 인해 유지 관리가 어렵고 확장성 문제가 발생할 수 있습니다. TypeScript는 정적 타이핑을 도입하여 이 문제를 해결하고 몇 가지 주요 이점을 제공합니다.

조기 버그 감지: 정적 유형 지정을 통해 개발 중에 잠재적인 버그를 조기에 식별할 수 있습니다. 유형 오류가 감지되면 컴파일러는 컴파일을 방지하여 코드 안정성을 향상시킵니다.

향상된 확장성 및 유지 관리성: 유형과 인터페이스는 모듈 전체에서 코드 일관성과 적절한 사용을 보장하며 이는 대규모 애플리케이션에 매우 중요합니다. React에서는 예상되는 prop 유형을 적용하여 구성 요소 안정성을 보장합니다.

향상된 코드 가독성 및 수명: 명시적 입력을 통해 코드 명확성이 향상되어 원래 개발자와 향후 기여자 모두에게 이익이 됩니다. 데이터 유형을 이해하면 디버깅 및 유지 관리가 단순화됩니다.

명시적 입력: 핵심 강점

TypeScript의 장점은 변수 유형을 명시적으로 정의하는 기능에 있습니다. 암시적 입력이 가능하지만 예기치 않은 동작이 발생할 위험이 높아집니다. 다음 예를 고려하십시오.

<code class="language-typescript">let author: string = "Tyler Meyer";
author = 32; // Error: Type 'number' is not assignable to type 'string'.
console.log(author); // Will not execute due to the error above.</code>

여기서 author은 문자열로 명시적으로 입력되어 숫자 할당을 방지합니다.

<code class="language-typescript">let studentGrades: number[] = [80, 85, 93];
studentGrades.push(88); // Valid
studentGrades.push("A"); // Error: Type 'string' is not assignable to type 'number'.
studentGrades.push("97"); // Error: Type 'string' is not assignable to type 'number'.</code>

studentGrades 배열은 숫자만 포함하도록 정의되었습니다.

별칭 및 인터페이스: 복합 유형 관리

프로젝트가 성장함에 따라 복잡한 데이터 구조를 관리하는 데 유형 별칭과 인터페이스가 필수가 되었습니다.

<code class="language-typescript">type Author = {
  firstName: string;
  lastName: string;
  age: number;
  lovesCoding: boolean;
};

const coolAuthor: Author = {
  firstName: "Tyler",
  lastName: "Meyer",
  age: 32,
  lovesCoding: true,
};</code>

별칭(type)은 다양한 데이터 유형에 사용할 수 있습니다. 그러나 인터페이스(interface)는 특히 객체 유형을 위한 것이며 상속을 지원합니다.

<code class="language-typescript">interface Book {
  title: string;
  numberOfPages: number;
}

interface Textbook extends Book {
  subject: string;
}

const calculusBook: Textbook = {
  title: "Calculus 4 Dummies",
  numberOfPages: 58,
  subject: "Calculus",
};</code>

React의 TypeScript

.tsx 파일을 사용하는 React 프로젝트의 경우 TypeScript는 구성 요소 내의 데이터 흐름 관리를 향상시킵니다.

유형 안전 함수:

<code class="language-typescript">type Person = {
  name: string;
  age: number;
};

function greeting({ name, age }: Person) {
  return `My name is ${name}, and I am ${age} years old.`;
}

greeting({ name: 'Tyler', age: 32 }); // Valid
greeting({ name: 'Ash', profession: 'Photographer' }); // Error: Missing 'age' property
greeting({ name: 'Sadie', age: '1' }); // Error: Type 'string' is not assignable to type 'number'.</code>

greeting 함수의 유형 안전성은 올바른 매개변수 사용을 보장합니다.

유형 안전 React 구성 요소:

<code class="language-typescript">import React from 'react';

type ChildProps = {
  name: string;
  age: number;
  profession: string;
};

function Child({ name, age, profession }: ChildProps) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Profession: {profession}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>This is my child:</h1>
      <Child name="Tyler" age={32} profession="Software Developer" />
    </div>
  );
}</code>

이 예는 React 구성 요소의 유형이 안전한 prop을 보여줍니다.

출처: (간결함을 위해 링크 생략) 원본 출처를 인용했으나, 외부 링크를 포함하지 말아달라는 요청에 따라 링크를 삭제했습니다.

위 내용은 TypeScript: 기본 React 배우기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!