Today I Learned_230402

TypeScript

인프런 타입스크립트 강의 수강

섹션 6. 타입 별칭

인터페이스 정의 방식

interface Person {
    name: string;
    age: number;
}

타입 별칭 정의 방식

type Person = {
    name: string;
    age: number;
}

사용 방법

var seho: Person = {
    name: 'seho',
    age: 30
}

타입 별칭의 특징 : 인터페이스와는 다르게 primitive type 정의가 가능하다.

type MyString = string;
var str: MyString = 'hello';

type Todo = {id: string; title: string; done: boolean}
function getTodo(todo: Todo) {

}

섹션 7. 연산자를 이용한 타입 정의

연산자를 배우기 전에..

function logMessage(value: string) {
    console.log(value);
}

logMessage('hello');    // 정상적인 호출
logMessage(100);        // 숫자가 들어와서 실패

함수의 인자로 여러 타입을 전달하고 싶을 때 → 유니온 타입 사용

타입의 장점을 살리면서 문제를 유연하게 해결할 수 있는 방안

유니온 타입 : 특정 변수나 파라미터에 한 가지 이상의 타입을 사용하고 싶을 때

function logMessage(value: string | number) {
    console.log(value);

    if(typeof value === 'number') {
        value.toLocaleString(); //여기서의 value는 number가 된다 -> 타입 가드
        // 타입 가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링하는) 과정
    }

    throw new TypeError('value must be string or number');  // 예기치 못한 타입이 들어왔을 때 에러 핸들링 가능
}
logMessage('hello')
logMessage(100);

유니온의 특징

// 아래와 같은 인터페이스가 있을 때...
interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

// 둘 다 되어야 함 -> someone이 어떤 값이 들어올지 모른다.
// 보장된 속성만 제공을 한다.
function askSomeone(someone: Developer | Person) {
    someone.name;       //name이라는 공통 속성만 접근 가능
    someone.skill;      //타입 검증도 없이 바로 사용하게 되면 type safe하지 않다고 해서 충돌이 난다.
    someone.age;        //skill, age에도 접근하고 싶다면 타입 가드를 사용하여 접근할 것.
}

// 인자로 developer를 주거나 person을 준다.
askSomeone({name: '개발자', skill: '웹 개발'})
askSomeone({name: '사람', age: 123})

인터섹션 : 부호를 통해 타입을 연결시켜 준다.

var seho : string | number | boolean;
var capt : string & number & boolean;   // capt는 never. 이 세 가지 타입을 전부 만족시켜야 함

function askSomeone2(someone: Developer & Person) {
    // somone은 name, skill, age를 모두 가지고 있다. 합집합 느낌
    someone.name;
    someone.skill;
    someone.age;
}

// 실무에서는 유니온 타입이 더 많이 사용된다.

askSomeone2({name: '개발자', skill: '웹 개발'}) //실패
askSomeone2({name: '사람', age: 123}) //실패
askSomeone2({name: '사람', age: 123, skill: '노래하기'})  //성공