[TypeScript] 타입스크립트로 타입지정해서 개발하기

Mincho·2023년 3월 30일

TS

목록 보기

1/2

🔴 Typescript

처음 개발에 입문하고 지금까지 자바스크립트로만 프로젝트를 진행해왔다. 그러던 와중 typescript가 점점 요구되고 있는 시장 상황을 알게 되었고 이에 대해 공부해봐야겠다는 생각을 가지게 되었다.

위의 차트는 stackoverflow에서 조사한 개발자들에게 가장 인기있는 언어이다. javascript가 웹개발 프론트쪽 언어에서 많이 사용되다 보니 1위 인 것을 알 수 있다. 하지만 5위에 typescript가 위치해 있는 것을 볼 수 있었다. 작년 조사에서는 typescript 9위(25%)정도에 위치해 있었지만 빠른 성장세를 보이고 있다. 그렇다면 왜 javascript대신에 typescript를 도입하려는 시도가 많이 보이는 것일까??👀

🟠 Typescript를 도입하는 추세가 강해지는 이유

정적 타입 체크
TypeScript는 정적 타입 체크를 지원한다. 이를 통해 개발자는 컴파일 시점에서 오류를 잡아내기 때문에 더 안정적인 코드를 작성할 수 있다. 이는 JavaScript에서 자주 발생하는 런타임 오류를 사전에 방지할 수 있어 개발 생산성을 높일 수 있다.
코드 가독성
TypeScript는 코드 가독성을 높이는 다양한 기능을 제공한다. 이를 통해 다른 개발자들이 더 쉽게 코드를 이해하고 유지보수할 수 있습니다.
자동 완성 및 코드 어시스트
TypeScript는 개발 툴에서 자동 완성과 코드 어시스트를 지원한다. 이를 통해 개발자는 빠르게 코드를 작성할 수 있다. 또한, 인터페이스와 타입 어노테이션 등을 사용하여 코드를 더 명확하게 작성하면, 개발 툴에서 더 나은 코드 어시스트를 제공할 수 있다.
확장성
TypeScript는 JavaScript와 100% 호환되므로, JavaScript 프로젝트에서도 점진적으로 TypeScript를 도입할 수 있다. 또한, TypeScript는 다른 라이브러리와 프레임워크와 함께 사용하기 쉽다. 이를 통해 프로젝트의 확장성을 높일 수 있다.
커뮤니티 지원
TypeScript는 Microsoft에서 지원하는 프로젝트로, 다양한 기능과 문서, 커뮤니티 지원 등을 제공한다. 또한, TypeScript를 사용하는 기업도 늘어나고 있어, 더 많은 개발자들이 TypeScript를 사용하고 있다.

🟡 예제코드

1) 기본적인 기능

/**자바스크립트 코드*/
function greeting(name) {
  return "Hello, " + name + "!";
}

console.log(greeting("John"));

/**타입 스크립트 코드*/
function greeting(name: string): string {
  return "Hello, " + name + "!";
}

console.log(greeting("John"));

위의 두 언어로 같은 결과를 출력하고 있고 구조도 어느정도 같다.
하지만 JavaScript는 동적 타입 체크 언어이므로, name 변수가 문자열(string)일 필요는 없다. 따라서 greeting 함수는 인자로 어떤 타입의 값이든 받을 수 있습니다.

반면 TypeScript는 정적 타입 체크 언어이므로, name 변수가 문자열(string)이어야만 한다. 이를 위해 name 변수의 타입을 :string으로 명시해주었다.

이 예시에서 볼 수 있듯이, TypeScript는 JavaScript에서 발생할 수 있는 많은 오류를 사전에 방지할 수 있다. 또한 코드 가독성을 높이고 자동 완성과 코드 어시스트 등 다양한 기능을 제공한다.

또한 위와 같이 숫자형으로 greeting함수에 인자를 넣게 되면 오류를 표시해준다. 기본적으로 타입은 원시형 타입인 string, number, boolean(null, undefined 등등은 제외)을 표기한다.

/** 배열 선언 */
let hobbies: string[];

hobbies = ["1", "2"];

/** 객체 선언 */
let person: {
  name: string;
  age: number;
};

person = {
  name: "Max",
  age: 32,
};

배열이나 객체 같은 경우에도 다음과 같이 type을 명시해 줌으로써 선언해 줄 수 있다.

2) 타입스크립트의 추론과 유니온기능

/** 타입 추론 */
let course = "Typescript";

course = 12345;

다음과 같이 course라는 변수에 문자열이 있고 이 변수에 다시 숫자를 담으려고 하면...,,,

보기와 같이 오류가 나게 된다.

마우스를 대면 string타입이 아니라는 오류를 볼 수 있다. 그렇다... 타입스크립트는 변수 선언시에 타입을 추론하여 타입을 명시해주지 않아도 알아서 판단해준다. 그렇다면 course라는 변수에 문자나 숫자 상관없이 받고 싶을 때는 어떠한 방식이 있을까??

/**any로 타입주기 */
let course: any = "Typescript";
course = 12345;

/**union 문법 사용 */
let course: string | number = "Typescript";
course = 12345;

첫번째로 any를 이용해 타입 구분을 주지 않는 방법이다. 하지만 모든 타입을 받아 버리면 javascript처럼 다뤄 버리는 것으로 typescript사용하는 의미가 무색해진다.

두번째 방법은 or연산자 처럼 |를 이용하여 타입을 추가해주는 방식이다. 두번째 방식으로 하는 것이 더 좋아보인다.

3) 타입 별칭 만들기

/**타입 별칭 만들기 */
type Persion = {
    name : string,
    age : number
}

let person : Persion ={
    name : "hyun",
    age : 25
}

위와 같이 타입별칭을 만들어서 변수의 객체 하나하나에 대한 변수를 지정해 두지 않아도 만든 타입별칭을 가져다 사용해 편의성을 가져갈 수 있다.

4) 함수에 대하여

const data = (a: number, b: number) => {
  return a + b;
};

다음과 같이 함수의 매개변수를 number로 설정해두면 함수의 return값도 저절로 type이 number로 설정되어 있는 것을 확인 할 수 있다. 위에서 설명한 것과 같이 type 추론하는 typescript기능때문이다. 하지만 숫자형과 문자형 상관없이 반환하는 함수를 만들어주려면 어떻게 타입을 주어야 할까??

5) 제너릭

const insertData = <T>(array: T[], value: T) => {
  const newData = [value, ...array];
  return newData;
};

const testData: number[] = [1, 2, 3];
const stringData: string[] = ["a", "b", "c"];

const updatedData = insertData(testData, -1);
const updatedStringData = insertData(stringData, "d");

insertData함수는 기존 배열에 새로운 값을 추가해주는 함수이다. 문자배열에는 문자만, 숫자배열에는 숫자만을 추가해주고 싶다면 위와 같이 제너릭문법을 활용해야한다. 원하는 매개변수()앞에 <원하는 특수 문구>를 넣고 그 값을 타입으로 넣어주면 동일한 타입만을 받을 수 있게 되는 것이다.