ㅇㅇㅈ Blog

프론트엔드 수행중

0%

타입-호환성

Posted on Edited on In ,

타입 호환성 (Type Compatibility)

서브 타입(1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// sub1 타입은 sup1 타입의 서브 타입이다.
let sub1: 1 = 1;
let sup1: number = sub1;
sub1 = sup1 //error! Type 'number' is not assignable to type '1'

// sub2 타입은 sup2 타입의 서브 타입이다
let sub2: number[] = [1]
let sup2: object = sub2; // sup2에는 sub2를 할당 할 수 있다
sub2 = sup2 
// error! Type '{}' is missing the following properties from type 'number[]':length, pop, push, concat, and 16 more.

// sub3 타입은 sup3 타입의 서브 타입이다.
let sub3: [number, number] = [1,2]
let sup3: number[] = sub3; // sup3에 sub3 을 할당 할 수 있다
sub3 = sup3
// error! Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer.

서브 타입(2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// sub4 타입은 sup4 타입의 서브 타입이다.
let sub4: number = 1;
let sup4: any = sub4; // any는 어떤것도 들어갈 수 있다
sub4 = sup4; // 반대의 경우도 마찬가지

// sub5 타입은 sup5 타입의 서브 타입이다.
let sub5: never = 0 as never;
let sup5: number = sub5; // number에 포함 될 수 있지만 반대의 경우 문제가 된다
sub5 = sup5; // error! Type 'number' is not assignable to type 'never'

class Animal {}
class Dog extends Animal {
  eat() {}
}

// sub6 타입은 sup6 타입의 서브 타입이다.
let sub6: Dog = new Dog()
let sup6: Animal = sub6;
sub6 = sup6; // error! Property 'eat' is missing in type 'SubAnimal' but required in type 'SubDog'

1. 같거나 서브 타입인 경우, 할당이 가능하다. => 공변

1
2
3
4
5
6
7
8
9
10
11
// primitive type
let sub7: string = '';
let sup7: string | number = sub7;

// object - 각각의 프로퍼티가 대응하는 프로퍼티와 같거나 서브타입이어야 한다.
let sub8: { a: string; b: number} ={a: '', b: 1}
let sup8: { a: string | number; b: number} = sub8;

// array - object 와 마찬가지
let sub9: Array<{ a: string; b:number}> =[{a: '', b: 1}]
let sup9: Array<{ a: string | number; b: number}> = sub8;

2. 함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다 => 반병

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Person {}
class Developer extends Person { // Person을 상속받은 Developer
  coding() {} 
}
class StartupDeveloper extends Developer { // Developer를 상속받은 StartupDeveloper
  burning() {}
}
function tellme(f: (d: Developer) => Developer) {}
//tellme함수 인자로 f 함수가 들어감 f함수는 Developer를 인자로 받고 Developer를 리턴한다

// Developer => Developer 에다가 Developer => Developer 를 할당하는 경우
tellme(function dToD(d: Developer): Developer) {
  return new Developer()
}

// Developer => Developer 에다가 Person => Developer 를 할당하는 경우
tellme(function pToD(d: Person): Developer {
  // coding()을 호출 할 수 없지만 문제가 되지 않는다
  return new Developer()
})

// Developer => Developer 에다가 StartupDeveloper => Developer를 할당하는 경우
tellme(function sTod(d: StartupDeveloper): Developer){
  // d.buring()을 할 수 있지만 논리적으로 문제가 있다
  return new Developer()
}
// strictFunctionTypes 옵션을 켜면
함수를 할당할 시에 함수의 매개변수 타입이 같거나 슈퍼타입인 경우가 아닌 경우, 에러를 통해 경고한다

타입 별칭(Type Alias)

  • Interface랑 비슷해 보인다
  • Primitive, Union Type, Tuple, Function 같이 여러번 똑같이 쓰는것보다는 이름을 붙여 설정하고 사용하는 방식
  • 기타 직접 작성해야하는 타입을 다른 이름을 지정할 수 있습니다
  • 만들어진 타입의 refer로 사용하는 것이지 타입을 만드는것은 아니다

Aliasing Primitive

1
2
3
4
5
type MyStringType = string;
const str = 'world'

let myStr: MyStringType = 'hello';
myStr = str

Aliasing Union Type

1
2
3
4
5
6
7
8
9
let person: string | number = 0; // 매번 string | number를 지정하기 힘들다
person = 'Mark';

type StringOrNumber = string | number // string | number를 StringOrNumber로 지정한다

let another: StringOrNumber = 0;
another = 'Anna'
// 유니온 타입은 A도 가능하고 B도 가능한 타입
// 길게 쓰는걸 짧게

Aliasing Tuple

1
2
3
4
let person: [string, number] = ['Mark',35]
type PersonTuple = [string, number]
let another: PersonTuple = ['Anna', 24]
// 튜플 타입에 별칭을 줘서 여러군데서 사용할 수 있게 한다

Aliasing Function

1
type EatType = (food: string) => void;