[코드잇][공부 일지] 타입스크립트 기본 문법 정리

 

웹 개발에 타입스크립트가 필수인 시대가 왔다

이제는 자바스크립트만으로는 개발자 생태계에서 살아남을 수 없다고 한다

기업들의 개발자 채용공고를 보면 전부 타입스크립트를 기본 조건으로 걸고 있다

 

하지만 시중에 자바스크립트 강의는 무수히 많은데도

타입스크립트의 기초를 설명해주는 강의는 거의 없어서 막막했다

 

https://www.codeit.kr/topics/typescript-basic

TypeScript 기본기 - 강의 | 코드잇

그러다가 코드잇에 타입스크립트 기본기라는 강의가 있어

타입스크립트의 기초를 다져보기로 하였다

 

---

 

강의 내용을 정리한 기록에서
특히 오래 기억하고 싶은 인상적인 일부만 가져왔기에 
목차 순서가 연속적이지 않습니다!

전체 내용은 강의를 통해 확인해주세요 :)

01. 기본형

문자열	string
숫자형	number
불린형	boolean
undefined	undefined
null	null

 

07. 배열과 튜플

• Tuple
  • 배열 생성
  • 최소한의 길이
  • 특정 위치에 특정 타입

// 배열
const array: string[] = [];

// 튜플
let tuple: [number, number, string] = [175, 30, 'L'];

 

09. 객체 타입

let product: {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean; // 필수가 아닌 프로퍼티
  sizes: string[];
} = {
  id: 'c001',
  name: '코드잇 블랙 후디',
  price: 129000,
  sizes: ['M', 'L', 'XL'],
};

 

그 외 다양한 타입들

• undefied
• any → 타입스크립트의 보호장치로부터 벗어난다, 잘 안쓴다
• unknown
  • 변수의 타입을 미리 알지 못할 때

    let a: unknown;
    
    if(typeof a === 'number') {
    	// a의 타입이 number임을 확인한 상태
    	let b = a+1
    }
    

• void
• never

  function hello(): never {
  	throw new Error("xxx")
  }
  // 리턴 없이 오류 발생

   

12. 함수에 타입 정의하기

Call Signature

→ 타입을 지정하는 것

function addToCart(id: string, quanity: number): boolean {
    if (어떤 조건) {
     return false;
  }

  return true;
}

Overloading

→ 함수가 서로다른 여러개의 call signature를 가지고 있을 떄 발생

type Add = {
	(a: number, b: number) : number
	(a: number, b: number, c:number) : number  // 파라미터 갯수가 다르다면 옵션
	(a: number, b: string) : number
}

const add: Add = (a,b) => a+b  // b가 number string 둘 다 될 수 있으므로 오류 발생

// 아래처럼 해줘야함
const add: Add = (a,b, c?:number) => {
	if(c) return a+b+c
	else if(typeof b === "string") return a
	else return a + b
}

 

---

6. 제네릭

 

🧩 Polymorphism (다형성)

⇒ call signature 를 사용하는데 concrete type 을 모를때 -> generic 사용

const productMap: Record<string, Product> = {}
productMap['c001'] = product1;
productMap['c002'] = product2;

 

---

4. Interfaces

 

Classes (비교)

• 추상클래스
  • 다른 곳에서 상속받을 수 있는 클래스
  • 직접 인스턴스를 만들지는 못함

Interface

• 타입과 인터페이스는 거의 유사하다. (둘다 추상클래스로 대체)
  • 다만, 인터페이스는 객체 모양 결정에 특화된 형태
  • 인터페이스는 항상 상속이 가능하다 (타입은 새 타입을 만들어야함)
  • 선언을 중복으로 가능 ⇒ 프로퍼티 추가
• 자바스크립트로 컴파일되지 않음

 

---

7.  typescript.config

• npm i -y
  • package.json 파일 생성
• npm i -D typescript
  • 타입스크립트 devDependencies에 설치
• npm i ts-node
• npm i nodemon
  • 서버 재시작 필요 없이 자동으로 컴파일
• touch tsconfig.json

// @ts-check

/**
 * Initialize the project
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns {boolean}
 */

export function init(config) {
  return true;
}

 

 

 

---

 

배우고 싶었던 내용을

코드잇 강의를 통해 배우고 기록하며

타입스크립트에 대해 공부할 수 있었다

 

위 사진속 목차에 있는

"몬스터 데이터 개선하기" 같은

강의 제목 치고 생소한 문장은

 

아래와 같은 실습에 대한 내용이다

 

 

이렇게 강의 중간중간 실습이 존재하는 덕분에

단순히 강의를 수동적으로 듣기만 하는것보다

훨씬 덜 지루하고 즐겁게 공부할 수 있었다

 

---

 

학습 기록 끝 !