본문 바로가기

분류 전체보기101

[TS] utility type 1. 타입의 기본 변경 타입스크립트에서 타입을 고정하지 않고, 타입을 변환하거나 일부 변환이 가능합니다. Index type 인덱스 타입은 속성이 정해져 있지 않고 동적으로 처리해야 할 경우 사용합니다. 흔히 자바스크립트 객체에서 배우는 내용으로 아래와 같이 접근을 할 수 있습니다. const lol = { cham: 'nunu', }; obj.name; // nunu obj['name']; // nunu 하지만 타입스크립트에서는 세밀하게 type을 이용하여 정의할 수 있습니다. 캐릭터 타입의 name을 이용하고 선언하여 이름을 설정하거나, 캐릭터의 스킬 값 q,r을 정의할 수도 있습니다. 즉, 타입의 선언한 내용을 필요한 것만 사용이 가능한 것입니다. type character = { name: str.. 2022. 3. 21.
[TS] type alias, interface 차이 type alias, interface는 쉽게 말해서 어떤 오브젝트에 대한 정의를 할 때 주로 선언을 하게 됩니다. type alias, interface 으로 선언을 하면 공통적으로 object에 정의를 하고 타입을 할당이 가능하고 class에서도 implements를 통해 구현이 가능하고 extends 상속을 통해서 확장도 가능합니다. 차이점으로는 interface는 오브젝트와 오브젝트간의 약속사항으로 상호작용을 도와줍니다. 그렇기 때문에 동일한 규격으로 어떤 것을 구현할 때 interface를 사용하는게 좋습니다. interface Person { makeEmail(age: number): Email; } interface Person { makePhone(age: number): Phone; } .. 2022. 3. 20.
[JS] ProtoType JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 프로토 타입은 원래의 형태 또는 전형적인 예, 기초 또는 표준으로 무언가 제품을 만드는 과정에서 시험용으로 미리 만들어보는 물건을 의미합니다. 자바스크립트에서는 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. (상속) 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 정확히 말하자면 상속되.. 2022. 3. 15.
[TS] 제네릭(Generics) 클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 것으로, 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능하게 해주는 타입입니다. 즉, 어떠한 타입이든 받으면서 받은 해당 타입을 그대로 리턴하게 하는 것 입니다. 제네릭 타입은 다양한 타입을 받을 수 있다는 유연성이란 점에서 타입의 정보가 동적으로 결정됩니다. 클래스 상속을 사용하면 별도의 자료 타입을 받고자 하는 클래스를 추가해야 하고 중복되는 코드를 양산하기에 불편합니다. 바로 이런 경우에 유용하게 사용할 수 있는 것이 제네릭 입니다. 함수 function checkNull(arg: T | null): T { if (arg == null) { throw new Error() } return arg; } fu.. 2022. 3. 14.
[TS] OOP Class 타입스크립트에서는 타입을 기본적으로 설정을 해주어야 하는데, OOP를 만족하면서 코드를 작성해 주기 위해서는 결과물에 대한 타입을 먼저 설정해 주어야 합니다. type Smartphone = { color: string; brand: apple; }; 1. Encapsulation(캡슐화) 연관있는 데이터들을 하나의 오브젝트 안에 모아 두는 것이 캡슐화라고 합니다. 그리고 외부에서 보일 필요 없는 내부 데이터를 숨기기도 합니다. 그러므로 내부에 상태를 변경하지 않고 어떤 외부의 데이터가 들어오느냐에 따라 상태가 변하도록 만듭니다. static class 안에서 함수나 변수 앞에 static을 사용하면 class 레벨로 설정이 되며, 쉽게 말해서 만들고 있는 클래스에 고정된 데이터가 되는 것입니.. 2022. 3. 14.
[TS] Type 타입스크립트에서 타입을 설정하는 방법은 다양합니다. 기본적인 부분만 정리해보려 합니다. 참고 할만한 핸드북 링크 - https://joshua1988.github.io/ts/ 1. 기본 타입 자바스크립드와 다르게 타입스크립트는 변수, 함수를 선언할 때, 타입을 꼭 설정해 주어야 합니다. 1. number const num: number = 3; 2. string const str: string = 'Hello World'; 3. boolean const bool: boolean = false; 4. void function World(): void { console.log('hello world'); return; } 함수가 어떠한 것도 리턴하지 않을 때 사용합니다. (생략 가능) 5. never fun.. 2022. 3. 7.

티스토리툴바