자바스크립트에 타입 추가하는 방법

밑의 자바스크립트에서 sum이라는 함수에 들어가는 파라미터 a,b에 타입을 지정해줄 수 있는 방법이 있다.

function sum(a,b){
    return a+b;
}

sum(10,'10');
  • /** */ 주석처리 안에다 @param {type} 파라미터명을 적어주고 리턴되는 값도 @returns {type}으로 지정해 줄 수 있다.
  • 타입스크립트처럼 에러를 에디터에서 확인하려면 @ts-check를 주석에 넣어주면 에러를 발생시켜준다.
// @ts-check

/**
 * 
 * @param {number} a 
 * @param {number} b 
 * @returns {number}
 */
function sum(a,b){
    return a+b+'2'; 
}

sum(10,'10');

리턴값은 number 타입을 줬기 때문에 string 형식을 지정할 수 없다는 에러가 발생되고, sum() 함수에도 number 타입의 파라미터만 입력받을 수 있으므로 에러를 발생시키게 된다.

스크린샷 2022-07-06 오후 2 18 26


기본 타입 정의

String

자바스크립트에서 변수 타입이 문자열이면 아래와 같이 string 타입을 선언해서 사용한다.

let str: string;
str = 'hello';
str = 10; // error

number

자바스크립트에서 변수 타입이 숫자면 아래와 같이 number 타입을 선언해서 사용한다.

let number: number;
number = 'hello'; // error
number = 10;

boolean

자바스크립트에서 변수 타입이 불린이면 아래와 같이 boolean 타입을 선언해서 사용한다.

let boolean: boolean;

boolean = true;
boolean = false;
boolean = 20; // error

Object

자바스크립트에서 변수 타입이 객체이면 아래와 같이 {var1: type1, var2: type2} 타입을 선언해서 사용한다.

let person: {name: string, age: number}

person = {name: 'seongsik', age: 20}
person = {name: 123, age: 20} // name은 string 타입이므로 number 타입은 사용 x => error

Array

자바스크립트에서 변수 타입이 배열이면 아래와 같이 Array<type> or type[] 타입을 선언해서 사용한다.

let number_arr: number[] = [1,2,3];
let string_arr: string[] = ['1','2','3'];
let boolean_arr: boolean[] = [true, false, true];

또는 아래와 같이 제네릭으로 사용할 수 있다.

let number_arr: Array<number> = [1,2,3];
let string_arr: Array<string> = ['1','2','3'];
let boolean_arr: Array<boolean> = [true, false, true];

Tuple

  • 튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.
  • 자바스크립트에서 변수 타입이 튜플이면 아래와 같이 [type1, type2] 타입을 선언해서 사용한다.
  • 길이가 고정되어 있고 각 자리마다 타입을 선언하기 때문에, 정의되지 않는 인덱스에 접근하거나 정의하지 않는 타입이면 에러가 발생한다.
let tuple_arr: [string, number] = ['hi', 10];

tuple_arr[2] // 길이가 '2'인 튜플 형식 '[string, number]'의 인덱스 '2'에 요소가 없습니다.
tuple_arr[1].concat('!') // 'number' 형식에 'concat' 속성이 없습니다.

Any

기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입이다. 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있다.

let string: any = 'hello';
let number: any = 100;
let boolean: any = true;
let arr: any = ['hi', 200, true];

Void

  • 변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.
let void_type: void;
void_type = 100;  // 'number' 형식은 'void' 형식에 할당할 수 없습니다.
void_type = 'string'; // 'string' 형식은 'void' 형식에 할당할 수 없습니다.

function void_fn(): void {
  console.log('void');
}

function void_fn(): void {
  console.log('void');
  return 100; //'number' 형식은 'void' 형식에 할당할 수 없습니다.
}

Enum

  • Enum 타입은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미한다.
  • Enum 타입은 객체의 키값으로도 접근가능하며, 배열의 인덱스로도 접근이 가능하다.
enum Avengers {Capt, IronMan, Thor}
let hero = Avengers.Capt;
let hero2 = Avengers.IronMan;
let hero3 = Avengers.Thor;

console.log(Avengers) // {0: 'Capt', 1: 'IronMan', 2: 'Thor', Capt: 0, IronMan: 1, Thor: 2}
console.log(hero); // 0
console.log(hero2); // 1
console.log(hero3); // 2

Enum은 인덱스 번호로도 접근할 수 있다.

enum Avengers {Capt, IronMan, Thor}
let hero = Avengers[0];
let hero2 = Avengers[1];
let hero3 = Avengers[2];


console.log(hero); // Capt
console.log(hero2); // IronMan
console.log(hero3); // Thor
  • Enum의 인덱스를 사용자 편의로 변경하여 사용할 수도 있다.
  • 주의헤야할 점은 특정 값의 인덱스를 편의로 변경하면 그 뒤에 오는 값들은 변경한 인덱스 값을 기준으로 순차적으로 갖게된다.
  • 가령 Capt는 인덱스를 2부터 시작하므로 IronMan는 3, Thor는 4를 갖게 된다.
enum Avengers {Capt=2, IronMan, Thor}
let hero = Avengers[0];
let hero2 = Avengers[1];
let hero3 = Avengers[2];

console.log(Avengers) // {2: 'Capt', 3: 'IronMan', 4: 'Thor', Capt: 2, IronMan: 3, Thor: 4}
console.log(hero); // undefined
console.log(hero2); // undefined
console.log(hero3); // Capt


함수 타입

함수를 타입스크립트로 크게 3가지로 정의할 수 있다.

  • 함수의 파라미터(매개변수) 타입
  • 함수의 반환 타입
  • 함수의 구조 타입

함수의 기본 타입 정의

function profile(name, address, age){
  return `이름 : ${name}, 주소 : ${address}, 나이 : ${age}`;
}

위의 자바스크립트 함수에 타입을 정의하면 아래와 같다.

function profile(name: string, address: string, age: string): string{
  return `이름 : ${name}, 주소 : ${address}, 나이 : ${age}`;
}

기존의 자바스크립트 함수 선언 방식에서 매개변수의 타입과 반환 값의 타입을 정의하였다.


함수의 파리미터

타입스크립트에서는 함수의 파라미터를 필수 값으로 간주한다. 따라서, 함수를 선언할 때 매개변수를 설정하게 되면 undefined나 null이라도 인자로 넘겨줘야 한다. 그 다음 컴파일러에서는 정의된 매개변수 값들이 넘어왔는지 확인한다. 달리 말하면 정의한 매개변수 값만 받을 수 있으며 추가 인자는 받을 수 없다.

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

sum(10); // error, 3개의 인수가 필요한데 1개를 가져왔습니다.
sum(10,20); // error, 3개의 인수가 필요한데 2개를 가져왔습니다.
sum(10,20, 30);


함수의 매개변수 초기화는 ES6 문법과 동일하다.

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

sum(10); // 110
sum(10,20); // 30

위의 타입스크립트를 자바스크립트로 변환하게되면 아래와 같다. 따라서 b 파라미터가 void면 초기화 값을 리턴하고 아니면, 그 값을 대체한다.

function sum(a, b) {
    if (b === void 0) { b = 100; }
    return a + b;
}


함수의 REST 파라미터

ES6 문법에서 지원하는 REST 파라미터는 타입스크리에서 다음과 같이 선언할 수 있다.

function sum(a: number, ...rest: number[]): number {
  let total = 0
  for (const val of rest){
    total += val;
  }

  return a+total;
}

sum(10, 20, 30, 40) // 100


함수의 옵션 속성

위의 함수의 파라미터에서 매개변수를 정의하면 모두 필수 값으로 간주한다고 했다. 하지만, 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 옵션을 부과하고 싶다면 아래와 같이 ?물음표를 붙이면 된다.

c 파라미터 앞에 물음표를 붙이면 넘기거나/안넘기거나 선택할 수 있는 옵션을 부과하게 된다.

function sum(a: number, b: number, c?: number): number {
  return a+b+c;
}

sum(10); // 2~3개의 인수가 필요한데 1개의 인수만 가져왔습니다.
sum(10,20); // 30
sum(10,20, 30); // 60


this

타입스크립트에서 자바스크립트의 this가 잘못 사용되었을 때 감지할 수 있다. 타입스크립트에서 this가 가리키는 것을 명시하려면 아래와 같이 선언한다.

  • 함수 호출에서 this는 전역객체를 참조하기 때문에 this의 타입으로 Window 타입을 선언했다.
var x = 100;

function sum(this: Window){
  return x;
}
  • 자바스크립트에서는 객체의 함수에서 호출된다면 그 함수의 this는 해당 객체를 참조하게 된다. 따라서 init() 함수에서의 this는 Vue가 되므로 참조가 되는 객체를 명시하면 된다.
interface Vue {
  el: string;
  count: number;
  init(this: Vue): () => {};
}

let vm: Vue = {
  el: '#app',
  count: 10,
  init: function(this: Vue) {
    return () => {
      return this.count;
    }
  }
}


let getCount = vm.init();
let count = getCount();

console.log(count); // 10