타입명시와 사용자 정의 타입

타입스크립트에서 타입 명시하기

타입 명시는 변수를 선언할 때 타입을 명시함으로써 변수의 데이터 타입을 지정하는 것을 말합니다

let x : string = "문자열";
let y : number = 2 //"정수(숫자)";

타입 추론을 통해서 타입을 정할 수도 있는데 이렇게 타입 명시를 해주는 이유는 변수의 타입을 모호하게 설정하는 게 아니라 정확하게 설정을 할 수 있기 때문입니다. 

 

만약 타입에 맞지 않는 값을 대입하면 컴파일에러-syntax error가 발생하게 되니 주의해서 사용해야 합니다.

변수의 데이터 타입 명시

let stdId: number = 1111;
let stdName: string = "kim";
let age: number = 20;
let gender: string = "male";
let course: string = "Typescript";
let completed: boolean = false;

함수의 데이터 타입 명시

function plus(a: number, b: number): number {
  return a + b;
}

function 함수명(매개변수 : 매개변수타입) : 리턴타입 {
  //return이 존재하는 경우 > 리턴타입은 리턴값의 테이터 타입 입력
  //return이 존재하지 않는경우 > 리턴타입은 void
}

함수의 리턴타입이 객체인 경우 어떻게 해야 할까요?

아래같이 객체로 리턴타입을 받는 경우가 존재합니다. 객체의 프로퍼티에 각각의 타입을 지정해 주려면 어떻게 해야 할까요?

function getUser (id:number) : object {
  return {
    id : 1,
    name : 'kim',
    age : 20,
    gender : 'male'
  }
}

객체 안의 데이터 타입을 조금 더 명확하게 명시하기 위해 인터페이스를 이용할 수 있습니다.

 

타입스크립트 인터페이스

인터페이스는 사용자 정의 타입으로 불리며, 인터페이스로 데이터 타입으로 명시해 줄 수 있는데요.

데이터 타입을 명시해 줄 수 있을 뿐만 아니라  인터페이스를 클래스에 상속도 할 수 있습니다.(extends가 아닌 implements)

마지막으로 인터페이스에서는 타입뿐만 아니라 메서드도 인터페이스 내에서 선언이 가능합니다. 단, 이 메서드 선언을 하게 되면 메서드 오버라이딩을 꼭 해주어야 합니다.

 

인터페이스 생성하기

interface user{
    id : number;
    name : string;
    age : number;
    gender : string;
}

 

function getUser (id:number) : user {
  return {
    id : 1,
    name : 'kim',
    age : 20,
    gender : 'male'
  }
}

이처럼 인터페이스 설정을 한 뒤에 데이터 타입으로 인터페이스명을 입력을 해주면 깔끔하게 코드를 작성할 수 있게 됩니다. 만약 인터페이스를 사용하지 않고 return 타입을 지정을 하려면 아래 코드처럼 일일이 return 되는 프로퍼티 값의 타입을 지정해 주어야 합니다.

function getUser (id:number) : {
    id : number;
    name : string;
    age : number;
    gender : string;
} {
  return {
    id : 1,
    name : 'kim',
    age : 20,
    gender : 'male'
  }
}

선택적 프로퍼티

선택적 프로퍼티를 언제 사용하냐면 타입설정을 할 때 모든 프로퍼티를 사용 안 할 수도 있고, 매개변수도 모든 매개변수를 사용하지 않을 수도 있는데 기본적으로는 모든 프로퍼티나, 모든 매개변수를 사용하지 않으면 에러가 발생하게 됩니다.

이때, 선택적 프로퍼티를 사용하게 되면 프로퍼티나 매개변수가 인터페이스와 매개변수 입력 개수가 달라지더라도 에러를 발생하지 않습니다. 즉, 있어도 그만 없어도 그만인 상태가 되는 것입니다.

 

interface User {
    id : number;
    name : string;
    age? : number;
    gender? : string;
}

function 함수 (a : number, b? : number) {
  return a + b;
}

 

선택적 프로퍼티를 사용 안 한 경우

function plus(a: number, b: number): number {
  return a + b;
}
plus(1);

app.ts:14:1 - error TS2554: Expected 2 arguments, but got 1.

14 plus(1);
   ~~~~~~~

  app.ts:10:26
    10 function plus(a: number, b: number): number {
                                ~~~~~~~~~
    An argument for 'b' was not provided.

 

선택적 프로퍼티를 사용한 경우

function plus(a: number, b?: number): number {
  return a + b;
}
plus(1);

File change detected. Starting incremental compilation...
Found 0 errors. Watching for file changes.

타입스크립트의 열거형

인터페이스와 또 다른 사용자 정의 타입을 말하며 대게 들어오는 값이 정해져 있을 때 사용됩니다.

예를 들어서 name과 gender가 존재합니다. 이때 name과 gender는 둘 다 string을 값으로 받는데요. 이름은 각각이 다르기 때문에 들어오는 값이 정해져 있지 않고 문자열만 지정을 해주었다면 gender의 경우에는 male과 female로만 받기 때문에 이외에 string이 들어온다면 그거대로 오류로 표현해야 하고 그걸 우리는 enum이라는 열거형을 활용하여 데이터 타입을 지정을 하게 되는 것입니다.

enum GenderType {
  Male,
  Female
}

interface User {
  id : number;
  name : string;
  age : number;
  gender : GenderType;
}

function getUser () : User {
  return {
    id : 1,
    name : 'kim',
    age : 20,
    gender : GenderType.Male 
  }
}

열거형의 종류

우리가 enum을 활용하여 열거형을 생성을 하고 컴파일을 하면 javascript에서는 아래와 같은 코드로 만들어줍니다.

(function (genderType) {
    genderType[genderType["Male"] = 0] = "Male";
    genderType[genderType["Female"] = 1] = "Female";
})(genderType || (genderType = {}));

(function (genderType) {
    genderType["Male"] = "male";
    genderType["Female"] = "female";
})(genderType || (genderType = {}));

이때 자동적으로 Male에는 0이 Female에는 1이 인덱스로 사용되게 설정되는데요 이처럼 숫자로 설정이 되면 숫자형 열거형, 문자로 설정을 하면 문자형 열거형이 됩니다.

 

리터럴 타입

enum을 상용하지 않고 정해진값만 받아올수 있게 하려면 리터럴 타입을 이용할 수 있습니다.

리터럴 타입의 종류에는 문자열 | 숫자열 | 불리언 | 객체 총 4개의 종류가 있습니다.

리터럴 타입은 설정하지 않은 값을 입력하게되면 에러를 출력하게 만들기 때문에 잘못된 값이 들어오는 것을 방지할 수 있고, 코드의 가독성을 높여줍니다.

interface User {
  id : number;
  name : string;
  age : number;
  gender : 'male' | 'female';
}

리터럴 타입과 클래스 상속

class getUser implements User {
  id : 100;
  name : 'kim';
  age : 30;
  gender : 'male';
}

인터페이스를 이용하여 클래스에 상속을 할때에 위 코드처럼 입력을 하게 되면 gender 영역에서 에러가 발생하게 되는데 그 이유는 User라는 인터페이스에 타입을 지정해 준 것이지 상속된 getUser라는 클래스에 타입을 지정하지 않았기 때문입니다. 이를 해결하기 위해서는 아래와 같이 gender에 타입을 지정해 주면 에러가 해결이 되는 것을 볼 수 있습니다.

class getUser implements User {
  id : 100;
  name : 'kim';
  age : 30;
  gender : 'male'|'female' : 'male';
}

유니온타입

우리가 타입을 지정할때 여러 타입이 올 수 있게 지정을 할 수 있는 게 any타입이 존재합니다. 하지만 any타입은 타입을 체크하지 않기 때문에 어떠한 타입이 오더라도 상관이 없어서 의도적으로  사용하지 않는 걸 권유합니다.

이런 any 타입을 사용하지 않기 위해 사용자 정의 타입인 유니온타입이 등장했습니다.

유니온 타입은 파이프라인으로 구분해서 리터럴이나, enum처럼 특정단어가 들어가는게 아니라 여러 타입이 들어가길 희망할 때 사용합니다.

let anyVal : string | number;

anyVal = 'string과 number 타입만 받습니다';
anyVal = 1000;
anyVal = false; // boolean 타입은 설정해놓지 않았기 때문에 에러 발생;

 

타입별칭 만들기

타입별칭을 만드는 이유는 간단합니다. 사용자 정의 타입들을 만들면서 재사용성을 위해 우리가 타입 별칭을 설정해 주는 것인데요.

타입 별칭을 사용한 것과 사용하지 않은 코드를 비교해 보겠습니다.

let numStr = number | string = 100;
function convertToString(val : number | string) : string {
  return String(val);
}
function convertToNumber(val : number | string) : number {
  return Number(val);
}

type strOrNum = number | string;

let numStr : strOrNum = 100;
function convertToString(val : strOrNum) : string {
  return String(val);
}
function convertToNumber(val : strOrNum) : number {
  return Number(val);
}

 

이렇게 타입을 정하게 되면 타입끼리 충돌이 일어날 수도 있는데요. 

그때는 typeof 연산자를 이용하여 타입가드를 사용할 수 있습니다.