Section4 Unit5 [TypeScript] 기초 - 타입스크립트 시작

---

Section4 Unit5 [TypeScript] 기초 - 타입스크립트 시작

 

📌 Chapter1. TypeScript

• TypeScript는 JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었다.

 

VSCode에서 TypeScript 환경 설정하기

 타입스크립트 학습을 위한 VSCode 환경설정 하는 방법을 따로 기록해두었다 :)

 

📌 Chapter2. TypeScript의 타입

// string
let name: string = "Lilly";

// number
let age: number = 29; 

// boolean
let isAdult: boolean = true;

// array 1. []
let numberList: number[] = [1, 2, 3];
let week: string[] = ['mon', 'tue', 'wed'];

// array 2. 제네릭 배열 타입
let numberList: Array<number> = [1, 2, 3];
let week: Array<string> = ['mon', 'tue', 'wed'];

 TypeScript의 타입과 함수 등 학습한 내용이 너무 방대해서 따로 정리를 해야할 것 같다.

 간단하게 기록하기에 공부할게 너무 많은 타입스크립트...

 

📌 Chapter3. TypeScript의 함수

• JavaScript에서의 함수와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow funciton) 등으로 만들 수 있다.

// naemd function
function add(x: number, y: number):number {
  return x + y
}

// arrow function
let add = (x: number, y: number):number => {
  return x + y;
}

 

📌 Chapter4. TypeScript의 연산자 활용 타입

• TypeScript는 연산자를 이용해 타입을 정할 수 있다. JavaScript에서도 보았던 ||(OR) 연산자나 && (AND)와 같은 연산자를 이용하여 만들 수 있다. | 연산자를 이용한 타입을 유니온(Union) 타입이라고 하며, & 연산자를 이용한 타입은 인터섹션(Intersection) 타입이라고 한다.

// Union Types

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

 Union 타입은 여러 타입 중 하나가 될 수 있는 값으로 세로 막대( | )로 각 타입을 구분한다.

 

 유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 한다.

 실질적으로 askSomenone 함수 내부에서는 Developer와 Person이 갖고 있는 공통 프로퍼티인 name에만 접근할 수 있다. 왜냐하면 공통되고 보장된 프로퍼티만 제공해야 하기 때문이다. 만약 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 한다.

 

// Intersection Types

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
  console.log(someone.name);
  console.log(someone.skill);
}

 Intersection 타입은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법으로 & 로 표기한다. 기존 타입을 합쳐 필요한 기능을 모두 가진 단일 타입을 얻을 수 있다.

 위의 코드는 인터섹션 타입을 사용하여 Developer와 Person을 하나의 타입으로 묶었다. 따라서 askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있다.

 

 유니온 타입과 인터섹션(교차) 타입에 대해 조금 더 공부하고 정리해서 글을 올렸다. 유니온/교차 타입 뿐만 아니라 리터럴 타입도 함께 다루었다 🙂

타입스크립트 유니온/교차 타입과 리터럴 타입

 

---

🌙  오늘의 회고

 타입스크립트 유닛에 들어왔다. 이전에는 막막하게만 느껴졌던 타입스크립트를 다시 한 번 만나게 되니, 열심히 공부해봐야겠다는 생각이 들었다. 오랜만에 이론만 보니까 조금 지겹고, 잘 이해하고 있는지 의문이 들었지만 그래도 오늘은 나름 재미있게 공부를 했던 것 같다. 🙂

 타입스크립트가 이전에는 커리큘럼에 없었는데, 이번 기수부터 생겼다고 들었다. 타입스크립트를 꼭 배우고 싶었던 나로써는 너무 잘된 일이었지만, 커리큘럼상 3일이라는 짧은 시간밖에 없어서 아마 과정 내에서 많은 걸 하지는 못할 것 같고, 따로 더 공부를 해야할 것 같다. 남은 이번 주도 화이팅 🔥