[TypeScript] 타입스크립트 개념

타입스크립트

언어의 기본 사용법과 문법은 자바스크립트와 동일하다. 하지만 타입을 추가적으로 선언

타입스크립트 사용 이유

• 동적인 자바스크립트를 정적으로
• 타입 선언으로 컴파일 시, 에러를 사전에 잡아준다.
• 에러 메세지가 구체적이고 자세하게 나온다.

리액트 + TS

리액트 + TS는 기존 리액트와 구조는 동일하다.

여기서 state, props, function, event 등에 타입을 선언해준다는 점이 기존 리액트와의 차이점이다.

state

우선 리액트에서 state는 컴포넌트 내부에서 변경되고 사용되는 변수(상태 값)를 말한다,

이 상태 값들을 리액트 룩으로 관리가 된다.

const [changeS, setChangeS] = useState<boolean>(false);

useState 뒤에 상태 값의 타입을 선언해주면 된다.

초기값을 설정해두는 경우, 따로 타입 선언이 없어도 자동으로 타입을 추정해준다.

만약 객체 타입을 선언할 경우, 타입이 반복 사용될 경우 interface 나 type을 이용하여 따로 생성해준다.

/*interface*/
interface loc {
    title: string,
    y: number,
    x: number,
}
/*type*/
type loc = {
    title: string,
    y: number,
    x: number,
}
const Store:React.FC =()=>{
    const [curLoc, setCurLoc] = React.useState<loc>();  
    return(<></>)
}

Props

리액트에서 props는 컴포넌트 외부에서 받는 변수(속성 값)를 말한다.

props는 컴포넌트 내부에서 변경이 불가하다.

interface props {
    storeId: number,
    setIsWrite: React.Dispatch<React.SetStateAction<boolean>>
}
const ReviewForm: React.FC<props> = ({ storeId, setIsWrite }) => {
/*...*/
}

props는 컴포넌트에게 인자로 넘겨지는 값으로, 우선 리액트 컴포넌트 선언 시, React.FC로 타입을 선언해주고 이 뒤에 props의 타입을 선언해준다. 그리고 받는 인자에 props를 선언해준다.

※ 이런 선언으로 외부에서 변수를 혹여 잘못 넘겨줬을 때 에러를 잡아준다.

Function

    const onClickFeature = (id: string) :void => {
        /*...*/
    }

함수에서도 사용법은 비슷하다.

들어오는 인자의 타입을 선언해주고, 추가적으로 인자 뒤에 함수의 반환 타입까지 선언해줄 수 있다.

Event

input 이벤트 처리

const Feed :React.FC = () => {
  const [newNick, setNewNick] = useState({ nickName: "", valid: false, error: "" } as { nickName: string, valid: boolean, error: string });
  const onChangeNick = (event: React.ChangeEvent<HTMLInputElement>) => {
      setNewNick({ nickName: event.target.value, valid: true, error: "사용 가능" });  
  }
  return (
          <form className="col-container" onSubmit={onSubmit}>
            <input type="text" value={newNick.nickName} onChange={onChangeNick} />
              <input type="submit" value="수정" />
          </form>)
}
export default Feed;

onChange의 경우는 React.ChangeEvent<HTMLInputElement>로 이벤트가 사용되고,

event.target.name, event.target.value 등으로 HTMLInputElenent 속성 값을 사용할 수 있다.

이 외에도 헷갈리는 게 있을 경우 마우스 오버하면 타입을 알려준다.

타입 종류

원시타입

• JS는 아래의 원시 타입이 존재한다.
• string
• number
• boolean
• null
• undefined
• +symbol
• 객체 (object, array)

interface Types{
	/*원시타입*/
	Primitives:string,
    Primitives2 ?: number,	//선언 필수X
	/*객체*/
	Object:{
    	a:string,
        b:number,
    }
    /*배열*/
    Arr:{
    	a:string,
        b:number,
    }[]
    Arr2:Object[]
}

interface 확장 | export

interface가 여러 곳에서 반복 사용되거나 추가적으로 사용될 경우는 export 하고, 확장(extends)하여 사용한다.

/*확장*/
//People.tsx
export interface PeopleInterface {
  name: string
  age: number
}

interface StudentInterface extends PeopleInterface {
  school: string
}
/*외부 컴포넌트 사용*/
import PeopleInterface from "People.tsx";
const cmp:React.FC=()=>{
	const [people, setPeople]=useState<PeopleInterface>();
}

+ 에러로 인해 any타입을 할 수 있지만 이건 지양해야 할 방법이다.

(TS를 사용한 의미가 없기 때문이다.)