🟨 JavaScript 🟨25 TypeScript - Utility Types 1. keyof interface User{ id:number name:string age:number gender:"M" | "F" } type UserKey = keyof User // "id" | "name" | "age" | "gender" const uk:UserKey = "id" const uk2:UserKey = "score" // 오류 발생 keyof를 이용해서 객체 타입의 모든 키를 문자열 또는 숫자 리터럴 유티온 타입으로 추출할 수 있게 해 준다. keyof 예시 1 객체의 키를 매개변수로 받는 함수를 정의할 때, 해당 객체 타입의 keyof를 이용하여 타입 안전성을 보장할 수 있다. interface Person { name: string age: number } type Person.. 2024. 2. 23. TypeScript - Generic 제네릭을 이용하면 class, function, interface를 다양한 타입으로 재사용할 수 있다. 선언할 때 파라미터만 적어두고 사용할 때 타입을 지정해 주는 방법이다. 기본적인 제네릭 사용 방법 function getSize(arr : number[]) :number { return arr.length } const arr1 = [1,2,3] getSize(arr1) // 3 const arr2 = ["1","2","3"] getSize(arr2) // 3 동일한 형태로 만들었지만 매개변수가 number이냐, string이냐 에 따라서 에러가 생기는 부분이 있을 것이다. 이걸 빠르게 해결하기 위해선 유니온을 이용한 방법 function getSize (arr: number[] | string [].. 2024. 2. 22. TypeScript - class (feat.예시코드) 접근 제한자 - public, private, protected 접근 제한자를 이용해서 class의 멤버의 접근 범위를 제한할 수 있다. 접근 제한자는 public, private, protected 3가지가 있다. 결론부터 말하자면 public : 어디서나 접근이 가능하다. public으로 지정하거나 아무것도 지정하지 않으면 기본적으로 public이다. private : 해당 클래스의 내부에서만 접근이 가능하다. 상속을 하더라도 접근할 수 없다. protected : 해당 클래스, 파생된 클래스 내부에서만 접근이 가능하다. (인스턴스에서 접근이 불가능) 1. public class Car { color : string; public wheel : number; constructor( color : st.. 2024. 2. 22. TypeScript - function this interface User{ name:string; } const Sam:User = { name:'Sam' } function showName(this:User, age:number, gender:'m'|'f') { // this를 사용하기 위해서 매개변수에 this와 this의 타입을 지정한다. console.log(this.name, age, gender) } const a = showName.bind(Sam); a(30, 'm') this를 Sam으로 바인딩하고 this를 사용하기 위해서 Sam의 타입과 같은 User로 명시해 준다. 이렇게 하면 this를 이용할 수 있다. 함수의 첫 번째 매개변수로 'this' 타입을 지정하는 것은 'this'의 컨텍스트를 명시적으로 선언하는 방법이다... 2024. 2. 22. TypeScript - interface index signature Index Signature은 객체의 속성 이름과 타입이 미리 정의되어 있지 않을 때, 객체에 동적으로 속성을 추가할 수 있는 방법을 제공한다. 기본형태 interface Obj{ [key : T] : U } // T : 인덱스의 타입 (대부분 string 이나 number) // U : 값의 타입 사용 예시 type Score = "A" | "B" | "C" interface User { name: string age: number [grade: number]: Score } let user: User = { name: "xx", age: 30, 1: "A", 2: "B", } index signature를 사용하면 타입 체크 시 유연성이 증가하지만, 해당 객체의 명확한 구.. 2024. 2. 22. JavaScript - Closure(클로저) Closure 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 클로저는 자바스크립트에서 매우 중요한 개념으로 함수가 생성될 때의 환경을 기억하게 해 주며, 이를 통해서 여러 패턴, 기법을 구현할 수 있다. 클로저의 정의와 작동원리 클로저는 함수가 선언된 시점의 스코프에 있는 모든 변수에 대한 참조를 유지한다. 함수가 실행될 때마다 해당 스코프에 접근할 수 있음을 의미한다. 클로저는 함수가 실행되어 외부 스코프에서의 실행이 종료되어도 해당 함수의 스코프 내에 선언된 변수들에 대한 접근을 가능하게 한다. 자바스크립트의 함수는 외부 스코프에 정의된 모든 변수에 접근할 수 있다. 클로저 예시 function outerFunction (arg) { var variableInOuterFunction =.. 2024. 2. 21. 이전 1 2 3 4 5 다음 728x90
