📌 TypeScript 프로젝트 초기 설정 보통 Create-React-App(CRA), Next.js, Nest.js를 통해 프로젝트를 생성할 경우, 타입스크립트 프로젝트 설정 파일을 따로 수동으로 작성해 줄 필요 없다. ⇒ 이러한 프레임워크, 라이브러리는 타입스크립트 프로젝트를 자동 생성해주기 때문! 1️⃣ 패키지 생성 y 옵션을 붙이지 않고 npm init을 실행할 경우, 위 양식에 대해 일일이 값을 입력해야 하지만, y 옵션을 사용할 경우, default값으로 설정된 package.json 파일을 생성해준다. (y는 "yes"라는 의미) 2️⃣ 타입스크립트 설치 ![](https://velog.velc

📌 Polymorphism (다형성) > 프로그램 언어의 각 요소들(상수, 변수, 식, 오브젝트, 함수, 메소드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질 TypeScript에서는 제네릭을 사용하여, 같은 코드를 다른 타입에서도 사용할 수 있도록 하여 다형성을 갖는다. generic? 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법 💡 LocalStorage API 만들기 🔎 지금까지 배운 다형성, 제네릭, 클래스, 인터페이스를 전부 합쳐보자! Storage는 이미 JavaScript 안에 이미 내장된 인터페이스이기 때문에, SStorage라는 인터페이스를 생성하였다. Storage: Web Storage API 의 Storage 인터페이스는 특정 도메인의 세션 또는

📌 Classes 💡 readonly class Dict의 메소드 add에서 단어를 추가하기 위해서는 term과 def가 public이어야 한다. 그러나 이 경우, 위처럼 인스턴스에서 수정이 가능하다. public property의 직접적인 수정이 불가능하도록 하려면 readonly 속성을 부여하면 된다. 💡 static > 클래스를 통해 인스턴스를 생성할 필요 없이, 클래스의 속성 또는 메서드를 사용하고자 할 때 사용하는 키워드 인스턴스를 생성하지 않고, 클래스에서 바로 호출이 가능하다. static은 JavaScr

📌 How to create a class in TypeScript TypeScript에서 class를 생성할 때에는 JavaScript와 달리, this를 사용하여 parameter를 할당하지 않고, parameter만 작성하여도 생성이 가능하다. 또한, 클래스 기반 객체 지향 언어가 지원하는 접근제한자를 사용하여 class를 생성할 수 있다. 위처럼 private property를 사용하여도 JavaScript로 컴파일된 후에는 사라지게 된다. ⇒ TypeScript에서 사용하는 접근제한자는 오로지 TypeScript에서 사용자를 보호하기 위한 장치! firstName은 private 속성을 갖고 있기 때문에 접근이 불가능하

📌 Polymorphism (다형성) number 배열을 받아서 배열의 요소를 각각의 콘솔로 찍는 함수 이때, boolean 타입의 배열이든, string 타입의 배열이든, 모든 배열을 인자로 받고 싶다면? 이렇게 매번 call signature를 만들어도 되지만, 다형성을 활용한 더 좋은 방법이 있다. ⇒ ✨ generic type ! 📌 generic type > 타입의 placeholder 같은 개념으로, concrete 타입 대신 사용! 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. concrete type ? ex. number, boolean, string, unknown ... 실제 상황에서는 직접 generic을 사용하여 call signatu

📌 Call Signatures > 함수를 구현하기 전, 함수가 어떤 타입으로 작동하는 지 Call Signature를 통해 선언할 수 있음 함수에 마우스 호버 시, 나타나는 function add(a: number, b: number): number 이 부분이 바로 Call Signature! 이 경우 함수 add의 return 타입이 number일 것이라고 TypeScript가 추론하였으므로, return 타입을 따로 명시하지 않아도 된다. ⇒ 반드시 return 타입을 명시하지 않아도 되는 경우가 있다! 🔎 함수의 call signature 타입을 만드는 방법 parameter a와 b가 number 타입이며, number 타입을 return하는 call signature 🔎 call signature 타입 적용 call signature를 적용할 경우, a와 b의

📌 Types of TS (part 1) 💡 optional parameter (선택적 변수) 🔎 모든 player가 이름은 가지고 있지만, age는 특정 인물만 가지고 있다면? player는 name:string과 age:number를 가진 object ✨ age를 선택적 변수로 만들고 싶다면 ?를 붙이면 된다. age는 number 타입이거나, undefined! 🔎 이때, player.age 값을 사용하려 하면? 타입스크립트는 player.age가 undefined일 수도 있다는 사실을 안다. player.age가 존재하는 지 확인하는 과정을 거친 후, if문 실행하도록 작성해야 한다. 💡 Alias 타입 🔎 만약, player가 엄청나게 많다면? 똑같은 타입을 반복해서 계속 적어줘

📌 How Typescript Works TypeScript는 JavaScript로 컴파일된다. ⇒ 브라우저가 이해하는 언어는 JavaScript이기 때문! TypeScript가 제공하는 보호장치는 TypeScript가 JavaScript로 변환되기 전에 발생한다. ⇒ 유저가 코드를 실행하는 런타임에 발생하는 것이 아닌 컴파일 시 발생! 이로 인해 TypeScript 코드에 에러가 있으면 그 코드는 JavaScript로 컴파일되지 않는다. 🔎 객체 안에 없는 함수를 사용하려 하면? 🔎 배열에 boolean 타입을 더하려 하면? 🔎 인자로 두 개의 number가 필요한 함수에 한 개의 string을 입력한다면? 모두 작성하자마자 바로 에러가 표시된다. ⇒ 컴파일 시 에러 표시❗️ 📌 Im

📌 Why not JavaScript 💡 타입안정성 TypeScript의 가장 큰 장점! 코드의 버그를 줄일 수 있다. 런타임 에러가 감소한다. 생산성이 증가한다. 이로 인해 개발자를 에러/버그로부터 보호해 준다. 🤔 JavaScript에서는? 🔎 배열에 boolean 타입을 더하려고 하면? 배열이 사라지고, string이 되어버린다 boolean 타입이던 false도 string이 되어 배열과 합쳐진다. ⇒ 이상한 일인데도 JavaScript는 이를 허용해버린다! 🔎 2개의 number를 인자로 받아 나누는 함수 divide에 1개의 string을 전달한다면? ⇒ 올바른 함수 사용법이 아닌데도 JavaScript는 이를 전혀 막아주지 않는다! 자바스크립트는 a, b가 무엇인 지, 필수 입력값인지 선택 사항인 지 모른다. 🔎 객체 안에 없는 함수를

📌 TypeScript를 사용하는 이유 💡 JavaScript는? > JavaScript (동적 언어) 런타임(실행되는 시점)에 타입이 결정되며, 오류가 있을 경우 이 때 발생한다. 원하는 사용법이 아님에도 불구하고, 자바스크립트에서는 아무런 경고 없이 함수가 실행된다. 이러한 경우 원하는 값을 얻을 수 없다. 💡 TypeScript는? > TypeScript (정적 언어) 컴파일 타임에 타입이 결정되며, 오류를 이 때 발견할 수 있다. 위에서 작성했던 코드를 타입스크립트에서 작성할 경우, 바로 에러가 났음을 알려준다. ❗️ 타입스크립트에서는 의도했던 사용법이 아니라면, 함수를 사용할 수 없다.