7월 첫주차 기록

July 6, 2024 • ☕️ 5 min read

weekly

배워가기

공변과 반공변

Tip) 공변: “같이 변한다”

공변성(Covariance): A(좁은 타입)가 B(넓은 타입)의 서브타입이면, T<A>는 T<B>의 서브타입이다.
- ex) 클래스 인스턴스, 함수의 반환값 (함수 파라미터를 제외한 모든 경우)
  
  Copy
```
let stringArray: Array<string> = [];
let array: Array<string | number> = [];

array = stringArray; // ✅ OK - stringArray는 array를 포함
stringArray = array; // 🚨 Error
```
반공변성(Contravariance): A(좁은 타입)가 B(넓은 타입)의 서브타입이면, T<B>는 T<A>의 서브타입이다.
- ex) 함수 파라미터
  
  Copy
```
type Logger<T> = (param: T) => void;

let logNumber: Logger<number> = (param) => {
    console.log(param); // number
  };

let log: Logger<string | number> = (param) => {
  console.log(param); // string | number
};

logNumber = log; // ✅ OK
log = logNumber; // 🚨 Error
```
  - logNumber 함수에 log 함수를 대입했을 때, log 함수는 string | number 타입의 인자를 받을 것으로 기대하기 때문에 number 타입만 받을 것으로 기대되는 함수 logNumber 에 함수 log를 대입할 수 있다.
  - log 함수에 logNumber 함수를 대입했을 때, log 함수의 인자 타입이 number임을 보장할 수 없기 때문에 에러가 발생한다.
이변성(Bivariance): A가 B의 서브타입이면, T<A> → T<B>도 되고 T<B> → T<A>도 되는 경우
- 공변성과 반공변성을 모두 가지는 것으로, 서브타입과 슈퍼타입 모두 파라미터로 사용하더라도 타입 에러가 나지 않도록 만든다.
- Array와 메서드의 관계 등에서 논리적 흐름을 보장하기 위해 함수임에도 공변성을 보장해야 하는 경우가 있기 때문에 타입스크립트는 이변성을 가진다.
- 타입스크립트에서 화살표 함수가 아닌 메서드 선언으로 바꾸면 함수 파라미터는 이변성을 갖는다
  
  Copy
```
type Logger<T> = (param: T) => void;

let log: Logger<string | number> = (param) => {
  console.log(param);
};

// ✅ OK
log = (param: string | number | boolean) => {
  console.log(param);
};

// ✅ OK
log = (param: number) => {
  console.log(param);
};
```

Tip! 누군가한테 콜스택을 넘겨줄 때는 반공변하고, 내가 콜스택을 가지고 있을 때는 공변하는 것이 안전하다

cf) 타입스크립트 4.7의 in, out

제네릭 타입이 공변한지, 반공변한지 명시적으로 표기하는 것

타입이 output으로 사용될 때 out, input으로 사용될 때 in을 사용한다.

Copy

interface Animal {
    animalStuff: any;
}
interface Dog extends Animal {
    dogStuff: any;
}
// ...
type Getter<T> = () => T;
type Setter<T> = (value: T) => void;

Copy

type Getter<out T> = () => T;

type Setter<in T> = (value: T) => void;

둘 다 사용할 수도 있다. (이변)

Copy

interface State<in out T> {
    get: () => T;
    set: (value: T) => void;
}

Ref

CSS

min-content
- 박스 밖으로 넘치지 않는 한에서 박스가 가질 수 있는 가장 작은 크기
max-content
- 넘치는 일 없이 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기
- 부모 요소는 고려하지 않는다. 따라서 부모 요소를 벗어나는 overflow가 일어날 수도 있다.
fit-content
- 최솟값은 min-content, 최댓값이 max-content로, 뷰포트가 변함에 따라 쓸 수 있는 최대 범위를 사용한다.