Intro
타입스크립트란, Javascript를 기반으로 한 strongly-typed 언어이다. strongly-typed이란, 프로그래밍 언어가 작동하기 전에 type을 확인 하는 것이다.
아래의 예제 코드를 보자.
const user = {
firstName: "Angela",
lastName: "Davis",
role: "Professor",
}
console.log(user.name); // undefined해당 코드를 실행시키면 user에는 name이 없지만 에러는 나지 않고 undefined를 출력한다.
이 코드가 실제 사용자가 있는 사이트에서 실행이 된다면 사용자는 "안녕하세요, undefined님"이란 문구를 보게 될지도 모른다. 이런 Javascript의 모자란 능력을 커버하기 위해 타입스크립트 사용이 권장된다.
하지만 웹 브라우저는 Javascript 외의 언어를 읽을 수 없다. 그럼 타입스크립트는 어떻게 인식하는 걸까?
타입스크립트는 브라우저에 프로그램이 실행 되기 전에 코드를 분석한다. 분석 후 에러 사항이 있다면 프로그램 실행을 막고, 에러 사항이 없다면 JS 코드를 return하여 프로그램을 실행 시킨다.
설치
프로젝트 작업 도중에 타입스크립트를 추가하고 싶다면 아래 코드로 필요한 모듈을 설치한다.
npm install typescript @types/node @types/react @types/react-dom @types/jest설치 후 tsconfig.json 파일이 추가 되었는지도 확인해준다. 없다면 tsc --init 으로 추가하여 설정해주자.
참고 : tsconfig.json 설정 총정리
따로 모듈을 설치하는게 번거롭다면 아래 코드로 프로젝트를 아예 처음부터 시작하는 방법이 있다.
npx create-react-app my-ts-app --tamplate typescript타입스크립트 환경에서 작업하면서 다른 모듈을 설치할 때는 @types 처럼 타입 선언이 되어 있는지 확인을 해야한다. npm install 로 간단히 확인할 수 있다.
npm install @types/모듈명모듈명만 변경하여 install 해보면 타입스크립트 선언이 된 모듈인지 아닌지 바로 확인이 가능하다.
시작
타입스크립트라 한들 JS와 크게 다르지 않다. 표면적으론 타입을 지정해주는게 다를 뿐이다.
타입을 지정할 때는 아래와 같은 방법을 쓸 수 있다.
직접 타입 지정
콜론( : )을 사용하여 직업 타입을 지정할 수 있다.
const plus = (a:number, b:number) => a + b;interface
인터페이스 선언은 객체의 모양(object's shape)을 설명한다. 인터페이스가 정의된 컴포넌트나 함수는 인터페이스에 있는 props를 반드시 준수해야 한다.
interface BoxProps {
bgColor: string;
borderColor?: string; // string | undefined - optional prop
}
function Box({ bgColor, borderColor }: BoxProps) {
return <Container bgColor={bgColor] borderColor={borderColor ?? bgColor] />;
}
// or
function Box(props: BoxProps) {
return <Container bgColor={props.bgColor} borderColor={props.borderColor} />;
}
// App.tsx
function App(){
return <div>
<Box bgColor="tomato" borderColor="black" />
<Box bgColor="teal" />
</div>;
}useSate
const [value, setValue] = useState<number | string>(0);
setValue(3);
setValue("hello");
// setValue(true); ErroruseSate에서 초기값을 지정할 경우, 타입을 지정하지 않아도 초기값의 데이터 타입에 따라 앞으로의 value 값을 유추한다.
초기값을 지정하지 않으면 타입은 undefined가 되며, 드물게 복수의 타입이 들어오게 될 경우 <number | string>처럼 지정해준다.
event type
function App(){
const [value, setValue] = useState("");
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
const {
currentTarget: { value },
} = event;
setValue(value);
};
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log("hello", value);
};
return (
<form onSubmit={onSubmit}>
<input value={value} onChange={onChange} type="text" placeholder="username" />
<button type="submit">Log in</button>
</form>
);
}event 객체를 사용할 때도 타입을 지정해주어야 한다.
React.FormEvent<HTMLInputElement>;위 코드는 리액트의. 폼에서. input에 의해 일어나는 이벤트를 의미한다. 복잡해서 바로 외우진 못하지만 보통 vscode에서 이벤트(onChange, onClick, onSubmit 등)에 커서를 올리면 친절하게 알림이 뜬다.
참고로 FormEvent와 ChangeEvent의 속성은 동일하다.
다른 리엑트 이벤트가 궁금하다면 'SyntheticEvent 가이드'를 참고하자.
styled-components theme
타입스크립트에서 styled-components를 사용하려면 npm을 따로 설치해주어야 한다.
npm install --save-dev @types/styled-components그리고 좀 더 효율적으로 사용하기 위해 선언 파일(declarations file)을 만들어 준다. 선언 파일을 생성해주면 어떤 값이 들어가는지 미리 확인이 가능하다. "파일명.d.ts" 처럼 파일명을 지정해준다.
// styled.d.ts
import "styled-components";
declare module "styled-components" {
// Theme interface
export interface DefaultTheme {
borderRadius: string;
colors: {
main: string;
secondary: string;
};
}
}작성한 interface를 기반으로 테마나 레이아웃 등 스타일을 선언한다.
// theme.ts
import { DefaultTheme } from "styled-components";
export const lightTheme: DefaultTheme = {
borderRadius: "12px",
colors: {
main: "#222",
secondary: "#eee",
},
};
export const darkTheme: DefaultTheme = {
borderRadius: "12px",
colors: {
main: "#fefefe",
secondary: "#aaa",
},
};