타입스크립트 기초

장단점

장점

• 타입이 있음.

• 안정성 - 컴파일 단계에서 미리 오류를 감지할 수 있음.

• 가독성 - 타입을 보고 무엇을 하는지 미리 알 수 있음.

단점

• 초기 설정을 해야 함.

• 스크립트 언어의 유연성이 낮아짐.

• 컴파일이 시간이 길어질 수 있음.

타입 주석과 타입 추론

• 타입 주석은 변수, 상수 혹은 반환 값이 무슨 타입인지를 나타내는 것을 의미함.

• 타입 추론은 해당 변수가 어떤 타입인지 추론하는 것임. 생략하면 컴파일 타임에 알아냄.

let a: number = 1; //타입 주석
let b = 2; // 타입 추론 - 컴파일 타임에 TS가 타입을 추론하여 부여함. b에 다른 타입을 넣을 경우 에러남.
let c: boolean = false;
let d: string = 'TypeScript';
let f: {a:1}; //f는 객체 타입, a는 number 타입으로 추론됨.
let h: number[] = [];
let g: any = 3; //어떤 타입을 대입해도 에러는 나지 않지만 남발하는 것은 좋지 않음. 유연성을 살리고 싶을 때만 사용.
function add(a: number, b: number): number {
	return a+b;
}

인터페이스

• 객체의 타입을 정의하는 방법.

• interface라는 키워드로 지정함.

interface Company {
	name: string,
	age: number,
	address?: string, //optional
}

const cobalt: Company {
	name: "Cobalt, Inc.",
	age: 3,
}

//익명 인터페이스 - 한 번만 정의할 것이라는 게 확실하다면 익명 인터페이스로 깔끔하게 처리할 수 있음.
const person: {
	name: string,
	age: number
} = {
	name: 'Lim Hyo-Sung',
	age: 100
}

그 외

Tuple

//배열을 Tuple로 이용하는 방법.
const tuple: [string, number] = ['Hyousng', 100];

enum

//열거형을 사용하는 방법.
enum Color {
	RED = 'red',
	GREEN = 'green'
}

const color = Color.BLUE;

대수 타입

//여러 자료형의 값을 가질 수 있게 하는 방법.
//합집합 타입과 교집합 타입이 있음.
let numOrStr: number | string = 1; //교집합은 원시 타입에서 사용할 수 없음.

interface Name {
	name: string
}

interface Age {
	age: number
}

let hyosung: Name & Age = {
	name: 'hyosung',
	age: 100
}

//새로운 타입을 만들 때도 용이함.
type Person = Name & Age;
let julia: person = {
	name: 'julia',
	age: 100
}

Partial, Required, Pick, Omit

//기존 interface를 재활용할 수 있게 만듦.

interface User {
	id: number,
	name: string,
	createdAt?: number
}

//모든 필드가 optional이 됨.
const a: Partial<User> = {}

//모든 필드가 required가 됨. optional 물음표도 예외 없음.
const b: Required<User> = {}

//특정 필드만 골라서 사용할 수 있음.
const c: Pick<User, 'name' | 'createdAt'> = {
	name: 'hyosung',
	createdAt: 2021
}

//특정 필드만 빼고 사용할 수 있음.
const d: Omit<User, 'id'> = {
	name: 'hyosung',
	createdAt: 2021
}

extends

//특정 인터페이스를 상속받아 인터페이스를 확장할 수 있음.
interface Time {
	hour: number,
	minute: number,
	second: number
}

interface TimeFormat extends Pick<Time, 'hour' | 'minute'> {
	ampm: 'am' | 'pm'
}

const timeFormat: TimeFormat = {
	hour: 10,
	minute: 30,
	apmp: 'am
}

시작

• npx create-react-app my-app --template typescript

• yarn add @craco/craco

• yarn add @emotion/react

• yarn add @emotion/styled

• yarn add -D @emotion/babel-preset-css-prop

module.exports = {
  babel: {
    presets: ["@emotion/babel-preset-css-prop"],
  },
};