[Typescript] 타입스크립트 알아보기

1. 타입스크립트란?

자바스크립트에서 타입(형)을 다루도록 한것. 자바스크립트의 문법 및 표기법을 그대로 사용할 수 있다.

create-react-app에서 타입스크립트 시작하기

npx create-react-app [프로젝트명] --template typescript

 

2. 타입 지정 방법

콜론을 붙여서 타입 지정.

예시) 문자열 타입 지정

let str: string = "a";
str = "10"; // ok
str = 10 // invalid

 

그 외 기본 자료형 지정

• number
• boolean
• Array
• null(null만 대입 가능)
• undefined(undefined만 대입 가능)
• any

 

함수 타입 지정

함수 타입은 인자와 반환값의 타입을 각각 지정한다.

const funcA = (num: number): void => {
	console.log(num);
}

funcA("10"); // invalid!

 

복합 타입

type TypeA = {
	str: string;
	num: number;
}

type TypeB = {
	str: string;
	bool: boolean;
}

type TypeC = TypeA & TypeB;

const obj: TypeC = {
	str: "A",
	num: 10,
	bool: true,
};

 

병합 타입

let val : string|number = "";

 

3. Props 타입 지정

props가 어떤 속성을 받는지 미리 알 수 있으면 컴파일 단계에서 에러를 잡아낼 수 있다.

예시

type User = {
	id: number;
	name: string;
	age: number;
};

export const ListItem = (props: User) => {
	const {id,name,age} = props;
	return (
		<p>
			{id} : {name}{age})
		</p>
	);
};

User가 여러 곳에서 쓰인다면 export 하여 사용 가능.

 

임포트 예시

import type {User} from "../types/user";

 

4. 생략 가능 타입

다른 현대적인 언어와 마찬가지로 ?을 사용할 수 있다.

export type User = {
	id: number;
  name: string;
	age?: number; // 생략 가능
};

 

옵셔널 체이닝도 사용 가능하다.

{hobbies?.join()} // hobbies 속성이 존재하는 경우에만 이후 메서드를 실행