[Node.js_4기] TIL : TypeScript_1 (24/03/04)

목차

 

1. 학습 내용

2. 내용 정리

3. 예제

4. 생각 정리

TypeScript 학습 목적

JavaScript skill 향상

- 타입스크립트는 자바스크립트의 상위 집합이기 때문에 자바스크립트 기술을 향상시키는 데 도움이 됩니다. 타입스크립트를 배우면 자바스크립트에서 제공하지 않는 강력한 기능과 타입 시스템을 활용하여 코드를 더욱 효율적이고 안정적으로 작성할 수 있습니다.

코드 유지보수의 용이성 향상

- 타입스크립트는 정적 타입을 제공하므로 변수와 함수의 타입을 명시적으로 선언하고 버그를 사전에 예방할 수 있습니다. 이로 인해 코드의 가독성과 유지보수가 향상되며, 큰 규모의 프로젝트에서 특히 유용합니다.

프로그래밍 언어 이해 향상

- 타입스크립트를 배우면 프로그래밍 언어의 개념과 동작 원리를 더 잘 이해할 수 있습니다. 타입 시스템, 인터페이스, 제네릭 등의 개념은 다른 언어에서도 유사하게 사용되기 때문에, 개발자로서의 기본적인 지식을 향상시킵니다.

 

1. 학습 내용 

• TypeScript가 개발자에게 어떤 이점을 제공하는지 파악합니다.
• 컴파일러의 개념에 대해서 공부하고 tsc를 어떻게 사용하는지 파악합니다.
• 기본 타입의 종류와 사용법을 익힙니다.
• enum, object literal의 차이점과 언제 사용하면 좋을지 파악합니다. 
•  

2. 내용 정리 

w1_02. JS의 약점

2) Node.js의 잠재적 위험성

• 프론트엔드 에러 : 뷰의 일관성을 해칠 수 있지만, 동작에 피해는 없음
• 백엔드 에러 : 제대로 예외처리되지 않은 단순한 에러 하나로 서버가 다운될 수 있다.

3) JS의 약점 

• 실행 시간에 결정되는 변수 타입(변수에 잘못된 값이 할당되어 발생한 오류를 찾으려면 실행시에 변수의 값과 타입을 모두 확인해야함)
• 약한 타입 체크(let a=1; a="hello";) 
• 너무나도 물렁한 객체(js에선 프로그래머의 마음에 따라 객체의 성질을 변화시킬 수 있음)

-> 넘쳐나는 undefined 에러

 

w1_03. TypeScript의 등장!

3) TypeScript에서 바뀐점

• 실행시 결정되는 변수 타입 -> 컴파일 시간에 변수 타입 체크
  • 입력시에 에러를 발생시킨다!
• 약한 타입 체크 -> 코드 입력시 에러 발생
  • let a = 0; a="" -> error발생
• 물렁한 객체 -> 코드 입력시 에러 발생
  • 정의하지 않은 값을 연산하여 나오는 NaN 방지

4) TypeScript의 매력

• 객체 지향 프로그래밍(OOP)에서 TS의 메리트
  • JS : 누구든 클래스 내의 속성에 직접 접근하고 값을 변경시키는 짓이 가능하다!
  • TS: 외부에서 값을 변경하는게 불가능. 
• 외무 모듈의 타입 정보 제공
  • d.ts 선언파일을 통해 외부 모듈 타입 정보 제공 가능(@types 패키지)
  • JS라이브러리를 TS에서 안전하게 사용 가능!

w2_01. 컴파일러, 그리고 tsc

1) 컴파일러

• 컴파일러
  • 타입 검사를 해주는 해주는 언어 번역 프로그램
    • 소스코드의 정적 타입 검사 -> 타입 관련 오류를 미리 발견하고 수정 가능
    • 코드 변환도 해준다.(tsc : Js -> Ts)
  • 등장 배경 : 컴퓨터는 기본적으로 기계어 프로그램만 이해 가능. C언어등의 고수준 프로그래밍 언어로 만든 프로그램을 컴퓨터가 이해하기 위해 등장. / 현재 : 소스코드를 다른 프로그래밍 언어로 변환하는 도구.
    • 정적 언어(컴파일 언어) : 기계어로 변환이 되어야 한다.
    • 동적 언어(인터프리터 언어) : 엔진이 코드 한줄 한줄을 실행하면서 동적으로 해석 -> 기계어로의 번역 안함

w2_02. tsconfig.json 해부하기 

compilerOptions - strict : true, -sourceMap : true 권장

• tsconfig.json의 주요 compilerOptions
  • target : 프로젝트 내 코드들을 어떤 JS 버전으로 변환할지 (대충 es2016=es7로 컴파일)
  • module : 생성되는 js모듈 형식 지정(target과는 독립적) 모듈을 가져오고 내보내는 방식 결정
  • outDir : 출력 디렉터리(--outDir ./dist = dist 폴더에 저장하겠다)
  • ★strict : 엄격한 타입 검사 옵션
  • ★sourceMap : 에러 발생시 소스 코드 위치 확인 가능(디버깅에 매우 도움. 개발 환경에선 필수)
  • include, exclude : 컴파일시 포함/제외할 파일, 디렉터리 지정
    • "include":["src/**/*"] -> 디렉터리 밑의 파일들을 모두 컴파일 하겠다
    • "exclude":["node_modules", "dist"] -> 해당 디렉터리 밑의 파일들은 모두 대상에서 제외

w2_03. .d.ts 파일 알아보기

1) .d.ts는 JS라이브러리를 TS코드에서 사용할 수 있게 한다. -> 다양한 JS 라이브러리와의 호환성

2) @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보 제공

3) .d.ts 파일의 정체

• .d.ts : TypeScript 타입 정의 파일(JavaScript 라이브러리에 대한 타입 정보 제공)
• .d.ts 파일로 외부 라이브러리의 함수 타입 정보, 클래스 타입 정보, 객체 타입 정보를 알 수 있다.
• 외부 라이브러리의 타입 추론(명시되지 않은 타입에 대한 컴파일러의 추론)도 가능
• JavaScript 라이브러리를 한 줄도 수정하지 않고 그대로 쓸 수 있다!

w3_01. 타입을 왜 제대로 알아야 하는가

2) 오류가 일어나는 가장 빈번한 사례

• 잘못된 타입 사용
  
  • 잘못된 타입 사용, 예상치 못한 타입 사용시 오류 발생
  • 컴파일 타임이 아닌 실행 시간에 발생하며, 코드가 복잡해질수록 찾기 어렵다
• 올바른 타입 사용
  • 타입 안정성(코드가 예상한 타입대로 동작함을 보장) 향상, 테스트와 디버깅 시간 감소

5) 요약

• TypeScript는 정적 타입 시스템 도입으로 개발자들이 더 안정적이고 효율적인 코드를 작성할 수 있게 한다.
• 이를 통해, 프로젝트의 전반적 품질이 향상되고 더 나은 소프트웨어 개발 경험을 제공한다.

w3_02. 기본 타입 흝어보기

1) boolean : true/flase 두가지 물리적 상태 표현 (셋 이상의 상태 표현은 enum)

2) number : TypeScript에선 정수, 실수, n진수 모두 number로 표현. (수치 연산에 사용되는 값 전부)

3) string : 텍스트 데이터. 작은 따옴표(’), 큰 따옴표(”), 백쿼트(`) 를 사용해서 문자열 표현 (텍스트 조작, 출력)

4) 배열 : 기본타입에 []가 붙은 형태

5) 튜플 : 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수 배열 형태

• 배열 : number[], string[]같이 처음부터 끝까지 모두가 같은 타입
• 튜플 : 어떤 타입의 원소를 허용할지 정의해주면 된다.(허용 타입 데이터를 얼마든지 저장 가능. 순서는 지켜야함)

const person: [string, number, boolean] = ['Spartan', 25, false];
const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!

6) enum : 열거형 데이터 타입

• 다양한 상수를 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 하는 타입
• 값이 설정되어 있지 않으면 0부터 시작(index?)
• number/string 타입의 값만 할당 가

w3_03. const와 readonly

1) let : 변경할 수 있는 변수 선언

2) const : 변경할 수 없는 상수 선언

3) readonly : TS에서 등장한 키워드. 객체 속성을 불변으로 만드는 키워드(class, interface 속성을 불변하게.)

 

w3_04. any, unknown, union

가변적 타입 데이터 저장시 any보단 unknown. 가변 타입을 정의 가능하다면 union.

1) any : 모든 타입의 슈퍼타입(어떤 값이든 저장 가능) -> 뭐든지 가능한 미친놈. 위험하다.

3) unknown

• any와 비슷하지만 더 안전한 방식으로 동작
• 모든 타입의 값 저장 가능 / 변수에 할당하기 위해서는 명시적으로 타입 확인이 필요.

4) union

• unknown의 한계 : 재할당이 일어나지 않으면 타입 안정성이 보장되지 않는다.
• union : 여러 타입중 하나를 가질 수 있는 변수 선언시 사용
• |연산자를 사용하여 여러 타입을 결합하여 표현

5) 되도록이면 여러 타입을 하나의 변수로 해결하겠다는 생각은 지양하자.

 

3. 예제 

w2_03.5) 실습 : JS 라이브러리를 TS에서 사용해보기!

// 3. tsconfig.json
"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부

// 4. TS에서 사용하고 싶은 라이브러리를 JS로 생성
// test.js
/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */ 
export function add(a, b) { // export를 넣지 않으면 import 할 수 없는 것 아시죠?
  return a + b;
}
// 주석문을 JSDoc이라 한다. -> API의 인자, 리턴 타입등의 타입 힌트를 제공.

// 5. 아래 명령문을 터미널에서 실행
// npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types

// 6. types/test.d.ts 파일 확인
/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a: number, b: number): number;

// 7. test.js 파일을 참조할 foo.ts
import { add } from "./test";
console.log(add(1, 2));

// 8. 터미널에서 npx ts-node foo.ts 실행. 
// 정상실행 됨으로서 JS라이브러리를 TS프로젝트에서 사용 가능함을 알 수 있다.

 

w3_03_ 3)

class Person { 
  readonly name: string;
  readonly age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const person = new Person('Spartan', 30);
console.log(person.name);  // 출력: 'Spartan'
console.log(person.age);   // 출력: 30
person.name = 'Jane';  // 에러: 'name'은 readonly 속성이므로 다시 할당할 수 없어요!
person.age = 25;       // 에러: 'age'은 readonly 속성이므로 다시 할당할 수 없어요!

 

w3_04_3) unknown

let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 나는 문자열이지롱!

let stringValue: string;
stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안되기 때문!
stringValue = unknownValue as string;
console.log(stringValue); // 나는 문자열이지롱!

// 변수를 다른 곳에서 사용하려면 타입 단언을 통해 타입을 보장하여 사용
if (typeof unknownValue === 'string') {
  stringValue = unknownValue;
  console.log('unknownValue는 문자열이네요~');
} else {
  console.log('unknownValue는 문자열이 아니었습니다~');
}

// 타입 단언만이 답인건 아님
// typeof 키워드로 타입을 미리 체크하고 unknown을 string 변수에 할당 가능

 

w3_04_4) union

type StringOrNumber = string | number; // 원한다면 | boolean 이런식으로 타입 추가가 가능해요!

function processValue(value: StringOrNumber) {
  if (typeof value === 'string') {
    // value는 여기서 string 타입으로 간주됩니다.
    console.log('String value:', value);
  } else if (typeof value === 'number') {
    // value는 여기서 number 타입으로 간주되구요!
    console.log('Number value:', value);
  }
}

processValue('Hello');
processValue(42);

 

4. 생각 정리 

• 1) TypeScript
  • 더 안전하고 예측 가능한 코드 작성을 도와준다
  • ts파일을 .js파일로 컴파일하여 실행
  • Js의 슈퍼셋 언어. 정적 타입 검사를 지원

• 2) 기본 타입
  
  • string, number, boolean, null, undefined (js에도 있던 타입)
  • tuple, enum, any, unknown (새로 추가된 타입)

Node.js의 Express.js에서 Nest.js로 넘어가기 위한 학습으로, 타입까지 끊고 이후의 내용(고급 타입, 유틸리티 타입, 클래스와 상속, SOLID원칙 기반 객체 지향 설계 방법 등)을 추가로 작성할 예정입니다.

 

일단 TS의 첫인상은 깐깐하지만 유능한 직장 상사 같은 느낌입니다. 

이것저것 해야할 일은 많지만, 그 대가로 제가 질 책임이 줄어드는것 같습니다. 

 

사실 지난 프로젝트에서 가장 많이 겪은 문제가 타입 문제(2개의 인수를 받는 함수에 data라는 배열[2칸짜리]를 넣어놓고 왜 에러가 나는거지 하는 삽질)이였기 때문에 반갑게 느껴집니다.