Today I Learned_230411

TypeScript

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

섹션 15. 타입 호환

타입스크립트가 코드를 해석해 나가면서 두 개의 타입이 서로 호환이 되는지를 점검하는 것

타입 자체를 보기 보다는, 타입이 가지고 있는 속성들을 비교하고 이들이 호환이 되는지를 본다.

구조적 타이핑(structural typing) → 구조 관점에서 타입이 서로 호환되는지

인터페이스에서의 타입 호환

interface Developer {
    name: string;
    skill: string;
}
interface Person {
    name: string;
}

var developer: Developer;
var person: Person;

// person에는 name 속성만 있고 skill이 없기 때문에 할당 가능
// developer가 구조적으로 더 큰 범위
developer = person; // error
person = developer; // ok

타입스크립트에서 호환이 된다 : 여기서 오른쪽(person)의 범위가 왼쪽(developer)의 범위보다 커야지 호환이 된다.

클래스에서의 타입 호환

interface Developer {
    name: string;
    skill: string;
}
class Person {
    name: string;
}

var developer: Developer;
var person: Person;

developer = new Person(); // error
person = developer;

구조적 타이핑 : 타입의 이름이 아니라 구조를 기반으로 호환성 파악을 한다.

함수에서의 타입 호환

//얘가 더 작은 범위
var add = function (a: number) {
    // ...
}

//얘가 더 큰 범위
var sum = function (a: number, b: number) {
    // ...
}

add = sum; // error
sum = add; // ok

파라미터나 반환 타입이 더 많은 옵션을 가져가는 쪽이 넓은 범위에 있는 타입

넓은 범위의 타입이 작은 타입을 받을 수 있다

클래스와 함수는 조금 다른 양상을 가지므로 잘 기억해 두자.

제네릭에서의 타입 호환

interface Empty<T> {
    // ..
}

var empty1: Empty<string>;
var empty2: Empty<number>;
empty1 = empty2; // ok
empty2 = empty1; // ok

이 경우, Empty에 어떤 타입이 들어가든 내부적으로 변하는 것이 하나도 없기 때문에, empty1과 empty2는 동일 취급 한다.

interface NotEmpty<T> {
    data: T
}
var notEmpty1: NotEmpty<string>;
var notEmpty2: NotEmpty<number>;
notEmpty1 = notEmpty2;  // error
notEmpty2 = notEmpty1;  // error

이 경우, 두 개의 타입이 다른 타입이 되므로 호환이 되지 않는다.

섹션 16. 타입 모듈화

파일이 길어지게 되면 여러 파일로 분리해야 함

타입 모듈화를 통해서 다른 파일에서도 가져다 쓸 수 있다.

types.ts

export interface Todo {
    title: string;
    checked: boolean;
}

app.ts

import { Todo } from "./types"; // import 할 때는 경로부터 잡는게 자동완성 잡기가 편하다.

var item: Todo = {
    title: '할 일 1',
    checked: false,
}

Javascript ES6 Modules : https://joshua1988.github.io/vue-camp/es6+/modules.html

Javascript의 유효 범위는 기본적으로 전역으로 시작한다. → 기존에는 별도 라이브러리를 사용하여 모듈화를 진행했지만 es6부터는 모듈화를 통해 해결