TypeScript - 타입, 함수, 연산자 활용 타입

TypeSciprt?

TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합 언어이다.

JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 밟전하면서 생긴 단점을 보완하기 위해 등장하게 되었다.

TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있다.

 

 

 

TypeScript의 타입

Boolean 

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

Number

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];

첫 번째 방법은 배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 [ ]을 쓴 것이다.

두 번째 방법은 제네릭 배열 타입을 사용한 것이다. Array를 먼저 작성한 뒤, < >안에 배열의 요소들을 나타내는 타입을 작성한다.

배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능하다.

 

Tuple(튜플) 

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

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

 

Object

let obj: object = {};

TypeSciprt에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다. 그러나 이는 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아니다.

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

이런식으로 객체의 프로퍼티 타입들을 명시해 주는 것이 좋으며, key-value에 구체적인 타입까지도 지정할 수 있다.

 

Any

간혹 알지 못하는 타입을 표현해야 할 때도 있다. 클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수도 있는데, 이때 any 타입을 사용할 수 있다.

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

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

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

 

 

 

 

TypeScript의 함수

TypeScript에서도 JavaScript와 마찬가지로 기명 함수(name function)와 화살표 함수(arrow function) 등으로 만들 수 있다.

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

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

//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;
}

TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 한다. 각 매개변수에 해당하는 타입을 작성한 뒤, 반환되는 타입을 괄호뒤에 작성해줘야 한다. 이는 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수이다.

 

만일 함수에 리턴값이 없다면, void를 사용하여 작성할 수 있다. 이 또한 마찬가지로 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수이다.

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

 

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

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

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

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

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

 

만약 개발자가 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수 있다. 이는 JavaScript에서의 default parameter와 같은 동작을 한다.

let greeting = (firstName: string, lastName: string ="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');

 

 

 

 

TypeScript의 연산자 활용 타입

유니온(Union) 타입

유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입이다. | 연산자를 이용하며, JavaScript의 ||(OR) 연산자와 같은 의미이다.

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

 

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

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

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

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

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);
  }
}

in 연산자는 객체의 프로퍼티 이름과 함께 사용되며, 해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다.

 

 

 

인터섹션(Intersection) 타입

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

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

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

type User = Developer & Person;

여기서 User 변수는 Developer, Person 각각에 정의된 속성 모두를 받게 된다.

 

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 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있다.

 

인터섹션 타입은 타입 가드는 필요없는 반면 Developer와 Person이라는 새로운 교집합을 만들어 내는 것이기 때문에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야 한다. 반대로 유니온 타입은 타입 가드를 해줘야 하지만 전달인자를 전달할 때 선택지가 생기게 된다.

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

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

function askSomeone(someone: Developer | Person) {
	//이런 식으로 프로퍼티에 접근할 수 있습니다.
  if ('skill' in someone) {
    console.log(someone.skill);
  }

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

//유니온 타입은 전달인자를 전달할 때 선택지가 생깁니다.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});

function askSomeone2(someone: Developer & Person) {
	//타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있습니다.
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

//그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없습니다.
askSomeone2({name: '김코딩', skill: '웹 개발', age:20});