타입스크립트
언어의 기본 사용법과 문법은 자바스크립트와 동일하다. 하지만 타입을 추가적으로 선언
타입스크립트 사용 이유
- 동적인 자바스크립트를 정적으로
- 타입 선언으로 컴파일 시, 에러를 사전에 잡아준다.
- 에러 메세지가 구체적이고 자세하게 나온다.
리액트 + 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를 사용한 의미가 없기 때문이다.)
'Language > TypeScript' 카테고리의 다른 글
[TypeScript] TypeScript 란? (0) | 2022.07.11 |
---|---|
[TypeScript] 타입스크립트 기본 문법 (0) | 2022.06.26 |
[TypeScript] 자바스크립트 타입스크립트로 전환 (0) | 2022.06.26 |
[TypeScript] 프론트엔드 프레임워크/라이브러리와 타입스크립트 (0) | 2022.06.26 |
[TypeScript] 타입스크립트의 특징 (0) | 2022.06.26 |