[TS] TypeScript Basic

타입스크립트 특징

• 변수 값에 데이터 타입 지정 가능
• 객체지향적
• 컴파일 타임 오류
• typescript를 자바스크립트로 컴파일하여 웹브라우저가 읽을 수 있게
• 프로그래밍 언어인 동시에 컴파일러

타입 추론

: 타입스크립트는 타입을 따로 표기하지 않으면 코드를 읽고 분석하여 어떤 타입인지 추론한다.

function calculateCodingIQ(lostPoints) {
    return 100 - lostPoints;
} // parameter의 타입을 따로 선언하지 않아도 return 값을 분석하여 parameter의 타입이 number임을 예측함.

타입 명시

: 변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정하는 것을 의미

문법 : let myname : string = '이승민';

• 콜론을 찍고 그 다음 변수의 데이터 타입을 지정

function calculateCodingIQ(lostPoints : number) {
    return 100 - lostPoints;
}

Interface

: 기존에 존재하는 타입 이외에 내가 속성들, 메서드들을 지정할 수 있는 타입

• 우리가 흔히 알고 있는 number, string, object를 타입으로 지정하기 보단 interface를 이용해 좀 더 명확하게 명시할 필요가 있다.
• 사용하는 이유 : 코드의 중복성 최소화, 이해를 돕기 위해

interface Student {  // interface는 맨 앞글자를 대문자로!
    // 속성을 인터페이스에 정의하는 방법
    readonly studentID: number;  // 읽기 전용 프로퍼티
    studentName: string;
    age?: number;  // 속성 뒤에 ?를 붙이면 선택적 프로퍼티가 되어 값이 있어도 되고 없어도 되는 값
    gender: 'male' | 'female';
    subject: string;
    courseCompleted:boolean; // 변환되는 객체의 구조 타입으로 지정
    // 메서드를 인터페이스에 정의하는 방법 2가지
    // addComment (comment: string): string;
    addComment?: (comment: string) => string;
}

Enum

: 연관된 아이템들을 함께 묶어서 표현할 수 있는 수단
: 타입을 어떠한 값으로 범위를 두고 싶을 때 사용하면 된다.

ex) 성별 속성의 값을 male, female만 들어갈 수 있게 하고 싶을 때

• 종류 : 숫자 열거형, 문자 열거형

enum GenderType {  // 숫자 열거형 - 순서대로 값에 숫자가 들어가게 됨
    Male,  // 0
    Female  // 1
}

enum GenderType1 {  // 문자형 열거형
    Male = 'male', // male 이라는 값
    Female = 'female'  // female 이라는 값
}

Literal Type

: enum과 비슷한 개념으로 값을 제한하고 싶을 때 사용하는 타입
: | 기호를 사용하여 값을 구분하면 된다!

interface Student {
    gender: 'male' | 'female';  // | 을 사용하여 값을 구분함
}

Any Type

: 어느 타입의 값이든 상관없는 타입

• typescript에서는 타입에 관한 정보가 많으면 많을수록 효과적인 코드 유지보수를 할 수 있다.
• 그래서 any 타입은 쓰지 않는 것이 좋다.

⇒ 만약 어떤 타입을 선언해야하는지 모를 때만 사용하도록 하자!

let someValue : any = 5;
someValue = 'hello';  // 아무런 에러 X

Union Type

: 제한된 타입들을 동시에 지정하고 싶을 때 사용하는 타입

let price: number | string = 5;  // | 으로 타입을 구분함
price = 'free';

• Union Type을 자주 사용하다 보면 다음과 같이 계속해서 쓰이는 Union 타입을 지정하는 코드가 반복되는 것을 느낄 수 있을 것이다.

let totalCost: number;
let orderID: number | string;

const calculateTotalCost = (price: number | string, qty: number) : void => {
	
};

const findOrderID = (customer: { costomerId: number | string, name: string}) : number | string => {
	return orderID;
}

Type Alias

같은 코드를 반복하는 것보다는 코드를 타입으로 지정하여 재활용!

⇒ Type Alias (타입 별칭)을 사용하자!

type StrOrNum = string | number; // type 선언

const calculateTotalCost = (price: StrOrNum, qty: number) : void => {
	
};

const findOrderID = (customer: { costomerId: StrOrNum, name: string}) : StrOrNum => {
	return orderID;
}

Type Guard

: union 타입을 사용할 때 코드 검증을 수행하는 것

• typeOf operator를 사용해서 수행한 type guard

let itemPrice: number;

const setItemPrice = (price: StrOrNum): void => {
    // price의 값이 string도 될 수 있고, number도 될 수 있기 때문에
    // 타입별로 조건을 달아줘야한다. -> typeOf Operator 사용
    if (typeof price === 'string') {
        itemPrice = 0;
    } else {
        itemPrice = price;
    }
}

setItemPrice(50);

Function in TypeScript

• 선택적 매개변수
  : 매개변수 뒤에 ?를 붙이면 매개변수로 넣어도 되고 넣지 않아도 되는 매개변수가 되버린다.

  • 주의사항) 선택적 매개변수를 사용할 때에는 필수 매개변수를 앞으로 배치해야한다!
  • 선택적 매개변수를 지정한 변수 뒤로는 무조건 선택적 매개변수가 되어버린다..

• 기본 매개변수
  : 매개변수에 default 값을 주고 싶다면 :을 사용하여 값을 넣으면 된다.
  (이때는 타입을 지정해도 되고 안해도 됨 : 타입 추론함)

// 기본 매개변수
const sendGreeting = (message = 'Hello', userName = 'there'): void => {
    console.log(`${message}, ${userName}`);
}

sendGreeting();  // Hello, there
sendGreeting('Good morning');  // Good morning, there
sendGreeting('Good afternoon', 'Jenny');  // Good afternoon, Jenny

// typescript compiler는 함수 호출 시 실행되는 함수의 매개변수와 전달하는 argument를 비교 검사한다.
// 그래서 인수와 매개변수가 맞지 않으면 오류를 발생시킴.
// 선택적 매개변수
const sendGreetingBefore = (message: string, userName?: string): void => {
    console.log(`${message}, ${userName}`);
}

각각의 객체는 속성과 행동을 가지고 독립적인 개체가 되기도 한다.
인간이라는 커다란 범주 안에 속한다.

객체지향 프로그래밍

: 연관된 변수와 함수들을 한 덩어리(객체) 로 묶어서 객체들이 서로 상호작용함으로써 시스템이 동작하는 프로그래밍 스타일

클래스

: 객체의 뼈대, 설계도, 생산틀

class Employee {  // 첫 글자는 대문자!
  ...
}

객체

: 클래스를 통해서 만들어질 수 있음

// 인스턴스 객체 생성
let employee1: Employee = new Employee('승민', '풀스택 개발자', 40, 35);

생성자

: 객체가 생성될 때 실행되는 함수

constructor (
        // Property
        // constructor의 매개변수에 접근 제어자 직접 적용하면 코드를 줄일 수 있음.
        private _fullName: string,  // _를 붙이면 암묵적으로 private (약속)
        private _jobTitle: string,
        private _hourlyRate: number,
        public _workingHoursPerWeek: number,
        private _age?: number,) {
}

메서드

• 클래스 내부에 있는 메서드들은 상대적으로 매개변수를 적게 가지게 됨.
• 이유: this 키워드를 이용해 클래스의 프로퍼티에 접근이 가능하기 때문이다.

printEmployeeDetails = (): void => {
            console.log(`${this.fullName}의 직업은 ${this._jobTitle}이고
            일주일의 수입은 ${this._hourlyRate*this._workingHoursPerWeek} 달러이다.`)
        }

접근 제어자(제한자)

: 클래스 속 멤버 변수와 메서드에 적용될 수 있는 키워드
: 클래스 외부로부터의 접근을 제어

• public : 클래스의 외부에서 접근 가능함 (생략 가능함)
• private : 클래스 내부에서만 접근 가능, 클래스 외부에서 접근 불가능 (비공개 멤버)
• protected : 클래스 내부, 그리고 상속받은 자식 클래스에서 접근 가능

외부에서 private으로 지정한 멤버 변수를 가져오려고 할 때

get fullName () {  // getter
	return this._fullName
}

set fullName (value: string) {  // setter
	this._fullName = value;
}

employee1.fullName = '민수';  // setter를 이용한 코드 (메서드를 마치 프로퍼티처럼 접근 가능)
console.log(employee1.fullName);  // getter를 이용한 코드

---

참고자료

제가 정말 강추하는 강의입니다! 도움이 많이 되었어요 😭

• https://www.youtube.com/playlist?list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN