끄적끄적 메모장

생성자는 클래스 초기화를 위하여 특별한 코드 블록을 가질 수 있습니다. 즉, 생성자는 클래스가 new 표현식에 의해 인스턴스화되어 객체를 생성할 때 객체의 레퍼런스를 생성하기 전에 객체의 초기화를 위해 사용되는 코드의 블록입니다. 따라서 생성자는 자바 클래스의 멤버가 아니며, 멤버가 아니므로 상속되지 않는다. 따라서, 오버라이딩의 대상이 될 수 없으며, 일반적인 메소드 호출방법으로 호출할 수 없습니다. 또한, 클래스의 상속솬계에서 초기화를 수행할 수 있도록 부모 클래스의 생성자를 호출하는 특징이 있다.

타임스크립트에서는 Interface가 있다. 아래의 예시 언어를 봐보자 type Player = { name: string; team: Team; health: Health; }; interface Player { name: string; team: Team; health: Health; } 위 코드처럼 type Player 와 interface Player 는 둘 다 타입스크립트에게 오브젝트의 모양에 대해서 설명하고 있습니다. 단, interface는 오브젝트의 모양을 설명할 때만 사용할 수 있습니다. 또한 Interface와 type은 상속할때 쓰는 방식이 다릅니다. 먼저 type은 상속할때 아래와 같은 문법을 활용하며 type User = { name: string; }; type Player = ..

TypeScript에서 접근 제한자가 있습니다. 접근제한자란? 말 그대로 접근을 제한하기 위해 사용됩니다. 클래스 및 인터페이스 등에 대한 접근을 통제하는 역할을 합니다. 접근 제한자는 Public, Private, Protected와 같이 세 가지 종류가 있습니다. 접근제한자 public protected private 클래스 내부 O O O 자식 클래스 내부 O O X 클래그 인스턴스 O X X 먼저 Private를 활용한 예시를 보자 class MyClass { private privateVariable: number = 10; private privateMethod(): void { console.log('This is a private method.'); } } 위 코드와 같이 private키워..

JavaScript는 Java에 비해서 객체지향을 지원을 하지 않으며 추상클래스와 추상메소드를 문법적으로 지원하지 않지만, JavaScript의 기본 문법을 활용하여 유사한 추상클래스와 추상메소드 동작을 구현하는 방법을 알아보자. 먼저 개념에 대해서 공부해보자. 추상메소드란? 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 말합니다. 그러므로 추상 메소드는 구현부가 없고, 선언부만이 존재합니다. 자바에서 추상 메소드를 추상 클래스란? 추상 메소드를 하나 이상 포함한 클래스이며, 정의되지 않은 추상 메소드를 포함하고 있으므로, 인스턴스를 생성할 수 없습니다. 그러므로 추상 클래스는 상속만 가능합니다. class AbstractClass { abstractMetho..

다음으로 좀더 간단하게 표현할 수 있는 TypePlaceholder에 대해서 알아보자. 코드로 가기전 Concrete 타입과 Generic 타입에 대해서 알아보도록 하자, Concrete 타입이란? 1) number, boolean, string, void, unknown 같은 많이 사용하였던 타입들을 말합니다. Generic 타입이란? 1) Generic 이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 2) 정적 type언어는 클래스나 함수를 정의할 때 type을 선언해야 합니다. 3) Generic은 코드를 작성할 때가 아니라 코드를 수행될 때 (런타임) 타입을 명시합니다. 4) 코드를 작성할 때 식별자를 써서 아직 정해지지 않은 타입을 표시합니다. (일반적으로 T, U, V ...를..

함수에 대해서 알아보도록 하자. function add(a: number, b: number):number { return a + b; } 위 코드와 같이 add의 함수가 있습니다. 이 함수를 좀 더 간단하게 줄일 수 있습니다. ※ return 값의 타입인 number 은 생략이 가능합니다. const add = (a: number, b: number) => a + b; 위 코드와 같이 함수(=>)를 활용하여 좀 더 간단하게 함수를 줄일 수 있습니다. 만약 number 같이 중복되는 함수들이 많아진다면 number를 굳이 쓰지 않고 생략하는 방법은 없을까요? type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 위 코..

기본 문법 알아보기 에 이어서 계속 문법에 대해서 알아보자. const numbers: readonly number[] = [1, 2, 3, 4]; numbers.push(1); // readonly 때문에 오류가 뜬다. 위 코드와 같이 readonly 를 사용하게되면 number[ ]의 값을 읽을수만 있으면 수정을 하게 될경우 오류가 뜨게 됩니다. let a: unknown; let b = a + 1 // Error가 납니다. if (typeof a === "number") { let b = a + 1; } 위 코드에서 a에 unknown을 주었습니다. 첫줄이 의미하는 건 a가 어떤 작업을 하려면 a 변수의 타입을 먼저 확인해야 하는 뜻입니다. 예를 들어 2번째 코드인 let b = a+1에서 Erro..

기존 HTML 코드를 TypeScript를 활용하여 구현해보자. 먼저 터미널창에서 tsc -w 를 입력하여 ts파일을 js파일로 자동 변환하게 만들주자. 두번째로 tsconfig.json 파일에서 { "compilerOptions": { "target": "es5", "module": "commonjs", "strictNullChecks": true } } 위 코드처럼 세팅을 해줍니다. 여기에서 "strictNullChecks": true 는 가끔 null 타입이 들어오는데 그걸 엄격하게 체크해 달라는 의미입니다. index.js 안녕하세요 링크 버튼 index.js(변환된 ts파일)으로 연결을 해둡니다. index.ts let 제목 = document.querySelector("#title"); if ..