타입스크립트 (TypeScript) - 타입, 타입선언

출처 : 구글이미지

01. 타입스크립트란?

 타입스크립트는 MS에서 개발한 오픈소스 프로그래밍 언어이다. 자바스크립트의 단점을 보완하기 위해 만들어졌다. 자바스크립트는 동적타입 언어(dynamic type language: 컴파일 시 자료형을 정하는것이 아니라, 런타임시 결정된다. 타입없이 변수만 선언해서 값을 지정할 수 있다)이기 때문에 런타임 속도는 빠르지만, 타입 안정성이 보장되지 않는다.(격공...) 반대로 타입스크립트는 정적 타입 언어(static type language: 컴파일 시 변수의 타입이 결정되는 언어, 변수에 들어갈 값을 형태에 따라 직접 타입을 명시)이기 때문에 컴파일 시 시간이 걸려도 안정성을 보장한다.

 

 타입스크립트는 자바스크립트의 상위집합이고, 자바스크립트에서 타입을 적용한 언어이다.

 

* 컴파일 : 사람이 이해하는 언어를 컴퓨터가 이해할 수 있는 언어로 바꾸는 과정

* 런타임 : 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻함

 

타입을 지정할 수 있다는건 정말 큰 무기인것 같다. 프로젝트가 커지면 커질수록, 그리고 파일들이 많아질 수록 함수, 변수들을 관리하기가 점점 어려워지는 것은 사실이다. 만약 딱히 관리를 하지 않는다면.. 뭐.. 할말은 없다만... 일을 하면서, 프로젝트를 하면서 느낀점은 타입을 지정하는게 정말 큰 도움이 되었다는 사실은 확실하다. 계속해서 타입들을 기록해보자.

02. 타입스크립트 타입

기본적인 타입스크립트의 타입에는 12가지가 있다. 

Boolean / Number / String / Object / Array / Tuple / Enum / Any / Void / Null / Undefined / Never

 

 

타입을 지정할 때는 콜론(:)을 활용해서 타입을 정의 한다.

// 1. String(문자열)
let str: string = "squid";

// 2. Number(숫자)
let num1: number = 456;
let num2: number = 4.56;
let num3: number = NaN;

// 3. Boolean(논리형: 참/거짓)
let result: boolean = true;

// 4. Object(객체), typeOf로 object를 반환하는 모든 타입을 나타낸다.
let obj: object = {};
let arr: object = [];
let func: object = function() {};
let date: object = new Date();

let game: { round: number, name: string } = {
  round: 2,
  name: "dalgona"
};

// 5.Array(배열) 두가지 방법으로 타입을 선언할 수 있다.
let arr1: string[] = ['g', 'g', 'a', 'b', 'u'];
let arr2: Array<string> = ['g', 'g', 'a', 'b', 'u'];

let arr3: (string | number) = [1, 'h', 2, 'o', 3, 's', 't'];
let arr4: Array<string | number> = [1, 'h', 2, 'o', 3, 's', 't'];

// 6.Tuple 배열과 유사, 정해진 타입의 요소 갯수 만큼 타입을 미리 선언 
let tuple: [string, number];
tuple = ["winner", 456];

// 7.Enum(열거형) 특정 값들의 집합을 의미하는 자료형이다. 기본적으로 0부터 시작한다.
enum Character {
  "Oh",
  "Seong",
  "Kang",
  "Han"
}

// 8.Any 모든 타입에 대해서 허용
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

//9. Void 변수에 undefined와 null만 할당, 함수에서는 반환값을 설정할 수 없는 타입에 지정
let foo: void = undefined;
function boo(): void {
  console.log('hi');
}

//10. Never 절대 발생할 수 없는 타입
function error(message: string): never {
    throw new Error(message);
}

타입들을 설정을 하고나서, 변수에 할당을 잘못하게 되면 당연히 에러를 발생한다. 처음에는 일일이 타입들을 지정하는게 귀찮을 수도 있고, 함수의 경우에는 변수의 타입을 다 지정해주고, 반환되는 타입도 다 지정해야 되서 힘들 수도 있지만, 정말로 나중에 코드를 짜다보면 분명 보람(?)찬 순간을 맞이하게 된다.

03. 타입스크립트의 함수

타입스크립트 함수에서도 타입을 지정을 할 수 있다. 

// 함수선언
function plus(a: number, b: number): number {
  return a + b;
};

// 함수표현식
const minus = function (c: number, d: number): number {
  return c - d;
};

// 화살표함수
const square = (e: number): number => {
  return e * e;
};

function sayHello(message: string, name: string): void {
  console.log(`${message}, ${name}`);
};
sayHello("Hello", "Lee"); // Hello, Lee!

// 선택적 매개변수 (Optional)
function sayHello(message: string, name?: string): void {
  console.log(`${message}, ${name}`);
};
sayHello("Hello"); // Hello, undefined

// 기본값 매개변수 (Default)
function sayHello(message: string, name: string = "Lee"): void {
  console.log(`${message}, ${name}`);
};
sayHello("Hello"); // Hello, Lee

// 나머지 매개변수 (Rest)
function sum = (num: number, ...rest: Array<number>): number {
  return rest.reduce((acc, cur) => acc + cur, a);
};

처음에는 정말 번거롭다.. 생각할 수 있지만!! 사용하다보면 나중에 감사할 일이 꼭 찾아온다..

공부.. 공부