🐳 2.2 커스텀 타입 정의

타입스크립트는 type, interface, enum 키워드 및 클래스 선언으로 커스텀 타입을 만들 수 있다.

🌏 2.2.1 타입 키워드 사용

새로운 타입을 선언하거나 타입 별칭을 사용해 이미 존재하는 타입에 다른 이름을 붙여 사용 가능.

// 2_10.ts
type Foot = number;
type Pound = number;

// 2_11.ts
type Patient = {
    name: string;
    height: Foot; // Foot타입 별칭 사용
    weight: Pound ; // Pound타입 별칭 사용
}

타입별칭은 자바스크립트 코드로 컴파일 되지 않습니다.

// 2_12.ts
let patient: Patient = { // 객체 리터럴 표기법을 사용해 인스턴스 만듬.
    name: 'Joe Smith',
    height: 5,
    weight: 100,
}

만약 여기서 weight가 빠지면, weight가 없다고 에러가 발생.

해당 프로퍼티가 필수가 아니라 옵션이라면, 프로퍼티 이름에 ?를 붙여 조건부 프로퍼 타입을 선언합니다.

// 2_13.ts
type Patient2_13 = {
    name: string;
    height: Foot; // Foot타입 별칭 사용
    weight?: Pound ; // Pound타입 별칭 사용
}

let patient2_13: Patient2_13 = { // 객체 리터럴 표기법을 사용해 인스턴스 만듬.
    name: 'Joe Smith',
    height: 5,
}

❗ 클래스나 인터페이스에서 물음표를 추가해 조건부 프로퍼티를 정의 할 수 있다.

함수 시그니처에도 타입 사용이 가능하다.

폼 양식이 있고 입력된 값의 유효성을 검사하는 ValidatorFn이라는 함수를 구현해보자.
ValidatorFn함수에 특정 시그니처가 필요합니다. FormControl타입 객체를 받아 값이 유효한 경우 null을 반환하고 아니면 오류를 설명하는 객체를 반환합니다.

type ValidatorFn = 
	(c: FormControl) => {[key: string]: any} | null

{[key: string]: any}는 모든 타입의 프로퍼티를 가질 수 있는 객체를 의미합니다.

class FormControl{
    constructor (initialValue: string, validator: ValidatorFn | null){...};
}

FormControl 클래스 생성자를 만들 때 앞서 정의한 커스텀타입 ValidatorFn을 파라미터로 사용가능

🌏 2.2.2 클래스 내 커스텀 타입 사용

자바스크립트는 클래스 프로퍼티를 선언하는 구문이 없지만 타입스크립트는 아니다.

class Person{
    firstName: string;
    lastname: string;
    age: number;
}

const p = new Person();
p.firstName = 'John';
p.lastName = 'Smith';
p.age = '25';

ts->js ES6로 변환

"use strict";
class Person{}

const p = new Person();
p.firstName = 'John';
p.lastName = 'Smith';
p.age = '25';

JS코드에서 Person이 비어있는걸 볼 수 있다.

Person생성자를 선언하지 않았기 때문에 인스턴스를 만든 후에 프로퍼티를 초기화함.
생성자는 클래스 인스턴스가 생성된 후에 한번만 실행되는 특별한 함수이다.

타입스크립트는 코드 한줄로 클래스를 인스턴스하고 프로퍼티를 초기화 할 수 있다.
생성자의 파라미터 등에 타입을 표기 가능

타입스크립트도 접근제어자가 있고 readonly , private, protected, public 4개의 키워드가 있다.

class Person{
    constructor(public firstName: string,
                public lastName: string, public age: number) {};
}

const p = new Person('John', 'Smith', 25);

변환

"use strict";
class Person{
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    ;
}
const p = new Person('John', 'Smith', 25);

const p에서 별도의 타입 없이 선언 했지만

const p:Person = new Person('John', 'Smith', 25);

위처럼 수정하여 명확하게 작성할 수 있다.

❗ 타입스크립트 클래스 내 각 생성자 파라미터에 public 접근 제어자를 사용할 수 있다.
생성된 프로퍼티는 클래스 내부와 외부 모두 접근 할 수 있다.

클래스 프로퍼티를 선언 할 때 readonly 제한자를 사용할 수 있다.
( 클래스 생성자 내부 등에 프로퍼티를 초기화하는 경우, 값이 바뀌지 않아야 하는 경우 )
const와 비슷하지만 클래스 프로퍼티에 const를 사용할 수는 없다.

🌏 2.2.3 인터페이스를 사용한 커스텀 타입

인터페이스는 객체프로퍼티 또는 메소드구현을 위해 사용됨. ( JS에는 없다. )

👉 interface와 implements 키워드

두 키워드는 자바스크립트 코드로 컴파일 되지 않음.
개발도중 잘못된 타입을 피할 수 있게 도와주는 역할.

// 2_16.ts
interface Person{
    firstName: string;
    lastName: string;
    age: number;
}

👉 class와 차이

커스텀 타입을 class와 같이 선언하면 마치 값처럼 여러번 사용이 가능하다.
(위의 new 키워드 처럼 인스턴스화 가능)

자바스크립트 코드에 해당 코드가 포함이 된다. (ES5 - 함수, ES6 - 클래스로 컴파일)

👉 예제

interface Person {
    firstName: string;
    lastName: string;
    age: number;
}

function savePerson (person: Person): void{
    console.log('Saving ' , person);
}

const p:Person = {
    firstName: 'John',
    lastName: 'Smith',
    age: 25
};

savePerson(p);

"use strict";
function savePerson(person){
    console.log('Saving ' , person);
}
const p = {
    firstName: 'John',
    lastName: 'Smith',
    age: 25 
}
savePerson(p);

이처럼 savePerson에 들어온 객체를 인터페이스 Person내 프로퍼티와 비교하며 확인함.

Person타입을 삭제해도 savePerson함수를 호출할 수 있는데, 그 이유는 타입스크립트의 구조적 타입 시스템 때문

타입스크립트는 두 타입의 구조마을 가지고 호환성을 결정합니다. => 멤버가 서로 일치한다면 서로 호환되어 명시적인 표시는 필요하지 않습니다.

👉 type, interface, class 언제 사용??

• 런타임 동안 객체를 인스턴스화 한다면 interface 또는 type
  그 반대의 경우에는 class => 값을 나타내는 데 사용해야 하는 경우 class
• 타입 검사기로 안전하게 커스텀 타입을 선언하고자 한다면 type 또는 interface사용.
  type과 interface는 자바스크립트로 컴파일 되지 않아 런타임 코드 용량이 더 작아진다.
• type키워드는 interface와 동일한 기능 뿐만 아니라 더 많은 기능을 사용 가능
  ex) interface는 교집합, 합집합 개념을 사용 못하지만 type은 가능하다.

🌏 2.2.4 구조적 타입 시스템과 명목적 타입 시스템

두 개의 타입이 있을 때 같은지 다른지 어떻게 알 수 있을까?

명목적 타입 시스템 ( 자바 등 )을 사용하는 언어들은 같은 네임스페이스 안에 같은 이름으로 선언된 클래스를 동일하다고 판단함.

즉, Person타입 변수에는 Person 타입 객체나 이를 상속받은 클래스의 객체만 넣을 수 있다.

// 2_17.java
class Person {
    String name;
}
class Customer {
    String name;
}
Customer cust = new Person(); // 클래스 이름이 다르기 때문에 컴파일 되지 않는다.

클래스 이름이 다르기 때문에 컴파일 되지 않는다.

// 2_18.ts
class Person2_18{
    name: string;
}
class Customer2_18{
    name: string;
}
const cust:Customer2_18 = new Person2_18(); // 같은 구조라 오류 발생 X

타입스크립트는 구조적 타입 시스템을 사용하기 떄문에 같은 구조를 가져 오류가 발생하지 않음.

// 2_19.ts
class Person2_19{
    name: string;
}
class Customer2_19{
    name: string;
}
const cust:Customer2_19 = { name: 'Mary'};
const pers:Person2_19 = { name: 'John'};

객체 리터럴을 사용해 구조가 동일한 객체를 만들어 클래스 타입 변수나 상수에 할당할 수 있다.

❗ 접근제어자는 타입 호환성에 영향을 줍니다.
name이 private인 경우 컴파일 되지 않습니다.

Person과 Customer 구조가 다르다면?

// 2_20.ts
class Person2_20{
    name: string;
    age: number;
}
class Customer2_20{
    name: string;
}
const cust:Customer2_20 = new Person2_20();

name을 가진 Customer타입의 상수를 사용해 name을 가진 Person2_20을 가리키기 때문에 오류X

Person인스턴스도 name이 존재하므로 cust.name='John'이 가능.

❗ Customer타입인 변수 값을 Person 타입이 ㄴ객체로 지정했기 때문에 Person타입은 Customer타입에 할당 가능하다고 말할 수 있다.

반대는?

// 2_21.ts
class Person2_21{
    name: string;
    
}
class Customer2_21{
    name: string;
    age: number;
}
const cust21:Customer2_21 = new Person2_21(); // 오류 발생

Person안에 age를 할당할 수 없기 때문에 오류가 발생.

🌏 2.2.5 커스텀 타입의 유니온

유니온은 변수에 지정할 수 있는 타입이 여러개일 경우 사용한다.

// 2_22.ts - 각 액션이 js스타일로 코딩되 3장에서 리팩토링 예정
export class SearchAction {
    actionType = "SEARCH";
    constructor(readonly payload: {searchQuery: string}){}
}

export class SearchSuccessAction{[1]
	actionType = 'SEARCH_SUCCESS';
	constructor(public payload: {searchResults: string[] }){}
}

export class SearchFailedAction {
    actionType = 'SEARCH_FAILED';
}

export type SearchActions = SearchAction | SearchSuccessAction | SearchFailedAction

식별 가능한 유니온은 공통 프로퍼티 즉, 공토으이 식별자를 가진 멤버로 이루어진 타입을 말함.

각 멤버마다 actionType이라는 식별자가 있기 때문에 유니온 식별에 해당함.

// 2_23.ts
interface Rectangle {
    kind: 'rectangle';
    width: number;
    height: number;
}

interface Circle {
    kind: 'circle'; 1
	radius: number;
}

type Shape = Rectangle | Circle; // union

kind를 가지고 있어 kind값에 따라 shpae 크기를 계산할 수 있다.

// 2_24.ts
function area(shape: Shape):number {
    switch(shape.kind){
        case 'rectangle': return shape.height * shape.width;
        case 'circle': return Math.PI * shape.radius **2;
    }
}

const myRectangle:Rectangle = {kind: 'rectangle', width:10, height: 20}
console.log(`Rectangle's area is ${area(myRectangle)}`);

const myCircle:Circle = {kind: 'circle', radius: 10};
console.log(`Circle's area is ${area(myCircle)}`);

🌏 타입가드 in

in키워드는 타입 범위를 축소하는 표현.

유니온 타입 인자를 가진 함수는 호출하는 동안 실제 값을 체크할 수 있을 것이다.

interface A { a: number };
interface B { b: string };

function foo(x: A|B){
    if('a'in x){
        return x.a;
    }
    return x.b;
}