[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-3

객체 리터럴

• enum보다 심플

    interface Student {
      stdId : number;
      stdName? : string;
      age?: number;  // 선택적 프로퍼티
      // gender?: string; // Female Male 두가지밖에 없음. 
      gender? : /*enum*/ 'Male' | 'Female';
      course?: string;
      completed?: boolean;
      // setName(name: string) : void; 아래와 동일
      setName? : (name: string) => void;
      getName? : () => string;
    }

    class MyStudent implements Student {  
        ...  
        gender: 'Male' | 'Female' = 'Female';  
        ...  
    }

리터럴 타입

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

  • 문자열 리터럴

  • 숫자열 리터럴 eg) let speed: 50|100|200;

  • 불리언 리터럴 eg) let isTrue:true;

  • 객체 리터럴(가장 많이 사용) eg) let person:{name : 'John', age:30}; 값이 일치해야함

    const user : {name : string, age : number} = { // 타입 지정시 올바른 값 들어왔는지 체크 가능
      name : 'john,
      age : 30
    }
    

  • 타입 별칭

    type CardinalDirection = 'North'|'East'|'South'|'West';
    let direction : CardinalDirection;
    direction = 'North'; //유효
    direction = 'Northeast'; // 에러
    

리터럴 타입 장점

• 코드의 가독성 높아짐
• 엄격해지므로 잘못된 값이 들어오는 것을 방지

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

any타입을 사용하는 경우

• 서드파티등을 통해 데이터를 동적으로 가져올 때 데이터 타입을 알 수 없는 경우 제한적으로 사용
• 일부러 사용하는 것은 지양
• 타입을 지정할 수 없는 경우에만 사용유니온 타입 (=공용체 타입)
• 제한된 타입을 동시에 지정하고 싶을 때
  let anyVal : number | string;
• | 기호를 사이에 두고 동시에 타입을 지정할 수 있다.
• anyVal 변수는 number 또는 string 타입 중 아무 타입이 올 수 있다.

let numStr : number | string ='100';
function convertToString(val : number | string) : string {
    return String(val);
}
function convertToNumber(val : number | string) : number {
    return Number(val);
}

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

그런데, number|string 반복되는게 생산성이 별로이지 않나? -> 그럴 때 타입 별칭을 사용

타입 별칭 = 타입 재정의 / 타입 가드 (typeof 사용해 타입 검증 수행)

type strOrNum = number | string;

let numStr : strOrNum ='100';
let item : number;
function convertToString(val : strOrNum) : string {
    // item = numStr; // 오류. 큰범위에서 작은 범위로 정의하는 것은 옳지 않음
    item = typeof val == 'string' ? 0 : val;
    return String(val);
}
function convertToNumber(val : strOrNum) : number {
    return Number(val);
}

Array와 Tuple

Array

// js
let numbers = [1,2,3,4,5]; // == new Array([1,2,3,4,5]); -> 힙메모리영역
// ts
let numbers : number[] = [1,2,3,4,5]; 
let fruits : string[] = ['apple', 'banana', 'orange'];
let mixedArray:(number|string)[] = [1,'two',3,'four']; // 배열의 유니온 타입

// 읽기 전용
let readOnlyArra : ReadonlyArray<number> = [1,2,3]; // 삭제추가 불가

tuple

• 타입의 순서가 사용자에 의해 정해져있으며 ts에서만 존재

  let greeting : [number, string, boolean] = [1,'hello', true];
  

  Array와 tuple의 차이점

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

접근 지정자

• private 앞에는 _ 를 붙이는 컨벤션을 주로 쓴다.

  constructor(
    private _empName : string,
    private _age? : number,
    private _empJob? : string
  ){
    ...
  }
  

getter setter

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