5️⃣ 클래스 확장TypeScript의 클래스는 다른 클래스를 확장하거나 하위 클래스를 만드는 JavaScript 개념에 타입 검사를 추가한다. 즉, JavaScript에서의 클래스 + 타입검사가 TypeScript에서의 클래스 확장성에 대한 개념이다. 먼저 당연하게도 기본 클래스에 선언된 모든 메서드나 속성은 파생 클래스라고 불리는 하위 클래스에서 사용할 수 있다. class Teacher{ teach(){ console.log("Teaching"); }}class StudentTeacher extends Teacher{ learn(){ console.log("Learning"); }}const teacher = new StudentTeacher();tea..

3️⃣ 인터페이스 확장TypeScript는 인터페이스가 다른 인터페이스의 모든 멤버를 복사해서 선언할 수 있는 확장된 인터페이스를 허용한다.interface Book { page : number;}interface Novel extends Book { title : string}let myBook : Novel = { page : 100, title : "hello world"}console.log(myBook.page, myBook.title);3️⃣ - 1. 재정의된 속성파생 인터페이스는 다른 타입으로 속성을 다시 선언해 기본 인터페이스의 속성을 재정의하거나 대체할 수 있다.interface TsPractice{ name : string | null;}interface Ts..

🔍서론인터페이스는 연관된 이름으로 객체 형태를 설명하는 방법이다.인터페이스는 별칭으로 된 객체 타입과 여러면에서 유사하다. 하지만 일반적으로 ① 읽기 쉬운 오류 메시지② 빠른 컴파일러 성능③ 클래스와의 더 나은 상호 운용성3가지의 장점을 가진다.1️⃣타입 별칭 vs 인터페이스타입별칭type Poet = { born: number; name: string;}; 인터페이스interface Poet { born : number; name : string;}TypeScript의 할당 가능성 검사와 오류 메시지는 객체 타입 별칭에서의 경우와 거의 동일하다.하지만 인터페이스와 타입 별칭 사이에는 4가지 주요 차이점이 있다. ✨  4가지 차이점1️⃣ 인터페이스는 속성 증가를 위해 병합(merg..

4️⃣ 튜플튜플은 고정된 크기의 배열이다. 튜플 배열은 각 인덱스에 특정 타입을 가져야 하며 선언을 할때에는 요소의 타입을 적어 선언한다.let yearAndWarrior: [number, string];yearAndWarrior = [530, "Tomyris"]; /*OK*/yearAndWarrior = ["530","Tomyris"]; /*Error: Type string is not assignable to type number*/yearAndWarrior = [530];/* Error: Type [number] is not assignable to type [number, string]Source has 1 element(s) but target requires 2 */JavaScript에서 조..

🔍서론JavaScript에서의 배열JavaScript에서의 배열은 아래의 상황처럼 배열 안에 다양한 타입들을 허용한다.const array = ["1",1,null,true];array.push("hi",["hello"]);// ["1",1,null,true,"hi",["hello"]] 하지만 초기 선언 배열의 타입값들과 다른 값을 추가하게 되면 배열을 읽을 때 혼란을 줄 수 있으며 애플리케이션의 문제가 될만한 상황이 발생할 가능성이 높다. 🚫우리의 엄격한 TypeScript는 이 상황을 허용하지 않는다. const array = ["1",1,null,true];array.push("hi",["hello"]);// error : Argument of type string[]->["hello"] is ..

🚩리터럴 타입const philosopher = "Hypatia";위의 코드를 보면 philosopher 이라는 변수에 "Hypatia"라는 string을 담았다. 즉, philosopher은 string타입이면서도 구체적으로는 "Hypatia"라는 구체적인 특별한 값을 가진다.이것을 우리는 리터럴 타입이라고 부른다. 리터럴 타입이라고 부를 수 있는 것은 원시타입 값 중 어떤 것이 아닌 특정 원시값으로 알려진 타입이다. 리터럴 타입으로 선언할 수 있는 방법은 변수를 const로 선언하고 직접 리터럴 값을 할당하면 Typescript는 해당변수를 할당된 리터럴 값으로 유추한다.let으로 선언할 경우는 일반적인 원시타입을 가진다. 아래와 같은 경우에선 string이다.let lifespan : number..

유니언이란?유니언(union) : 값에 허용된 타입을 두개 이상의 가능한 타입으로 확장하는 것 변수의 자료형 타입을 "이거" 또는 "저거" 라고 정의해주는 역할을 한다.let mathmatician = Math.random() > 0.5 ? undefined : "Mark Goldberg"; mathmatician은 undefined거나 string일 수 있다. 어떠한 타입인지 정확히 모르지만 두 옵션중 하나라는 것을 알고 있는 경우에 코드를 처리하는 개념이다.🚩유니언 타입 선언let thinker : string | null = null;변수에 대해 초기값이 존재해도 명시적 타입 에너테이션을 제공하는 것이 유용할 때 유니언 타입을 사용한다.예를 들면 어떤 변수가 null로 유지되다 입력이 들어왔을 때..

그래서 타입이 뭔데?'타입'은 자바스크립트에서 다루는 값의 형태이다. → 그럼 형태의 정의는 뭐지? - 형태는 값에 존재하는 속성과 메서드 그리고 내장되어있는 typeof 연산자가 설명하는 것을 의미 - 예를 들어 아래의 간단한 선언문을 보면let language = "typescript";typescript는 langauage 변수가 문자열 타입임을 유추한다! 7가지 원시타입 (Primitive Type)null → nullundefined → undefinedboolean → true or falsestring → "Hello"number → 12345bigint → 12345nsymbol → Symbol("Indigochi1d"오류 종류구문 오류 : Typescript가 Javascript로 변환되..

Typescript의 타입시스템에 관하여...Typescript의 타입시스템은 왜 필요했을까?Javascript를 사용하면 데이터 타입을 정해놓지 않고도 코드를 구성할 수 있다.따라서 이러한 자유 덕분에 Javascript는 어ㄹ... 쉽다. 하지만 이 자유는 매우 위험하며 다뤄야 하는 파일이 늘어날수록, 받고 보내는 데이터가 많을수록 훼손당하기 쉬우며 실제로 배포단계에서 원활하게 작동되지 않은 채 배포될 수도 있다. 아래의 코드 예시를 보면..!function paintPainting(painter, painting){ return painter .prepare() .paint(painting,painter.ownMaterials) .finish();}문자열로 생각하고 만들었던 pain..