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

🔍서론 ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 명료하고 새로운 문법을 제시하고 있다. 하지만 클래스가 새로운 객체지향 모델을 제공하는 것은 아니다. 사실 클래스도 함수이고 기존 프로토타입 기반 패턴의 Syntactic sugar일 뿐이다. Typescript가 지원하는 클래스는 ECMAScript 6의 클래스와 상당히 유사하지만 몇 가지 Typescript만의 고유한 확장 기능이 있다. 이 확장기능들을 아래에서 설명하고 있다.1️⃣클래스 메서드TypeScript는 독립함수(standalone function)을 이해하는 것과 동일한 방식으로 메서드를 이해한다.매개변수에 타입이나 기본값을 지정하지 않으면 a..

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 ..

3️⃣ 함수 타입함수타입 구문은 화살표 함수와 유사하지만 함수 본문 대신 타입이 있다. 💥기본적인 사용법let nothingInGivesString : () => string;이 변수 타입은 매개변수가 없고 string을 반환하는 함수이다. 함수 타입은 콜백 매개변수(함수로 호출되는 매개변수)를 설명하는 데 자주 사용된다.const songs = ["Butter", "As Time Goes by", "Hey Jude"];/* getSongAt 매개변수의 타입을 index:number 로 받고 string을 반환하는 함수 */function runOnSongs(getSongAt: (index: number) => string) { for (let i = 0; i  🚩 함수 타입 괄호/* 타입은 str..

1️⃣ 함수 매개변수이런식으로 코드를 작성한다고 해보자.function sing(song){ console.log(song);}/*함수호출*/sing("LALALALA"); 함수 호출시  "LALALALA"는 string인데 sing 함수를 작성한 개발자는 song 매개변수를 제공하기 위해 의도한 값의 타입을 적어주지 않았다. 즉, song인자로 int가 올지 string이 올지 객체가 올지 그 누구도 알 수 없다. function sing(song:string){ /*명시적 타입 정보 선언*/ console.log(song);}/*함수호출*/sing("LALALALA");따라서 위와 같이 반드시 명시적 타입 정보를 선언해주어야한다. 🚩필수  매개변수JavaScript에서는 인수의 수와 상관없이..

3️⃣객체 타입 유니언유니언 : 값에 허용된 타입을 두 개 이상으로 확장하는 것 🚩유추된 객체 타입 유니언변수에 여러 객체 타입 중 하나가 될 수 있는 초기값이 주어지면 Typescript는 해당 타입을 객체 타입 유니언으로 유추한다.유니언 타입은 가능한 각 객체 타입을 구성하고 있는 요소를 모두 가질 수 있다.const poem = Math.random() > 0.5 ? { name:"The Double Image", pages:7}:{ name:"Her Kind",rhymes:true};console.log(typeof(poem.name)); /*string*/console.log(typeof(poem.pages)); /*number | undefined*/console.log(typeo..

객체 리터럴은 각자의 타입이 있는 키와 값의 집합이다.객체 타입은 객체가 필요로 하는 것을 설명한다.1️⃣객체타입객체 타입은 객체 리터럴과 다르다.객체타입은 필드 값 대신 타입을 사용해 설명한다.코드작성 시 객체 타입을 선언할 때  : 으로 선언한다는 것을 유의하자./* 객체 타입*/let object : { name : string; age: number;};/*객체 리터럴*/let object2 = { name : "hello world", phone : 23};별칭 객체 타입{name : string; age : number}과 같은 객체 타입을 계속 작성하는 일은 귀찮기 때문에 객체 타입에 타입 별칭을 할당해 사용하는 것이 일반적이다.type Person = { name..