[TIL] 엘리스 SW 엔지니어 트랙 Day 023

📖 오늘 배운 내용 - 2021.11.24

• 타입스크립트 장점
• 클린 코드
• 타입스크립트 기본 Type
• Utility types
• TS로 함수 사용하기
• TS로 클래스 사용하기
• 상속
• 추상 클래스
• 접근 제어자
• Getter & Setter / readonly / static

 

📝 타입스크립트 기본 Type

• JS코드에 변수나 함수 등 Type을 정의할 수 있다.
• Type을 나타내기 위해서 타입 표기(Type Annotation)를 사용한다.
• TS의 Type
  • 기본 자료형(primitive type)
  • 참조 자료형(reference type)
  • 추가 제공 자료형

 

📕 기본 자료형

• object와 reference 형태가 아닌 실제 값을 저장하는 자료형
• primitive type 내장 함수를 사용 가능한 것은 자바스크립트 처리 방식 덕분
• String, Boolean, number, null, undefined, symbol

 

📕 참조 자료형

• 객체, 배열, 함수 등과 같은 Object 형식의 타입
• 메모리에 값을 주소로 저장하고, 출력 시 메모리 주소와 일치하는 값을 출력
• object, array, function

 

📕 추가 자료형

• TS에서 개발자 편의를 위해 추가로 제공하는 타입
• tuple, enum, any, void, never

 

[TypeScript] 타입스크립트 12개 타입

 

📝 Utility types

• 타입스크립트는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다.
• 유틸리티 타입은 전역으로 사용 가능하다.

 

📕 Partial<T>

interface Todo {
  title: string
  description: string
}

// obj매개변수 타입에 Partial Utility types을 추가해주세요
function updateTodo(obj: Partial<Todo>) { 
  return obj;
}

const result = updateTodo({
  title: "title",
})

console.log(result); // { title: 'title' } 출력

• 프로퍼티를 선택적으로 만드는 타입을 구성한다.
• 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다.

 

📕 Pick<T,K>

interface Todo {
  title: string
  description: string
  completed: boolean
}

// Pick을 이용해 title 프로퍼티를 포함해봅니다..
type TodoPreview = Pick<Todo, 'title'>

const todo: TodoPreview = {
  title: "Clean room"  
}

• 프로퍼티 K의 집합을 선택해 타입을 구성한다.

 

📕 Omit<T,K>

interface Todo {
  title: string
  description: string
  completed: boolean
}

// Omit을 이용해 description 프로퍼티를 제외해봅니다.
type TodoPreview = Omit<Todo, 'description'>

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,  
}

• 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성한다.

 

📝 타입스크립트를 이용해 함수 사용하기

📕 용어 정리

function add(x, y) {
    return x + y;
}

add(2, 5)

• 함수를 정의할 때 사용되는 변수를 매개 변수라고 한다. ⇒ (x, y)
• 함수를 호출할 때 사용되는 값을 인수라고 한다. ⇒ (2, 5)
• 인자 값 == 매개변수 == Parameter ⇒ x, y

 

📕 기본 매개변수, 선택적 매개변수, 기본-초기화 매개변수, 나머지 매개변수

[TypeScript] 타입스크립트 함수 사용하기

 

📝 클래스

• 클래스(class)란 객체를 정의하는 틀 또는 설계도와 같은 의미로 사용된다.
• 인스턴스(instance) : new 연산자에 의해서 생성된 객체

[TypeScript] 타입스크립트 클래스 사용하기 - 상속, 추상 클래스, 추상 클래스를 활용한 디자인 패

 

📕 객체 지향 프로그래밍 (OOP)

• OOP는 컴퓨터 프로그램을 객체(Object)의 모임으로 파악하려는 프로그래밍 패러다임이다.
• 객체(Object)들은 서로 메시지를 주고받을 수 있으며 데이터를 처리할 수 있다.
• 프로그램을 유연하게 변경이 용이하게 만든다.
• 프로그램의 개발과 보수를 간편하게 만든다.
• 직관적인 코드 분석을 가능하게 한다.
• 객체 지향 프로그래밍의 중요한 특성으로는 강한 응집력(Strong Cohesion)과 약한 결합력(Weak Coupling)을 지향한다.

 

📕 접근 제어자

[TypeScript] 타입스크립트 Class 접근 제어자

접근 제어자	같은 클래스	자식 클래스	그 외 영역
public	O	O	O
protected	O	O	X
private	O	X	X

 

📕상속

[TypeScript] 타입스크립트 클래스 사용하기 - 상속, 추상 클래스, 추상 클래스를 활용한 디자인 패

 

📕 Getter & Setter / readonly / static

[TypeScript] 타입스크립트 Getter & Setter / readonly / static

 

💡 오늘 깨달은 것

• 어제 내용을 보다 자세한 설명으로 들었다. 어제 내용 정리를 해서 그런지 오늘 설명들이 귀에 쏙쏙 박혔다. 역시 이해가 잘 안되는 내용은 두세 번 반복해서 보면 이해가 된다.
• 반복의 힘! 기록의 힘!

 

📌 참고

• 유틸리티 타입 | 타입스크립트 핸드북
• 타입스크립트 핸드북
• TypeScript 한글 문서