TypeScript의 React 프로젝트 활용 사례 요약

서문

본고는 TS의 기본 개념이 아니라 프로젝트에서 TypeScript(이하 TS)가 React와 결합된 사용 상황에 중심을 두겠습니다.TS 유형 보기는 온라인 TS 도구를 사용할 수 있습니다.👉TypeScript 놀이터

React 요소 관련

React 요소와 관련된 유형은 주로 ReactNode, ReactElement, JSX.Element 입니다.

ReactNode .임의의 유형을 나타내는 React 노드입니다. 이것은 연합 유형으로 상황이 매우 많습니다.

ReactElement/JSX .사용 표현을 보면 이 두 가지가 일치한다고 볼 수 있으며 ReactNode 에 속하는 서브집합으로 "원생 DOM 구성 요소"또는 "사용자 정의 구성 요소의 실행 결과"를 나타낸다.

사용 예는 다음과 같습니다.

const MyComp: React.FC<{ title: string; }> = ({title}) => <h2>{title}</h2>;

// ReactNode
const a: React.ReactNode =
  null ||
  undefined || <div>hello</div> || <MyComp title="world" /> ||
  "abc" ||
  123 ||
  true;

// ReactElement JSX.Element
const b: React.ReactElement = <div>hello world</div> || <MyComp title="good" />;

const c: JSX.Element = <MyComp title="good" /> || <div>hello world</div>;

원본 DOM 관련

기본 DOM 관련 유형은 다음과 같습니다. Element, HTMLElement, HTMLxxxElment.
간단히 말하면 Element = HTMLElement + SVGElement.SVGElement 일반적으로 개발은 비교적 적게 사용되지만 HTMLElement는 매우 흔하다. 그의 하위 유형은 HTMLDivElement, HTMLInputElement, HTMLSpanElement 등을 포함한다.
따라서 우리는 그 관계가 Element > HTMLElement > HTMLxxxElement, 원칙적으로 가능한 한 상세하게 쓰는 것을 알 수 있다.

React 작성 이벤트 관련

React에서 원본 이벤트는 React 이벤트로 처리되고 그 내부는 이벤트 의뢰를 통해 메모리를 최적화하고 DOM 이벤트 연결을 줄인다.본론으로 돌아가면React 이벤트의 일반적인 형식은 [xxx] Event이고 흔히 볼 수 있는 것은 MouseEvent, ChangeEvent, TouchEvent 범용 형식이며 범용 변수는 이 이벤트를 촉발하는 DOM 요소 형식이다.
예는 다음과 같습니다.

// input 
const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
  console.log(evt);
};

// button 
const handleButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
  console.log(evt);
};

//  div
const handleDivTouch = (evt: React.TouchEvent<HTMLDivElement>) => {
  console.log(evt);
};

훅스와의 결합

hooks에서 모든 갈고리가 TS와 강한 관련이 있는 것은 아니다. 예를 들어useEffect는 TS에 의존하지 않고 유형 정의를 한다. 우리는 비교적 흔히 볼 수 있는 몇 개의 TS와 강한 관련이 있는 갈고리를 골라서 보자.

useState

만약 초기 값이 유형을 설명할 수 있다면useState에 범용 변수를 가리키지 않아도 된다.

// ❌ ， 0 count 
const [count, setCount] = useState<number>(0);

// ✅ 
const [count, setCount] = useState(0);

초기 값이null 또는undefined라면, 원하는 형식을 수동으로 전송하고, 속성에 접근할 때 선택할 수 있는 체인을 통해 문법 오류를 피해야 합니다.

interface IUser {
  name: string;
  age: number;
}

const [user, setUser] = React.useState<IUser | null>(null);

console.log(user?.name);

useRef

이 훅은 비교적 특별하다. 보통 두 가지 용도가 있다.
DOM 요소를 가져오기 위해 DOM을 연결합니다.

//  DOM， null， undefined， HTMLxxxElement
//  inputRef.current ， ， null !
const inputRef = useRef<HTMLInputElement>(null!);

const handleClick = () => {
  inputRef.current.focus(); //  ， inputEl.current?.focus() 
}

return (
  <input ref={inputRef} />
  <button onClick={handleClick}> </button>
)

2. 변수를 저장하는 데 사용됩니다. 함수식 구성 요소의 외부에 저장되기 때문에usestate에 비해 비동기적인 업데이트 문제가 존재하지 않을 뿐만 아니라 capture-value 특성으로 인해 유행이 지난 변수도 존재하지 않습니다. 그러나 값을 부여한 후ref 인용이 변하지 않아 다시 렌더링을 일으키지 않도록 주의해야 합니다.

//  
const sum = useRef(0);

//  .current 
sum.current = 3;
//  
console.log(sum.current); // 3

useSelector

useselector는 store의 상태를 가져오는 데 사용됩니다. 첫 번째 고정 매개 변수는 함수입니다. 함수의 삽입은store이고 store의 유형인 RootState는store에서 미리 정의해야 합니다. 흔히 볼 수 있는 정의는 다음과 같습니다.
스토어에서.ts:

const store = createStore(rootReducer);

export type RootState = ReturnType<typeof rootReducer>;

사용:

const { var1, var2 } = useSelector((store: RootState) => store.xxx);

사용자 정의 훅

만약useState의 형식을 본떠서 하나의 그룹을 되돌려야 한다면, 되돌려 주는 값의 끝에 asconst를 사용해야 합니다. 이 되돌려 주는 값은 상수입니다. 그렇지 않으면 되돌려 주는 값은 연합 형식으로 추정됩니다.

const useInfo = () => {
  const [age, setAge] = useState(0);

  return [age, setAge] as const; //  ，[number, React.Dispatch<React.SetStateAction<number>>]
};

redux 관련

action의 정의에 대해 우리는 공식적으로 노출된 AnyAction을 사용하여 action 내부 키 값에 대한 제한을 다음과 같이 완화할 수 있다.

import { AnyAction } from "redux";

const DEF_STATE = {
  count: 0,
  type: 'integer'
};

//  redux AnyAction 
function countReducer(state = DEF_STATE, action: AnyAction) {
  switch (action.type) {
    case "INCREASE_COUNT":
      return {
        ...state,
        count: state.count + 1,
      };
    case "DECREASE_COUNT":
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}

export default countReducer;

규약

서브어셈블리의 엔트리 이름은 다음과 같은 [어셈블리 이름] Props입니다.

//  InfoCard
export interface InfoCardProps {
  name: string;
  age: number;
}

인터페이스 인터페이스 형식은 대문자로 시작합니다.
백엔드 인터페이스의 출입을 위해 인터페이스를 작성하고 편집기가 제시하는 jsdoc 스타일에 대한 설명을 합니다. 예를 들어 다음과 같습니다.

export interface GetUserInfoReqParams {
    /**   */
    name: string;
    /**   */
    age: number;
    /**   */
    gender: string;
}

기타

키 이름이나 키 값이 확실하지 않으면 어떻게 처리합니까?

//  ， number 
export interface NotSureAboutKey {
  [key: string]: number;
}

//  ， 
export interface AllNotSure {
  [key: string]: any;
}

어떻게 인터페이스에서 범용 변수를 사용합니까?

범주형이란 미리 정의된 유형이다.그 목적은 유형 정의의 국부적 유연성을 달성하고 복용성을 높이는 것이다.우리는 일반적으로 인터페이스에서 범용 (예:

//  ， 
interface IHuman<T = unknown> {
  name: string;
  age: number;
  gender: T;
}

//  
const youngMan: IHuman<string> = {
    name: 'zhangsan',
    age: 18,
    gender: 'male'
}

TypeScript가 React 프로젝트에서의 사용에 대한 요약 기사는 여기 있습니다. 더 많은 TypeScript가 React에서 사용한 내용에 대해서는 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!