제네릭, 타입 호환 내용 관련 문의

장기효님 안녕하세요.
강의를 수강하다가 궁금한 점이 생겨 2가지 사항 문의 드립니다.

Q1) Generic

(제네릭 실전 예제 dropdown-generic.ts의 내용입니다)

아래의 # 1, # 2 두 코드는 동일하게 동작하나요?
Lint error는 발생하지 않지만 제네릭 T 타입에 유니온을 사용할 수 있는 것인지 궁금합니다!

# 1

function createDropdownItem(item: DropdownItem<string> | DropdownItem<number>) { ... }

# 2

function createDropdownItem(item: DropdownItem<string | number>) { ... } 

Q2) 타입 호환

함수의 타입 호환에 대한 설명에서

sum = add; 는 불가하고
add = sum; 은 가능하다고 설명해주셨는데,

직접 소스를 실행해보니 그 반대인 것 같습니다.
강의 교안 코드를 그대로 실행하여도 동일한데 TypeScript 스펙이 변경된 건가요?

실행해본 소스는 다음과 같습니다.

var add = function(a: number) {
  return a;
}
var sum = function(a: number, b: number) {
  return a + b;
}

sum = add;

add = sum; // Error

const res = sum(1, 3);
console.log(res);

(TypeScript Playground 링크)

부가 질문

혹시 Vue 3 강의나 Vue 3 + TypeScript 강의에 대한 계획이 있으신지 궁금합니다.
장기효님의 Vue 3 강의가 있으면 너무 좋을 것 같아요 !

양질의 강의에 감사드립니다!!