[TypeScript] 타입스크립트 #1

SOLEE_DEV·2021년 1월 9일
captainpangyotypescript
1

Typescript

목록 보기
1/10
post-thumbnail

본 포스팅은, '캡틴판교'님이 작성하신 '타입스크립트 핸드북'을 보고 스스로 정리하기 위해 작성하는 포스팅입니다. 자세한 내용은 https://joshua1988.github.io/를 참고해주세요!

1. TypeScript

자바스크립트에 타입을 부여한 자바스크립트의 확장된 언어이다. TypeScript의 장점은 다음과 같다.

1. 에러의 사전 방지

function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

=> 입력값의 type을 number로 지정해주어 원하지 않은 값이 입력값으로 오는 것을 막아준다.

2. 코드 가이드 및 자동 완성(개발 생산성 향상)

function sum(a: number, b: number): number {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

=> sum 함수에서 return 되는 값을 예측하여 타입을 자동으로 바인딩해주어 vscode 사용시 tab으로 빠르고 정확하게 코드를 작성해나갈 수 있다.

2. TypeScript 기본 타입 (12가지)

  • Boolean
  • Number
  • String
  • Object
  • Array
  • Tuple
  • Enum
  • Any
  • void
  • Null
  • Undefined
  • Never

Array

타입이 배열인 경우 간단하게 아래와 같이 선언

let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3]; //generic 사용

Tuple

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

let arr: [string, number] = ['hi',10];

이 때, 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 발생한다.

Enum

C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

// 1. 이넘은 인덱스 번호로도 접근 가능
let hero: Avengers = Avengers[0];

// 2. 만약 원한다면 이넘의 인덱스를 사용자 편의로 변경해 사용할 수도 있다.
enum Avengers { Capt == 2, IronMan, Thor }
// => 배열의 인덱스가 2부터 시작!
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

Any

모든 타입에 대해서 허용한다는 의미로, 기존에 js로 구현되어 있는 웹 서비스 코드에 ts를 점진적으로 적용할 때 활용하면 좋은 타입

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

Void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

Never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입

function neverEnd(): never {
  while (true) {

  }
}

3. 타입스크립트에서의 함수

웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의할 수 있다.

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

함수의 기본적인 타입 선언

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

기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가하였다.
이 때, 함수의 반환 값에 탑입을 정하지 않을때는 void라도 사용!

함수의 인자

ts에서는 함수의 인자를 모두 필수 값으로 간주한다. 따라서, 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어 왔는지 확인한다. 달리 말하면 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미이다.

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

위와 같은 특성은 정의된 매개변수의 갯수만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대된다. 만약 이러한 특성을 살리고 싶다면 ?를 이용해서 아래와 같이 정의한다.

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 10
  • 매개변수 초기화는 ES6 문법과 동일 (function sum(a: number, b='100'): number {

REST 문법이 적용된 매개변수

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

console.log(sum(1,2,3,4,5,6));
// a = 1, nums = [2,3,4,5,6]

JS ES6 비구조화 할당 문법

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.
간단하게 정리하면 배열[], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법이다.

var { a1, a2, ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // { a3: 30, a4: 40 }

출처 (https://yuddomack.tistory.com/entry/자바스크립트-문법-비구조화-할당)

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

콜백에서의 this

앞에서 살펴본 일반적인 상황에서의 this와는 다르게 콜백으로 함수가 전달되었을 때의 this를 구분해줘야 할 때가 있다. 그럴땐 아래와 같이 강제할 수 있다.

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

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

클래스의 메서드 방식으로 선언하는 것과 변수에 화살표 함수를 연결하는 것의 차이점!

Handler 유형의 개체 당 하나의 화살표 함수가 생성됩니다. 반면에 메서드는 한 번만 생성되고 Handler의 프로토 타입에 첨부됩니다. 핸들러 유형의 모든 오브젝트간에 공유됩니다.

profile
SOLEE_DEV
Front-End Developer
다음 포스트

[TypeScript] 인터페이스 (Interface) #2

0개의 댓글