[타입스크립트] 타입스크립트 개념과 실무에 유용한 Type Narrowing 기법

 

 

 

 

🤷‍♂️ 타입스크립트란?

---

요즘 타입스크립트(typescript)는 국룰처럼 프런트엔드, 백엔드에서 많이 사용되는 오픈소스 프로그래밍 언어입니다.

저 또한 타입스크립트 활용하며 더욱 안전하고 좋은코드를 만들기 위해서 노력합니다.

본론으로 가서 타입스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로 자바스크립트 슈퍼셋으로 즉 자바스크립트의 상위 확장자로 자바스크립트 엔진을 활용하며 변수의 타입을 정의하고 프로그래밍하면 자바스크립트로 컴파일되어 실행할 수 있습니다.

 

 

[TypeScript] 타입스크립트 타입정의 공부하기

https://cometruedream.tistory.com/125

[TypeScript] 타입스크립트 타입정의

 

🤷‍♂️ 타입스크립트 사용하는 이유?

---

1. 코드의 가독성 와 유지보수성 향상

Typescript는 코드에 타입 정보를 추가하여 개발자가 코드의 의도를 명확히 이해할 수 있게 합니다.

예를 들어 함수의 매개변수, 반환값의 타입을 명시하여 함수의 의도와 사용방법을 쉽게 파악할 수 있고 코드의 가독성과 유지보수성을 높일수 있습니다.

 

예제

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

const result = add(2, 3); //타입추론으로 result 자동으로 number 타입으로 추론합니다.

 

 

 

 

2. 컴파일 시점의 오류 검출

Typescript는 컴파일 시점에 타입 오류를 검출합니다.

이는 런타임에 발생할 수 있는 오류를 미리 방지할 수 있게 도와주며 프로젝트의 안정성을 높일 수 있습니다.

 

예제

function greet(name: string) {
  return `Hello, ${name}`;
}

greet(42); //컴파일 오류 greet 함수는 문자열의 인자값을 받을수 있습니다.

 

 

3. 생산성과 더 나은 개발 도구 지원

Typescript는 코드에 타입 정보를 추가하여 개발자가 코드의 의도를 명확히 이해할 수 있게 합니다.

예를 들어 함수의 매개변수, 반환값의 타입을 명시하여 함수의 의도와 사용방법을 쉽게 파악할 수 있고 코드의 가독성과 유지보수성을 높일수 있습니다.

 

🤷‍♂️ 타입 내 로잉(Type Narrowing)란?

---

타입 내로잉은 타입스크립트에서 변수가 특정 타입임을 정확하고 확실하게 알려주는 방법입니다.

실무에서 타입정의를 하다 보면 예상치 못하게 여러 가지 타입을 가질 수 있는 변수를 타입 에러를 피하기 위해서 조건문으로 특정 타입으로 좁히면서 코드의 안정성과 가독성을 높이는 중요한 기법입니다.

 

 

타입내로잉 쉽게 이해하기

💡" 타입의 범의를 좁히면 코드가 더욱 안전하다"

 

타입 내 로잉(type narrowing) 예제

typeof 구분 예제

function printValue(value: number | string) {
  if (typeof value === 'number') {
    console.log(`숫자 값: ${value}`);
  } else {
    console.log(`문자열 값: ${value}`);
  }
}

printValue(42); // 숫자 값: 42
printValue("Hello"); // 문자열 값: Hello

 

위에 예제처럼 printValue 함수의 매개변수는 숫자와 문자열의 타입을 가질 수 있고 typeof 활용해서 값이 숫자인지 문자열인지 타입의 범위를 좁힐 수 있습니다.

 

 

 

null 체크 구분 예제

function greet(name: string | null) {
  if (!name) {
    console.log("이름이 제공되지 않았습니다.");
  } else {
    console.log(`안녕하세요, ${name}!`);
  }
}

greet("Alice"); // 안녕하세요, Alice!
greet(null); // 이름이 제공되지 않았습니다.

 

위에 예제처럼 greet 함수의 매개변수는 문자열과 null의 타입을 가질수 있고 조건문을 활용해서 값이 문자열인지 null인지 타입의 범위를 좁힐 수 있습니다.

 

 

배열 타입 구분 예제

function processItems(items: number[] | string[]) {
  if (items.length === 0) {
    console.log("빈 배열입니다.");
    return;
  }

  if (typeof items[0] === 'number') {
    console.log(`숫자 배열: ${items}`);
  } else {
    console.log(`문자열 배열: ${items}`);
  }
}

processItems([1, 2, 3]); // 숫자 배열: 1,2,3
processItems(["a", "b", "c"]); // 문자열 배열: a,b,c

 

위에 예제처럼 배열에 요소가 숫자인지 문자열인지 타입의 범위를 좁힐수 있습니다. 

 

🤷‍♂️ 마지막으로

---

실무에서 타입스크립트를 활용하다보면 타입 내 로잉 기법을 활용해서 타입의 범위를 좁히고 코드의 안정성과 유지보수성을 높여서 코드의 품질을 향상시킬수 있습니다.

처음에는 타입내로잉 기법을 왜 사용하는지에 대한 의문점이 생길 수 있습니다.

하지만 타입스크립트를 잘 활용해서 코드에 품질을 높이기 위해서는 사용해야 하는 기법 중에 하나라고 생각합니다.

위에 예제는 가장 기본적이며 필요한 예제들입니다.

위에 예제를 기반으로 타입스크립트를 학습하고 자기개발을 하면 좋을 거 같습니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리