3. 변수와 함수 타입을 정의하기

1. 타입스크립트 변수 타입

타입스크립트의 변수타입은 총 12가지가 존재합니다.

// JS 문자열 선언 방식
var str_1 = 'hello';

// TS 문자열 선언 방식
let str_2: string = 'hello'; //이 변수의 타입은 문자열로 간주하겠다 라는 의미

// TS 숫자 선언 방식
let num: number = 10;

// TS 배열 선언 방식
let arr: Array<number> = [1,2,3];
let arr_2: Array<string> = ['a', 'b', 'c', 10]; //문자열만 들어갈 수 있으니 숫자가 들어가게 되면 오류및 경고를 보여준다.( ESLint 확장 프로그램 효과 )
let items: number[] = [1,2,3]; //let arr: Array<number>와 동일한 타입 선언입니다.

// TS 튜플 ( 배열의 각각 index 타입을 설정하는 것 = 튜플)
let address: [string, number] = ['gangnam', 100];

// TS 객체
let obj: object = {};
let person: object = {
  name: 'capt',
  age: 100
};

let person_2: { name: string, age: number } = { //객체 안에 name과 age속성이 존재하지 않으면 경고를 보여준다.
  name: 'thor',
  age: 1000
}

// TS 진위값
let show: boolean = true;

// TS Enum
// Enum : 특정 값(상수)들의 집합을 의미합니다.
enum name { a, b, c }
let select: name = name.a;

// Enum은 인덱스 번호로도 접근할 수 있습니다.
enum name { a, b, c }
let select: name = name[0];

// Enum의 index 번호도 조작할 수 있습니다.
enum name { a = 2, b, c }
let select: name = name[2]; // a
let select: name = name[4]; // c

// TS Any : 모든 타입에 대해서 허용한다는 의미입니다.
// 기존의 자바스크립트 코드로 구현되어 있던 웹 서비스 코드에서 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입입니다.
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

//TS Void : 변수에는 undefined 와 null만 할당가능하고 함수에는 반환 값을 설정할 수 없는 타입입니다.
let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

//TS Never : 합수의 끝에 절대 도달하지 않는다는 의미를 가지고 있습니다.
function neverEnd(): never {
  while (true) {

  }
}

2. 함수의 타입

// 함수의 파라미터에 타입을 정의하는 방식
function sum(a: number, b: number){
  return a + b;
}

sum(10, 20);

// 함수의 반환 값에 타입을 정의하는 방식
function sum_2(): number {
  return 10; // return값이 없으면 에러나 오류를 보여주게 됩니다.
}

// 함수에 타입을 정의 ( 리턴 값 포함 )
function sum_3(a: number, b: number): number{
  return a + b;
}

파라미터를 제한하는 특성을 가지고 있습니다. ( 타입스크립트의 장점 )
좀 더 엄격하게 체크를 해주는 것 같습니다.

//자바스크립트 함수 정의
function sum(a, b){
  return a + b;
}

//자바스크립트에서 함수에 설정된 인자값 갯수보다 추가로 더 넘기기가 가능합니다.
//자바스크립트의 유연함을 의미합니다.
sum(10, 20, 30, 40, 50);

// 함수에 타입을 정의
function sum_4(a: number, b: number): number{
  return a + b;
}

// 타입스크립트는 불필요한 인자를 넣게 되면 경고 및 오류를 보여줍니다.
sum_4(10, 20, 30, 40);

3. 옵셔널 파라미터 ( ? )

특정 파라미터를 선택적으로 사용할 때 사용하는 기능 및 예약어 입니다.

// 함수의 옵셔널 파라미터
function log(a: string, b?: string) {
}

// 함수로 넘기는 인자의 갯수가 유동적일 때 ?을 활용해 타입을 정의합니다.
log('hello world'); // ?을 제거하면 오류 및 경고가 표시됩니다.
log('hello ts', 'a');

4. REST 문법 적용

function sum(a: number, ...nums: number[]): number {
  const totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return a + totalOfNums;
}

5. This 문법

타입스크립트에서는 자바스크립트의 this가 잘못 사용되어지면 감지하여 오류를 보여줍니다.

function 함수명(this: 타입) {
  // ...
}

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

타입스크립트로 컴파일 했을 때 --noImplicitThis 옵션이 있더라도 에러가 발생하지 않습니다.

6. 콜백에서의 This

콜백으로 함수가 전달되었을 때 this를 구분해줘야 할 때가 있습니다. 이 경우는 강제할 수 있습니다.

interface UIElement {
  // 아래 함수의 `this: void` 코드는 함수에 `this` 타입을 선언할 필요가 없다는 의미입니다.
  addClickListener(onclick: (this: void, e: Event) => void): void;
}

class Handler {
    info: string;
    onClick(this: Handler, e: Event) {
        // 위의 `UIElement` 인터페이스의 스펙에 `this`가 필요없다고 했지만 사용했기 때문에 에러가 발생합니다.
        this.info = e.message;
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick); // error!

만약 UIElement 인터페이스의 스펙에 맞춰 Handler를 구현하려면 아래와 같이 변경합니다.

class Handler {
    info: string;
    onClick(this: void, e: Event) {
        // `this`의 타입이 void이기 때문에 여기서 `this`를 사용할 수 없습니다.
        console.log('clicked!');
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick);