1111 객체리터럴과 유니온, 타입별칭, 타입가드, 타입스크립트 기반 객체 지향 프로그래밍

객체 리터럴

리터럴 타입

• 리터럴타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 한다.
• 타입스크립트에서 사용되는 리터럴 타입에는 다양한 종류가 있다.

    gender? : GenderType;   // enum 형식
    gender? : 'male' | 'female';    // 객체 리터럴

• 문자열 리터럴 타입

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

• 객체 리터럴 타입

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

➡️ 객체 타입 지정

// 객체 타입 지정
const user : {name : string, age : number} = {
    name : 'john',
    age : 25
}

• 타입 별칭

let CardinalDirection = 'North' | 'East' | 'South' | 'West', 
let direction = CardinalDirection; direction = 'North'; // 유효 
direction = 'Northeast'; // 에러 : 허용되지 않음

 

리터럴 타입 좋은 점

• 코드의 가독성 높아진다.
• 잘못된 값이 들어오는 것 방지

---

유니온, 타입별칭, 타입가드

any타입

• 타입 스크립트는 타입에 관한 정보가 더 많을수록 좋다.
• 타입 정보는 개발자의 의도를 명확하게 전달 가능
• 효과적인 코드의 유지보수가 가능하다.
• any 타입을 일부러 사용하지는 말자
• 타입을 지정할 수 없는 제한적인 경우에만 any 타입을 사용하라.

// any : 아무값이나 ok 
let anyVal : any = 100; 
anyVal = 'kim';

 

유니온타입

• 제한된 타입을 동시에 지정하고 싶을 때가 있다.
• | 기호를 사이에 두고 동시에 타입 지정 가능
• anyVal 변수는 number나 string 타입 중 아무 타입의 값이 올 수 있다.

// 유니온(공용체)
let anyVal : number | string = 100;
anyVal = 'kim';

• 함수 유니온 타입 사용 예시

// 함수 유니온 타입 사용 예시 
let numStr : number | string = '100'; 

// string 변환 함수 
function convertToString(val : number | string) : string{ 
    return String(val); 
} 

// number 변환 함수 
function convertToNumber(val : number | string) : number{
    return Number(val); 
} 

console.log(convertToString(numStr)); 
console.log(convertToNumber(numStr));

 

타입 별칭(알리야스)

• 반복되는 타입 지정 코드를 재사용

// 타입 별칭  
type strOrNum = number | string;

// 함수 유니온 타입 사용 예시  
let numStr : strOrNum = '100';

 

타입가드

• typeof 연산자를 이용하여 타입 검증 수행

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

// string 변환 함수  
function convertToString(val : strOrNum) : string{  
// 큰 범위에서 작은 범위로 가면 에러 발생  
// item = numStr;  
// typeof operator 사용 : 타입 가드  
if(typeof val === 'string'){  
item = 0;  
}else{  
item = val;  
}

return String(val);

}

 

---

array와 tuple

배열

• 길이가 가변적이며 동일한 타입의 요소로 구성

// 배열  
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 = [1,2,3];

 

튜플

• 길이가 고정적이며 각 요소의 타입이 정해져 있다.

// 튜플 : 타입의 순서가 정해져 있다.  
let greeting : [number, string, boolean] = [1, 'hello', true];  

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

 

스프레드 연산자

• 배열 합치기

// spread 연산자
let firstArray = [1,2,3];
let secondArray = [4,5,6];

let mixed = [...firstArray, ...secondArray];
for(let i = 0; i < mixed.length; i++){
    console.log(mixed[i]);
}

---

 

클래스와 객체 만들기

• 클래스(설계도, 생산틀)는 객체의 뼈대
• 객체는 클래스의 실체

타입스크립트 기반의 oop

// 멤버변수 == 속성 == 프로퍼티  
// 멤버함수 == 메소드  
class Employee{  
    empName : string;  
    age : number;  
    empJob : string;

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

}

// 이 변수를 객체라고 함  
let employee1 = new Employee();  
employee1.empName = 'kim';  
employee1.age = 20;  
employee1.empJob = '개발자';  

employee1.printEmp();

---

 

생성자

• 생성자로 초기화하기

    // 생성자 만들기 : 초기화  
    constructor(empName : string, age : number, empJob : string){  
        this.empName = empName;  
        this.age = age;  
        this.empJob = empJob;  
    }

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

}

 
let employee1 = new Employee('kim', 20, '소프트웨어개발자');  

employee1.printEmp();

• 선택적 매개변수 받기

// 선택적 매개변수 : 지정 시 뒤에 나오는 매개변수도 옵션이어야 함  
constructor(empName : string, age? : number, empJob? : string){  
this.empName = empName;  
this.age = age;  
this.empJob = empJob;  
}

 

---

 

접근 지정자

• 접근지정자 : public, private, protected

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

// 접근지정자 지정 시 외부 접근 불가  
employee1.empName = 'lee';	// 에러

---

 

getter와 setter

class Employee{
    // private 변수는 기본적으로 _ 붙인다.
    private _empName : string;
    private _age : number;
    private _empJob : string;
	
	// get/set
    get empName(){
        return this._empName;
    }

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

// set 지정 시 가능
employee1.empName = 'kong';

• 변수 선언 중복 피하기 위해 생성자 선언 매개 변수에 바로 변수 지정 가능

  class Employee{
  // private 변수는 기본적으로 _ 붙인다.
  // private _empName : string;
  // private _age : number;
  // private _empJob : string;
  
  // 생성자
  constructor(
      private _empName : string,
      private _age : number,
      private _empJob : string){
      // this._empName = empName;
      // this._age = age;
      // this._empJob = empJob;
  }