⚡ 타입 스크립트 기초
📌 타입 스크립트란?
🔷 타입이 적용된 자바스크립트
- 기존의 자바스크립트보다 더 빠르게 유용한 스펙들을 적용했다.
- 앞서가는 개발자들에게 꼭 필요한 기술 스택
- 자료형을 명시하며 변수를 선언하였던 자바를 생각해보자.
⭐ 장점
-
안정성- 컴파일 단계에서 미리 오류를 감지할 수 있다.
-
가독성- 타입을 보고 무엇을 하는지 미리 알 수 있다.
⭐ 단점
-
초기 설정을 해야한다.
-
타입이 강제되다 보니 스크립트 언어의 유연성이 낮아진다.
-
컴파일 시간이 길어질 수 있다.
단점이 이러니저러니해도 타입 스크립트의 장점이 매우 강하여 자주 쓰인다.
📌 타입 스크립트 기초 개념
1. 타입 주석과 타입 추론
타입 주석은 변수, 상수 혹은 반환 값이 무슨 타입인지를 나타내는 것.타입 추론은 해당 변수가 어떤 타입인지 추론하는 것. 생략하면 컴파일 타임에 알아낸다.
// 타입 주석
let a: number = 1;
let c: boolean = false;
let d: string = 'TypeScript';
let f = { a: 1 };
f.a = 2;
// f.b = 3; => 오류 발생
let h: number[] = [];
// 특정 값을 타입으로 사용 가능, 이 경우에는 값이 타입으로 사용한 값으로 한정됨
let i: 'good' = 'good';
// 어떤 값이든 가능한 any, 남발하지 않는 것이 좋다.
let g: any = 3;
g = '1';
g = 3;
g= false;
// 함수의 매개변수와 리턴 값에도 타입을 지정해줄 수 있다.
function add(a: number, b: number): number {
return a + b;
};
// 타입 추론
let b = 2;
// b = 'a'; => 오류 발생2. 인터페이스
- 객체의 타입을 정의하는 방법.
interface라는 키워드로 사용한다.
// 인터페이스
// 속성 뒤에 ?를 붙이면 선택 속성으로서 undefined 속성으로 취급할 수 있다.
// 이를 Optional이라 부른다.
interface Company {
name: string;
age: number;
address?: string;
}
const naver: Company = {
name: 'Naver',
age: 20,
// address: 'Seoul' => 생략 가능
}
// 익명 인터페이스
const person: {
name: string,
age?: number
} = {
name: '박영규',
age: 26
}3. tuple
- 배열을
Tuple로 이용한다.
// tuple
// 리스트에 들어갈 수 있는 값을 제한하여 튜플을 흉내낼 수 있다.
const tuple: [string, number] = ['박영규', 26];4. enum
- 열거형을 사용하는 방법
// enum
// 코드 가독성이 좋아진다.
// 값을 지정해주어 커스터마이징을 할 수도 있다.
enum Color {
RED = 'red',
GREEN = 'green',
BLUE = 'blue'
};
const color = Color.BLUE;
if(color === Color.BLUE) {
// 코드
}5. 대수 타입
- 여러 자료형의 값을 가질 수 있게하는 방법
- 합집합 타입과 교집합 타입이 있다.
// 대수 타입 중 합집합 타입
let numOrStr: number | string = 1;
numOrStr = 'str';
// 대수 타입 중 교집합 타입
// let numAndStr: number & string = ''; => 불가능, 즉 원시 타입에서는 사용할 수는 없다.
// 인터페이스에서 주로 활용된다.
interface Name {
name: string
}
interface Age {
age: number;
}
let gue: Name & Age = {
name: '박영규',
age: 26
};
// 인터페이스에서 합집합 타입을 사용하면 optional로 사용이 가능하다.
let gue2: Name | Age = {
name: '박영규'
};
// 대수 타입과 type 키워드를 통해 타입을 만들어낼 수도 있다.
type Person = Name & Age;
let sue: Person = {
name: 'sue',
age: 20
}6. optional
- ES 2021에도 추가된 기능. 타입스크립트는 이미 있었다.
// optional을 인터페이스에서 응용하기
interface Post {
title: string;
content: string;
}
interface ResponseData {
post?: Post;
message?: string;
status: number;
}
const response: ResponseData[] = [
{
post: {
title: 'Hi!',
content: 'Hello!!!'
},
status: 200
},
{
message: 'Error!',
status: 500
}
];
console.log(response[1].post && response[1].post.title); // optional 이전의 방식
console.log(response[0].post?.title); // 데이터가 없다면 자동으로 undefined를 반환한다.
console.log(response[0].post!.title); // 반대로 무조건 값이 있어야한다고 설정할 수도 있다.
7. Generic
- 하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법
// Generic
// 꺽쇠 안에 타입을 넣어 지정해줄 수 있다.
interface Value<T> {
value: T;
}
const value: Value<number> = {
value: 1
}
// 함수에도 사용할 수 있다.
function toString<T>(a: T): string {
return `${a}`;
}8. Partial, Required, Pick, Omit
- 기존 interface를 재활용 할 수 있게 만든다.
interface User {
id: number;
name: string;
age: number;
address: string;
createdAt?: string;
updatedAt?: string;
}
// Partial: 모든 필드가 Optional이 된다.
const partial: Partial<User> = {}
// Reqired: 모든 필드가 Required가 된다.
const required: Required<User> = {
id: 1,
name: 'Lee',
age: 0,
address: 'Seoul',
createdAt: 'string',
updatedAt: 'string',
}
// Pick: 특정 필드만 골라서 사용할 수 있다.
const pick: Pick<User, 'name' | 'age'> = {
name: 'gue',
age: 26
}
// Omit: 특정 필드만 빼고 사용할 수 있다.
const omit: Omit<User, 'id' | 'createdAt' | 'updatedAt'> = {
name: '',
age: 0,
address: ''
}
// 혼합해서 응용할 수 있다.
const mixed: Omit<User, 'id' | 'address' | 'age' | 'createdAt' | 'updatedAt'> & Pick<Partial<User>, 'address' | 'age'> = {
name: '',
}9. extends
- 특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.
// extends
// 인터페이스 상속 개념 예시
interface Time {
hour: number;
minute: number;
second: number;
}
interface DateTime extends Time {
year: number;
month: number;
day: number;
}
interface OffsetDateTime extends DateTime {
offset: number;
}
interface TimeFormat extends Pick<Time, 'hour' | 'minute'> {
ampm: 'am' | 'pm';
}
const timeFormat: TimeFormat = {
hour: 10,
minute: 30,
ampm: 'am'
}낯선 타입스크립트에게서 익숙한 맛이 난다.
자바의 맛이리라.
Hodie mihi, Cras tibi