[ TIL ] Day 46 - TypeScript 기본 문법 1

🗓️ 수업 일자 : 2025.11.28

✨ 오늘의 수업 평가 :  [ GOOD ]   배움이 팡팡 터진 날 🍿💡

 

오늘 배운게 많아서, 정리하는데 엄청 애 먹는다..

오늘 정리 못한 기능은 주말에 시간내서 작성 해야겠다 ㅋㅋㅋㅋ 

 

📝  오늘 배운 내용  

- TypeScript란?

- TypeScript 타입 정리
- 타입 스크립트의 enum

---

1. TypeScript란? 

기본 설명

• Javascript를 기반으로 만들어진 SuperSet 언어로, Javascript에 "정적 타입"을 추가 한 언어 
• 컴파일 시점에 타입 오류를 미리 발견하여 코드의 안정성 / 가독성 / 유지보수성을 높임
• Transpile : TypeScript를 Javascript로 변환하는 기능으로, 양쪽 언어의 버전을 선택 할 수 있음.
     ⇒ Node.js는 Javascript만 해석 가능하기 때문에, Node.js 환경에서 사용하려면 Javascript 언어로 변환 과정 필요 
• TypeScript 공식 홈페이지 : https://www.typescriptlang.org/

JavaScript With Syntax For Types.

- TypeScript 버전 별 테스트 환경 제공 : TypeScript > Playground

TS Playground - An online editor for exploring TypeScript and JavaScript

 

설치 및 사용하기 with Terminal

1. npm install --save-dev typescript : Typescript는 개발 환경에서만 사용하므로, 개발 모드로 설치
2. npx tsc --init : package.json처럼 Typescript용 셋팅 파일인 tsconfig.json 을 만듦
3. TypeScript를 사용하여 작업 진행
4. npx tsc : 작성한 ts 파일을 Javascript용으로 변환하는 과정 
   npx tsc main.ts : 특정 파일만 변환도 가능

   - tsconfig.json 구조 

• "rootDir": "./src" : 작성한 소스 코드 폴더를 지정
• "outDir": "./dist" : Typescript 코드를 변환하여 저장 할 폴더 지정

Typescript 폴더 기본 구조

 

 

타입 선언 방식

• 리터럴 타입 : 값 자체를 타입으로 쓰는 방식. 예를 들어 숫자 타입 명시를 하는 대신
                       1,2,3 과 같은 숫자를 값으로 사용하면 자동으로 Number 가 타입으로 저장
• 타입 추론 : 개발자가 타입을 설정하지 않고 쓴 코드의 경우, 작성한 코드를 바탕으로 TS가 알아서 타입을 추측함
• 타입 명시 : 개발자가 직접 타입을 설정. 가장 많이 사용 할 구조 

+ 추가 컴파일 오류 vs 런타임 오류 

- 컴파일 오류 : 코드 실행 전 타입스크립트나 컴파일러가 잡아내는 오류

                       문법 오류, 타입 오류, 실행 자체가 안되는 오류

- 런타임 오류 : 코드 실행 중 프로그램이 터지는 오류 

                       서버 / 브라우저에서 실행 도중 발생하는 오류로 타입 문제, 예외 처리 부족, API 실패 등이 있음

 

 

2. TypeScript 타입 정리

1) 원시 타입 

const typeSting : string = '테스트 문장';
const typeNumber : number = 123; 
const typeBoolean : boolean = true;
const typeUndefined : undefined = undefined; 
const typeNull : null = null;

 

2) 객체 타입

- 배열 : 원시타입과 함께 배열을 뜻하는 [ ] 대괄호를 사용

// 1차 배열 만들기
const typeArray: string[] = ['a','b','c'];

// 2차 배열 만들기
const doubleArray: string[][] = [
  ['user001', 'user002'],
  ['user003'],
  // [1], // 숫자형 배열 입력 불가능
];

 

- 객체 : 키와 값의 데이터 타입을 모두 설정 가능, 키에 물음표(?)를 사용하면 해당 "키값"쌍을 옵셔널하게 사용 가능

- 방식 1. 고정형 키 이름을 쓰는 경우, 값만 데이터 타입을 설정 
let person : {
  id: string;
  name: string;
  email?: string; // 키 값에 물음표 : 사용 유무를 옵셔널하게 설정
} = {
  id: 'user-001',
  name: '김데이',
};

if (person.email) {
  console.log('이메일이 있습니다');
} else {
  console.log('이메일이 없습니다');
}

- 방식 2. 객체의 키, 값 모두 데이터 타입을 설정
let stock: {
  [id: string]: number;
} = {
  user-001: 3,
  user-002: 0,
  user-003: 1,
  // 004 : 2  키의 데이터 타입이 올바르지 않아 에러
  // c004: 'kimday', 값의 데이터 타입이 올바르지 않아 에러
};

stock['c005'] = 12;
stock.c006 = 11;

 

- 함수 : 인자와 리턴값에 대한 타입을 지정

- 방식 1 : 함수를 선언하면서 인자 옆에 바로 작성하는 방식
function helloIntro(name: string): string {
  // 함수명 (인자의 타입을 지정) return 타입 { ... }
  // (name: string) : 인자의 타입
  // string : 리턴 값에 대한 타입
  return `${name} 안녕하세요!`;
}

- 방식 2 : 함수 전체를 타입 구조화하여 작성하는 방식
const helloworld: (name: string) => string = (name) => `${name} 안녕하세요!`;
// 타입 선언 시 구조화 하여 선언 : (name: string) => string

 

 

3) 튜플 

- 배열에 사용하는 기능으로, 배열을 좀 더 확장하여 사용 가능

- 방식 1 : 요소의 갯수를 정하여 사용. 미리 지정한 요소 갯수가 부족하거나 넘치면 에러 발생

- 방식 2 : 여러 타입을 함께 사용하는 배열로, 순서와 요소 갯수를 꼭 지켜야 함

- 방식 1 예시 코드
  let mySize: [number, number] = [167, 28];

- 방식 2 예시 코드
  let myType: [number, number, string] = [175, 30, 'L'];

 

4) any, unknown 

 - 두 타입 모두 특정 타입을 선언하지 않고 쓰는 데이터 타입 

 - any : 어떤 타입이 와도 허용되며, 별도의 검증 과정을 요구하지 않음. 정말 급할때 아니면 절대 사용 금지

 - unknown : 어떤 타입이 와도 되지만, 별도의 검증 과정을 꼭 진행해야 오류를 발생시키지 않는 데이터 타입

// any 예시 
let value: any = "hello";

value = 3; // value 값으로 아무 값이나 변경 가능

// unknown 예시
function isString(input: unknown) {
  if (typeof input === 'string') {.
    // 타입 확인 후 안전하게 사용 가능
    // typeof, Array.isArray(), instanceof 등으로 데이터 검증 작업 필수
    console.log("사용 가능"); 
  } else {
    console.log("입력값이 문자열이 아닙니다.");
  }
}

 

 

3. 타입 스크립트의 enum

- Prisma에서 사용하는 enum과 흡사한 방식으로 사용
- 보편적으로 PascalCase 로 선언해서 사용하고, 키는 모든 값을 대문자(ABC)로 사용

- 키와 값을 입력하여 사용 가능 

- 값을 넣지 않으면 0부터 자동으로 값이 입력 됨

enum ShirtSize {
  S, // 0
  M, // 1
  L, // 2
  XL, // 3
}

enum PantsSize {
  S = 40,
  M = 50,
  L = 60,
  XL = 70,
}

// 다른 객체에서 사용하기
const myClothSize: {
  name: string;
  shirt: ShirtSize[];
  pants: PantsSize[];
} = {
  name: 'js',
  shirt: [ShirtSize.XL], // 3
  pants: [PantsSize.L], // 60
};

// 콘솔로 바로 불러오기
console.log(myClothSize);
console.log(ShirtSize.M); // 1
console.log(PantsSize.M); // 50

 

---

 

📃 내일은 뭘 배울까 🤔

- 타입 시스템 확장 기능

- 타입 조합하기

- 내장 타입 사용하기