[11주차 Day3] 타입스크립트

반 히·2024년 5월 8일
TIL데브코스타입스크립트프로그래머스

데브코스

목록 보기
25/58
post-thumbnail

💡 타입스크립트 열거형과 리터럴 타입

📌 리터럴 타입

  • 리터럴 타입은 특정 값을 나타내는 타입으로 타입스크립트의 타입 중 하나이며, 해당 값이 정확하게 일치해야 한다.
    • 해당 값의 집합 중의 하나로 타입을 제한하는 것
  • 리터럴 타입을 사용하면 좋은 점
    • 코드의 가독성이 높아짐.
    • 잘못된 값이 들어오는 것을 방지할 수 있음.
  • 타입스크립트에서 사용되는 리터럴 타입에는 다양한 종류가 있다.

🔗 문자열 리터럴 타입

let status : 'success' | 'error';
status = 'success';		// 유효
status = 'pending';		// 에러 : 'pending'은 허용되지 않음

🔗 숫자 리터럴 타입

let speed : 50 | 100 | 200;
speed = 100;	// 유효
speed = 150;	// 에러 : 150은 허용되지 않음

🔗 불리언 리터럴 타입

let isTrue : true;
isTrue = true;	// 유효
isTrue = false;	// 에러 : false는 허용되지 않음

🔗 객체 리터럴 타입

let person : { name : 'John', age : 30 };
person = { name : 'John', age : 30 };	// 유효
person = { name : 'Alice', age : 25 };	// 에러 : 값이 일치해야 함

🔗 타입 별칭

type CardinalDirection = 'North' | 'East' | 'South' | 'West';
let direction : CardinalDirection;
direction = 'North';	// 유효
direction = 'Northeast';	// 에러 : 'Northeast'는 허용되지 않음
const user : { name : string, age : number }= {
    name : 'hanbirang',
    age : 23
};

객체의 프로퍼티도 타입 명시 가능함.


💡 타입스크립트 유니온 타입, 타입 별칭, 타입 가드

📌 any 타입

  • 타입스크립트는 타입에 관한 정보가 더 많을수록 더 좋다.
  • 타입 정보는 개발자의 의도를 명확하게 전달할 수 있다.
  • 효과적인 코드의 유지보수가 가능하다.
  • any 타입을 일부러 사용하지는 말자
  • 타입을 지정할 수 없는 제한적인 경우에만 any 타입을 사용하라.
let anyVal : any = 100;
anyVal = 'lim';
anyVal = true;
// 오류 발생하지 않음

📌 유니온 타입 (공용체)

  • 제한된 타입을 동시에 지정하고 싶을 때 사용 (사용자 정의 타입) 
let anyVal : number | string;
  • | 기호를 사이에 두고 동시에 타입을 지정할 수 있음.
  • anyVal 변수는 number나 string 타입 중 아무 타입의 값이 올 수 있음 
let anyVal : number | string = 100;
anyVal = 'lim';
anyVal = true;	// 에러 : boolean 타입은 오류 발생함.  
let numStr : number | string = '100';

function convertToString(val : number | string) : string {
    // return 'lim';
    return String(val); // val이라는 값을 string으로 변환시켜서 return함 
} 

function convertToNumber(val : number | string) : number {
    // return 100;
    return Number(val); // val이라는 값을 숫자로 변환시켜서 return함 
} 

console.log(convertToString(numStr));   // 문자열 100
console.log(convertToNumber(numStr));   // 숫자 100

📌 타입 별칭

  • type 키워드를 사용해서 새로운 타입을 선언하는 것을 타입 별칭이라고 함
  • 코드를 재사용할 수 있고, 가독성도 매우 좋음 
type strOrNum = number | string;

let numStr : strOrNum = '100';

function convertToString(val : strOrNum) : string {
    // return 'lim';
    return String(val); // val이라는 값을 string으로 변환시켜서 return함 
} 

function convertToNumber(val : strOrNum) : number {
    // return 100;
    return Number(val); // val이라는 값을 숫자로 변환시켜서 return함 
} 

console.log(convertToString(numStr));   // 문자열 100
console.log(convertToNumber(numStr));   // 숫자 100
let numStr : strOrNum = '100';
let item : number;

item = numStr; // 오류 발생 큰 범위에서 작은 범위에 대입하는 것은 옳지 않음

📌 타입 가드

  • typeof operator를 사용해서 코드 검증을 수행하는 것을 타입 가드라고 함
type strOrNum = number | string;

let numStr : strOrNum = '100';
let item : number;

function convertToString(val : strOrNum) : string {
    // item = numStr; 오류 발생 큰 범위에서 작은 범위에 대입하는 것은 옳지 않음 
    // typeof operator 
    if (typeof val === "string")
        item = 0;
    else 
        item = val;
    return String(val); // val이라는 값을 string으로 변환시켜서 return함 
}

📌 요약

  • any 타입 : 타입 체크를 하지 않는다. 어떠한 타입이 오더라도 ok.
  • 유니온 타입 : 제한된 타입들을 파이프라인으로 구분하여 동시에 지정.
  • 타입 알리아스 : 반복되는 코드를 재사용함. (타입 재정의)
  • 타입 가드 : typeof 연산자를 이용하여 타입 검증을 수행한다.

💡 타입스크립트 Array와 Tuple 데이터 타입

📌 Array

let numbers : number[] = [1, 2, 3, 4, 5];

let fruits : string[] = ['apple', 'banana', 'orange'];

for(let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

for(let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// 배열의 유니온 타입 
let mixedArray : (number | string)[] = [1, 'two', 3, 'four'];

for (let i = 0; i < mixedArray.length; i++) {
    console.log(mixedArray[i]);
}

let infer = [1, 2, 3];  // 타입 추론 

for (let i = 0; i < infer.length; i++) {
    console.log(infer[i]);
}

let readOnlyArray : ReadonlyArray<number> = [1, 2, 3];  // 읽기 전용, 수정 불가

📌 Tuple

// 튜플 (자바스크립트에서는 없는 데이터 타입) : 타입의 순서가 정해져있다.
let greeting : [number, string, boolean] = [1, 'hello', true];

for (let i = 0; i < greeting.length; i++) {
        console.log(greeting[i]);
}

📌 Array와 Tuple의 차이점

  • Array는 길이가 가변적이며 동일한 타입의 요소로 구성
  • Tuple은 길이가 고정적이며 각 요소의 타입이 정해져 있음.

📌 Spread 연산자

  • ... : spread 연산자
  • 괄호를 벗겨주는 역할을 함.
let firstArray = [1, 2, 3];
let secondArray = [4, 5, 6];

let combineArray = [...firstArray, ...secondArray];

for (let i = 0; i < combineArray.length; i++) {
    console.log(combineArray[i]);
}

💡 타입스크립트 기반의 OOP(객체지향)

📌 클래스와 객체

  • 코드의 규모가 커지면서 코드를 구조화하지 않으면 복잡하고 유지보수가 힘든 코드가 됨
    • 따라서 사용자 정의 타입을 만듦
    • 구조체, 공용체, 열거형, 인터페이스, 클래스 등
  • 클래스는 객체 지향 기반에서 사용되는 사용자 정의 타입
    • 연관된 변수와 함수들을 한 덩어리로 묶음
  • 클래스(설계도, 생산틀)는 객체의 뼈대, 객체는 클래스의 실체
    • (ex : 붕어빵 틀과 붕어빵) 
// 멤버 변수 == 속성 == 프로퍼티
// 멤버 함수 == 메소드 
class Employee {
    empName : string;
    age : number;
    empJob : string;

    printEmp = () : void => {
        console.log(`${this.empName}의 나이는 ${this.age}이고, 직업은 ${this.empJob}입니다.`);
    }
}

let employee1 = new Employee();
employee1.empName = 'lim';
employee1.age = 21;
employee1.empJob = 'developer';

employee1.printEmp();

📌 생성자

프로퍼티의 초기값들을 생성자를 이용해서 설정할 수 있음. 모든 클래스는 생성자라는 메소드를 가질 수 있음. 타입스크립트에서는 constructor이름을 사용함 

class Employee {
    empName : string;
    age : number;
    empJob : string;

    constructor(empName : string, age : number, empJob : string) {
        this.empName = empName;
        this.age = age;
        this.empJob = empJob;
    }
}
let employee1 = new Employee('lim', 21, 'developer');

선택적 optional 기호를 사용하려면 그 기호 아래에 있는 매개변수 모두 물음표를 적어줘야 함. 

constructor(empName : string, age? : number, empJob? : string) {
        this.empName = empName;
        this.age = age;
        this.empJob = empJob;
}

📌 접근지정자

public private protected : 데이터 접근을 제한하기 위해 사용
일반적으로 멤버 변수는 private로 설정하여 외부에서 접근하지 못하도록 함
메소드를 통해서만 접근 가능 

class Employee {
    private empName : string;
    private age : number;
    private empJob : string;

    constructor(empName : string, age? : number, empJob? : string) {
        this.empName = empName;
        this.age = age;
        this.empJob = empJob;
    }
}

let employee1 = new Employee('lim', 21, 'developer');
// employee1.empName = 'hanbi';  // private이라 에러 발생

📌 getter setter

private으로 설정된 멤버 변수에 접근할 수 있도록 해줌. 

class Employee {
    private _empName : string;
    private _age : number;
    private _empJob : string;

    constructor(empName : string, age : number, empJob : string) {
        this._empName = empName;
        this._age = age;
        this._empJob = empJob;
    }

    // get / set
    get empName() {
        return this._empName;
    }
    set empName(val : string) {
        this._empName = val;
    }
}

let employee1 = new Employee('lim', 21, 'developer');
employee1.empName = 'hanbi';

멤버 변수 선언과 생성자 부분에서 코드가 겹치므로 이를 한 번에 합칠 수 있음. 

class Employee {
    constructor(
        private _empName : string,
        private _age : number,
        private _empJob : string
    ) {

    }
}
profile
반 히
이전 포스트

[11주차 Day2] 타입스크립트

다음 포스트

[11주차 Day4] 타입스크립트 기반 리액트

0개의 댓글