TS - 타입 추론 · 호환 · 단언 · 가드 · 별칭

1. 타입 추론(Type Inference)

• 변수의 타입을 명시적으로 적어주지 않고도, 컴파일러가 알아서 이 변수의 타입을 대입된 값을 통해 추론하는 것 입니다.
• 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다.

let numValue = 10;
numValue = 20;
numValue = '30'; // Error !!

/* JS에서는 오류가 아니나, TS에서는 오류가 발생합니다.

 1. let numValue = 10;에서 타입 추론에 의해 numValue 변수의 타입은 number로 정해집니다.
 2. 따라서 number타입에 string 값을 할당하려고 하면 오류가 발생합니다.

*/

   1-(sub). 가장 적절한 타입(Best Common Type)

• 여러가지 자료형이 배열 내부에서 사용되고 있을 때, 그 여러가지 자료형을 포괄할 수 있는 가장 일반적인 자료형을 유니온 타입으로 만들어 추론하는 것입니다.

let arrEx1 = [1, 2, 3]; // arrEx1: number[]
let arrEx2 = [1,'2'] // arrEx2: (string | number)[]
let arrEx3 = [1, true, '3']; // arrEx3: (string | number | boolean)[]

 

2. 타입 호환(Type Compatibility)

• 특정 타입이 다른 타입에 잘 맞는지를 의미합니다.
• 타입이 잘 맞는지를 확인할 때는 내부의 속성과 타입에 대한 정의가 맞는지를 검사합니다.

/* 
1. 구조적 타이핑(structural typing) 
    - 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단하는 것
*/
interface I12_1 {
    name: string;
}
let v12_1: I12_1;
let v12_2 = { name: 'v12_2', age: 20 }
v12_1 = v12_2;
v12_2 = v12_1; // Error : 'age' 속성이 'I12_1' 형식에 없지만 '{ name: string; age: number; }' 형식에서 필수

/*
2. Enum 타입 호환 주의 사항
    - 이넘 타입은 number 타입과 호환되지만 이넘 타입끼리는 호환되지 않음.
*/
enum E12_1 { Ready, Waiting };
enum E12_2 { Red, Blue, Green };

let v12_3 = E12_1.Ready;
v12_3 = E12_1.Waiting; // Ok
v12_3 = E12_2.Green;  // Error : 'E12_2.Green' 형식은 'E12_1' 형식에 할당할 수 없음

/*
3. Class 타입 호환 주의 사항
    - 클래스 타입은 클래스 타입끼리 비교할 때 스태틱 멤버(static member)와 생성자(constructor)를 제외하고 속성만 비교
*/
class C12_1 {
    name: string;
    constructor(name: string, skill: string) { }
}
class C12_2 {
    name: string;
    constructor(numHand: number) { }
}

let v12_4: C12_1;
let v12_5: C12_2;
v12_4 = v12_5;  // OK
v12_5 = v12_4;  // OK

/*
4. Generics
    - 제네릭은 제네릭 타입 간의 호환 여부를 판단할 때 타입 인자 <T>가 속성에 할당 되었는지를 기준으로 함
*/
interface I12_2<T> {
}
let v12_6: I12_2<number>;
let v12_7: I12_2<string>;
v12_6 = v12_7; // Ok => 제네릭이 속성에 할당 되어있지않고, 제네릭을 사용한다는 구조가 같기때문에
v12_7 = v12_6; // Ok

interface I12_3<T> {
    data: T;
}
let v12_8: I12_3<number>;
let v12_9: I12_3<string>;
v12_8 = v12_9; // Error => 제네릭이 인테페이스에 속성이에 할당 되어 있고, 서로 다른 타입이기때문에
v12_9 = v12_8; // Error

 

3. 타입 단언(Type Assertion)

• 개발자가 타입을 확정 지을 수 있을때 as라는 키워드를 통해 타입 선언 가능합니다.

let strValue: any;
strValue = 10;
strValue = 'hello world'; // strValue: any
let copyStr1 = strValue; // copyStr1: any
let copyStr2 = strValue as string; // copyStr2: string

/*
 코드를 봤을 땐 마지막에 문자열을 넣어줬으므로 str 타입이어야 하나, ts에서는 처음 정의한 타입인 any로 나옵니다.
 따라서 타입단언 없이 그대로 다른 변수에 strValue 값을 할당하면 copyStr1의 타입은 any 입니다.
 as를 통해 타입단언하여 넘겨줄 시 copyStr2의 타입은 string 입니다.
 */

interface I1 {
    name: string;
    skill: string;
}
interface I2 {
    name: string;
    age: number;
}

function F1(): I1 | I2 {
    return { name: 'n1', skill: 's1', age: 10 }
}

let v1 = F1();

console.log(v1.name); // == 'n1'
console.log(v1.skill); // Error!
console.log(v1.age); // Error!

console.log((v1 as I1).skill); // == 's1'
console.log((v1 as I2).age); // == 10

/*
 F1()함수 리턴 값에 명시적으로 skill, age가 있음에도 v1에서 skill, age에 접근하면 오류가 발생합니다.
=> 유니온 타입으로 리턴타입을 정의 시 타입들의 공통된 타입만 접근 가능하기 때문입니다. (따라서 공통 속성인 name만 접근 가능)

 이럴경우 타입단언을 통해 skill, age에 접근이 가능합니다.
*/

 

4. 타입 가드(Type Guard)

• 데이터의 타입을 알 수 없거나, 될 수 있는 타입이 여러 개라고 가정할 때 조건문을 통해 데이터의 타입을 좁혀나가는 것 입니다.
  (타입 좁히기 - Type Narrowing)
• 데이터의 타입에 따라 대응하여 에러를 최소화할 수 있습니다.
• 해당 타입에 대한 확신과 검증을 하는 역할을 합니다.
• typeof, instanceOf, in, is 키워드를 통해서 가능합니다.

// typeof 키워드 사용 예제

function something(param: string | number): (string | number) {
    if (typeof param === 'string') {
        // Math.floor(param); => Error
        return param.padStart(2, '0');
    } else {
        return Math.floor(param);
    }
}

/*
 1. param에는 string | number 타입이 올 수 있음.
 2. typeof 키워드를 통해 param 타입을 검사하여 string이면 문자열 함수 사용 가능
    typeof 키워드를 통해 param 타입을 검사하여 number이면 숫자형 함수 사용 가능
*/

// instanceOf 키워드 사용 예제

class Student {
    study(): void {}
}
class Teacher {
    teach(): void {}
}
function something(person: Student | Teacher) {
    if (person instanceof Student) {
        person.study();
    } else {
        person.teach();
    }
}

/*
 1. class의 경우 typeof 연산자를 이용해도 항상 object라는 값을 얻기 때문에 typeof 키워드로 판별할 수 없음.
 2. class는 instanceOf 이라는 키워드를 이용하여 식별함.
 */

// in 키워드 사용 예제

interface Student {
    study(): void
}
interface Teacher {
    teach(): void
}
function something(person: Student | Teacher) {
    if ("study" in person) {
        person.study();
    }else if("teach" in person){
        person.teach()
    }
}

/*
 1. in 키워드를 통해 생성한 프로퍼티 비교를 통해 타입을 검증할 수 있음.
 2. 프로퍼티의 비교로 디테일한 타입 가드가 가능
*/

// 사용자 정의 타입 가드 (사용자가 직접 타입을 검증하는 함수를 작성하여 사용)

interface Student {
    study(): void
}
interface Teacher {
    teach(): void
}
// 사용자 정의 타입 가드
function isStudent(person: Student | Teacher): person is Student {
    return (person as Student).study !== undefined;
    // person이라는 obj에 study 속성이 있으면 Student 타입 없으면 Teacher 타입
}
function something(person: Student | Teacher) {
    if (isStudent(person)) {
        person.study();
    }else{
        person.teach();
    }
}

/*
 1. 기존에 존재하는 키워드 대신 사용자가 직접 타입을 검증하는 함수를 작성하여 사용이 가능
 2. (value) is (Type) 형태의 반환 타입을 갖는 함수로 정의
=> is : 실제 해당 타입인지 구분하는 키워드
 3. 해당 반환 타입으로 참인 경우 하단 스코프 내부는 Type의 프로퍼티만 쓸 수 있음
 */

 

5. 타입 별칭(Type Aliases)

• 타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같습니다.

type Student_type1 = {
    age: number;
    name: string;
    grade: string;
}
var s1: Student_type1 = { age: 20, name: "s1", grade: '1' };

 

 

 

타입과 관련된 강의를 듣고 정리해보았다~ "타입"스크립트 인 만큼 타입이 제일 중요하다고 생각한다! 숙지해두자!

 

 

* 참고

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

 

* 참고 (이건 시간날때 읽고 추가 정리 해둘 것!)

Home