[Codestates FE] Typescript

1. Typescript란?

TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합 언어로, JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어이다.

기존 JavaScript는 함수와 변수의 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많았고, 그 부분을 보완하여 런타임 에러를 최소화 시킨다.

TypesScript를 사용하면 코드의 가독성을 높일 수 있고, 타입을 명시함으로써 코드의 의도 또한 명확해지기 때문에 다른 개발자가 코드를 이해하고 수정하기 쉬워지며, 런타임 에러를 미리 방지할 수 있기 때문에 유지보수성 또한 높아진다.

 

2. Typescript의 타입

Boolean(불리언) 타입

가장 기본적인 데이터 타입, 참(true), 거짓(false) 값

let isShow: boolean = true;
let isDone: boolean = false;

 

Number(숫자) 타입

정수와 실수의 구분 없이 Number 타입 하나로 표기한다. bigint를 지원한다.

let number1: number = 5;
let number2: number = 0.7;

 

String(문자열) 타입

큰따옴표나 작은따옴표를 사용해 문자열 데이터를 표현한다. 백틱(`)을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있다.

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`;

 

Array(배열) 타입

// 첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

// 두 번째 방법
let numberList: Array<number> = [4, 7, 100];

첫 번째 방법은 배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 []을 쓰고, 두 번째 방법은 제네릭 배열 타입을 사용한다. 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능하다.

 

Tuple(튜플) 타입

튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

let user: [string, number, boolean] = ["kimcoding", 20, true];

JavaScript에서는 튜플 타입을 명시적으로 선언할 수 없기 때문에 개발자가 직접 요소의 타입을 확인하고 유추해야하므로 타입 에러가 더 쉽게 발생한다.

 

Object(객체) 타입

객체는 원시 타입이 아닌 타입을 나타낸다. 원시타입은 number, string, boolean, undefined, null, symbol이 있다.

JavaScript에서 Object(객체) 타입은 프로퍼티를 가지는 JavaScript의 값을 말하며 typeof 연산자를 사용했을 때 "object"을 반환하는 모든 타입을 의미한다.

let obj: object = {};

let user: {name: string, age: number} = {
	name: "kimcoding",
    age: 20,
}

object 타입은 모든 객체를 수용하는 타입으로 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떤 프로퍼티라도 추가할 수 있다. 이는 타입 안정성을 보장하지 않기 때문에 편하지만 추천하지 않는다. 따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 좋다.

 

Any 타입

타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있다. 클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있기 때문에, 이럴 때 사용된다.

let maybe: any = 4;

any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있다.

let obj: object = {};

// 에러가 난다.
obj = "hello";

let maybe: any = 4;

// 정상적으로 동작한다.
maybe = true;

엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않는다. 대신, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기 때문에 반환되는 값은 undefined이다.

let maybe: any = 4;

// undefined
console.log(maybe.length);

any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다. 예를 들어 여러 타입이 섞인 배열을 받고자 할 때 유용하다.

let list: any[] = [1, true, "free"];

// any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있다.
list[1] = 100;

 

3. Typescript의 함수

TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 한다. 각 매개변수에 해당하는 타입을 작성하고 반환되는 타입을 괄호 뒤에 작성을 해줘야 한다.

// named function
function add(x: number, y: number): number {
	return x + y;
}

// arrow function
let add = (x: number, y : number): number => {
	return x + y;
}

함수에 리턴값이 없다면, void를 사용하여 작성할 수 있다.

let printAnswer = (): void => {
	console.log("YES");
}

JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 한다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

// 에러가 난다.
greeting('coding');

// 정상적으로 작동한다.
greeting('coding', 'kim');

// 너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

전달인자를 전달하지 않거나, undjefined를 전달했을 때 할당된 매개변수의 값을 정해놓을 수도 있다. 이는 default parameter와 같은 동작을 한다.

let greeting = (firstName: string, lastName = "kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

// 정상적으로 작동한다.
greeting('coding');

// 정상적으로 작동한다.
greeting('coding', undefined);

// 너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있다.

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동한다.
greeting('coding');

//정상적으로 작동한다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

 

4. Typescript의 연산자 활용 타입

TypeScript는 연산자를 이용해 타입을 정할 수 있다. || (OR) 연산자나 && (AND)와 같은 연산자를 이용하여 만들 수 있다.

유니온(Union) 타입

유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입이다. A이거나 B이다 라는 의미의 타입이다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

printValue 함수는 숫자 또는 문자열 값을 입력받고 있다. 유니온 타입을 사용해 number | string 타입으로 지정하고 있다. 이후 입력된 값의 타입을 typeof 연산자를 사용해 검사한 후, 해당 값이 숫자인 경우와 문자열인 경우 각각 다른 로그를 출력한다. 이처럼 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용하다.

 

유니온 타입의 장점

유니온 타입을 사용하면 타입을 추론할 수 있기 때문에 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.

또한 코드의 가독성을 높일 수 있다.

 

유니온 타입 사용 시 유의할 점

유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 한다.

interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

인터페이스를 사용해 Developer와 Person을 정의했다. 그러나 실질적으로 askSomeone 함수 내부에서는 Developer와 Person이 갖고 있는 공통 프로퍼티인 name에만 접근할 수 있다. 공통되고 보장된 프로퍼티만 제공해야 하기 때문이다. 나머지에 접근하고 싶다면 타입 가드를 사용해야 한다.

 

타입 가드(Type Guard)란? TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나이다. 타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 준다.

function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

 

인터섹션(Intersection) 타입

인터섹션(Intersection)은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이다. & 연산자를 사용하여 표현한다.

let value: string & number & boolean;

이런 식으로 타입을 결합해 사용한다.

인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않다.

interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

function askSomeone(someone: Developer & Person) {
    console.log(someone.age);
    console.log(someone.name);
    console.log(someone.skill);
}

위의 코드는 인터섹션 타입을 사용해 Developer와 Person을 하나의 타입으로 묶었다. 따라서 askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있다. 그러나 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야 한다.