📌 함수
- 매개변수의 우측에 콜론(:)과 매개변수의 타입을 정의
- return 값의 타입은 소괄호()우측에 타입을 정의
➡ formatDate의 매개변수 d는 Date 객체 타입을 받아야하고, return 값은 문자열이어야 한다
const formatDate = (d: Date): string => { // ✅
const year = d.getFullYear();
const month = d.getMonth() + 1;
const day = d.getDate();
return `${year}년 ${month}월 ${day}일`;
};
const today = formatDate(new Date());
console.log(today);// lang의 경우 인자를 전달하지 않으면 "ko"라는 문자열 값이 할당
// delimiter는 물음표를 사용하여 선택적으로 인자 전달
let formatDate = (d: Date | number, lang = "ko", delimiter?: string): string => {
};📌 새로운 타입 - 기본
💡 1. Any
- 어떤 타입이라도 모두 지정 가능하다
- JS로 컴파일된 코드를 보면 아무 타입도 지정되지 않은 원래의 JS 코드와 똑같다.
➡ any 타입을 쓰면? 타입스크립트 안 쓴 거와 같다 (any는 쓰지말자)
💡 2. void
- void는 any와는 반대로 어떤 타입도 없다는 뜻
- 보통 함수에서 반환값이 없는 경우 사용
💡 3. Enum
- 언제 사용 ? 상수로된 세트 값이 필요할 때
// Category라는 이름의 enum 타입을 정의한다
// Category의 enum 값에 Past, Pizza, Dessert 가 있다.
enum Category {
Pasta,
Pizza,
Dessert
}
let menuCategory: Category = Category.Pasta; // 0
// enum에 값 부여
enum Category {
Pasta = 'pasta',
Pizza = 'pizza',
Dessert = 'dessert'
}
let menuCategory: Category = Category.Pasta; // pasta💡 4. union
- union타입은 여러 타입이 올 수 있을 때 사용
function formatDate(date: string | number | Date): string {
// 로직 생략
return `${year}년 ${month}월 ${day}일`
}
formatDate(20201028);
formatDate(new Date());
formatDate('20201028');- 배열에 여러 타입의 값을 사용하고 싶을 때, 튜플을 쓸 때와 union을 쓸 때의 차이점
// union
let starNumberArr: (number | string)[] = [1, 2];
starNumberArr.push("3점");
// tuple
let starArr: [number, string] = [1, "1점"];- union은 사용하고자 하는 타입 중에 하나만 있어도 가능.
튜플을 사용하면 배열의 요소에 정의한 타입이 모두 존재해야 한다.
💡 5. Type Alias
- 타입을 재사용하거나, 객체를 위한 타입을 정의할 때 많이 사용
// 방법은 아래처럼 type으로 정의하거나, interface로 타입을 정의하거나.
type ID = number | string;
//checkInfo 함수의 매개변수 info 객체를 위해 Info라는 타입을 만들기.
type Info = {
id: ID;
pw: string;
};
function checkInfo(info: Info) {
}
let id: ID = "1010";
checkInfo({ id, pw: "password" });📌 타입추론 (Type Inference)
- 타입스크립트에서는 타입을 표기하지 않아도 타입스크립트 컴파일러가 변수에 할당된 값을 보고 타입을 추측
// ts 파일에서
let starArr = [1, 2, 3];
starArr.push('4점');
// 에러: Argument of type 'string' is not assignable to parameter of type 'number'.
// starArr는 숫자로만 이루어진 배열이 할당되어, number[] 타입으로 추론됨 => 에러 발생!📌 인터페이스 (Interface)
-
state와 props의 타입을 정의하는데 주로 사용
-
readonly,?키워드 사용
// readonly는 읽기만 가능한 프로퍼티로, 값을 수정할 수 없습니다.
// 프로퍼티명 다음에 물음표(?)를 사용하면 해당프로퍼티를 추가해도 되고 안해도 됩니다.
interface Restaurant {
readonly name: string;
star: number;
address?: string;
}
const chroad3: Restaurant = {
name: "취향로3가",
star: 5,
};
chroad3.name = "chroad3"; // 에러: Cannot assign to 'name' because it is a read-only property.
chroad3.star = 4;
const sipboon: Restaurant = {
name: "십분의일",
star: 5,
address: "을지로3가",
};extends사용 : 기존에 정의된 인터페이스를 확장
interface BasicInfo {
name: string;
star: number;
}
const sipboon: BasicInfo = {
name: "십분의일",
star: 5,
};
// extends
interface DetailInfo extends BasicInfo {
address: string;
phone: string;
position: number[];
}
const chroad3: DetailInfo = {
name: "취향로3가",
star: 5,
address: "을지로3가",
phone: "123-456-7890",
position: [37.565496, 126.99142],
};- 교차타입 :
type사용
➡ 합쳐서 새로운 인터페이스를 만드는 것은 아니고,& 기호를 사용하여 기존에 정의했던 인터페이스를 합쳐서 새로운 타입을 만드는 것
interface BasicInfo {
name: string;
star: number;
}
interface DetailInfo {
position: number[];
}
type Info = BasicInfo & DetailInfo;📌 타입호환성 (Type Compatibility)
Q. v1, v2 둘 중에 어떤 라인이 에러가 날까?
function getStar(score: number | string, scoreNum: number) {
const v1: number = score;
const v2: number | string = scoreNum;
}- (정답) v1
- 만약 score가 문자열로 전달됐다면 string 타입이 되기 때문에 v1 타입인 number에 포함되지 않는다.
- scoreNum 매개변수는 숫자타입이기 때문에 v2타입인 number, string 둘 중에 하나 포함되므로 타입이 호환된다.
📌 제네릭 (Generic)
- 타입을 정의할 때 특정 타입으로 고정된 것이 아니라,
내가 원하는 타입을 자유롭게 지정해서 계속 사용하고 싶을 때 제네릭을 사용 - 제네릭은 타입을 마치 재사용할 수 있는 변수처럼 취급해서 여러 군데에서 사용하고 싶을 때 사용
- 제네릭은 함수명 우측에 화살표괄호(<>)로 감싼다.
- T는 특별한 의미가 없는 변수명 같다고 생각하면 되는데,
제네릭을 사용할 때 보통 대문자 T를 자주 사용한다.
(내가 원하는 이름으로 자유롭게 작성할 수 있다)
function makeArr<T>(el: T): T[] {
return [el];
}
makeArr<number>(1); // 1 number[]
makeArr<string>("1점"); // 2 string[]
makeArr<boolean>(true); // 3 boolean[]- 제네릭 타입을 명시하지 않아도 컴파일러는 전달되는 인자값을 통해 타입을 추론하여 T의 타입을 결정
- 아래 코드는 훨씬 간결하고 가독성이 높아졌지만, 추후 유지보수를 위해서나 더 복잡한 예제의 예상치 못한 오류를 위해 제네릭 타입을 정확히 써주는게 좋을 때도 있다.
makeArr(1);
makeArr("1점");
makeArr(true);📌 리액트를 위한 타입스크립트
💡 객체 타입을 정의하는 방법은 object, interface, type alias 세 가지!
- object 타입 → 타입을 재사용할 수 없으며, 프로퍼티가 많을 수록 가독성이 좋지 않다
- state나 props를 정의할 때 interface나 type을 사용하는 것이 좋다.
- type과 interface는 확장, 병합 가능성이라던지 선언 등의 차이점이 있어서 상황에 따라 적절하게 사용하면 되지만, 타입스크립트 공식 문서에는 type보다 interface를 사용하라고 되어있다.
💡 함수형 컴포넌트의 타입을 선언하는 두 가지 방법
1. 리액트의 FC 타입 사용
interface StarsProps { // prop 타입 정의
star: number;
}
const Stars: React.FC<StarsProps> = ({ star }) => { //
return (
<div>
{makeStars(star)}
</div>
)
}2. 일반적인 함수정의 방식
interface StarsProps { // prop 타입 정의
star: number;
}
const Stars = ({ star }: StarsProps): JSX.Element => { //
return (
<div>
{makeStars(star)}
</div>
)
}💡 Hooks
* useState
- 특별히 타입을 명시하지 않더라도 타입추론을 통하여 타입이 지정된다.
const [like, setLike] = useState(false);
useState<boolean>(initialState: boolean | (() => boolean))
: [boolean, Dispatch<SetStateAction<boolean>>]- state의 초기값을 설정할 때 null을 사용하면? 유니온 타입을 사용하여 타입을 명시
// 유니온 타입으로 전달
const [like, setLike] = useState<boolean | null>(null);- state에 객체가 포함된 경우, 자세한 프로퍼티 타입을 알 수 있도록 아래와 같이 정의
// state 타입 정의
interface Comment {
comment: string;
username: string;
date: string;
star: number;
}
const [comments, setComments] = useState<Comment[]>([]);* useRef
- useState처럼 타입을 명시하지 않아도 된다.
- 만약 코드의 명확성을 위해서 타입을 정의하고 싶은 경우, 아래와 같이 ref의 태그에 맞는 제네릭을 넘겨주면 된다.
const reviewRef = useRef<HTMLDivElement>(null);
//로직 생략
return (
<>
<Review reviewTextRef={reviewRef} />
<div ref={reviewRef}>
리뷰
</div>
</>
)💡 Event Handler
- 이벤트 핸들러 함수의 이벤트 매개변수에는 특별한 타입이 필요하다
- 물론 매개변수에 타입을 명시하지 않아도 오류는 나지 않지만, 정확히 어떤 종류의 이벤트이고, 어느 태그에서 발생하는 것인지 써주는 것이 좋다.
- 일반적으로 타입 이름은 "이벤트타입Event"으로 ChangeEvent, FormEvent, TouchEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent 등이 있다.
💡 전역 변수
- window에 외부 라이브러리 변수를 추가하려면 아래와 같이 해당 라이브러리에서 사용하는 전역 변수명을 추가하면 된다.
declare global {
interface Window {
kakao: any;
}
}
단단_프로트엔드개발자!