본문 바로가기

Frontend

 (290)
[TypeScript] 유틸리티 타입 1. Partial - 타입 T의 모든 속성을 선택적으로 만든다. - 기존 타입의 일부 속성만 제공하는 객체를 쉽게 생성할 수 있다. interface Person { name: string; age: number; } const updatePerson = (person: Person, fields: Partial): Person => { return { ...person, ...fields }; }; const person: Person = { name: "Spartan", age: 30 }; const changedPerson = updatePerson(person, { age: 31 }); Person 이라는 인터페이스는 name, age 라는 속성으로 구성된다. 위의 updatedPerson 함수..
[TypeScript] enum 과 object literal 비교 enum - enum 은 열거형 데이터 타입 - 상수의 그룹화를 위해서는 enum이 아주 좋은 타입이 됨. enum 의 장점 - 코드의 가독성을 높이고 명확한 상수값 정의 가능 - 컴파일 시에 자동으로 숫자값으로 매핑되어 따로 값을 할당할 필요가 없음 (특정 숫자 값으로 매핑되어야 한다면 그것은 직접 할당) enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER", } enum UserLevel { NOT_OPERATOR, // 0 OPERATOR // 1 } function checkPermission(userRole: UserRole, userLevel: UserLevel): void { if (userLevel === UserLevel.N..
TIL 23.07.25 객체의 length 문제점 타입스크립트 강의를 듣던 중, 아래의 평점을 구하는 함수를 작성해야 했음. interface Student { name: string; age: number; scores: { korean: number; math: number; society: number; science: number; english: number; }; } 아래와 같이 작성해도 답이 나올 수 있겠지만 만약 과목의 수가 바뀌면 ? 😧 5,6,7... 매번 하드코딩해서 과목의 수를 작성할 수도 없음. function calculateAverage(student: Student): number { const sum = student.scores.korean + student.scores.math + student.scores.so..
TIL 23.07.25 타입스크립트 실행 에러 문제점 타입스크립트를 실행할 때 node.js 의 버전과 typescript 버전이 호환되지 않아 다음과 같은 에러메세지가 출력됨. 정확히 현재 내 컴퓨터의 TypeScript 버전 5.1.6이 현재 사용 중인 Node.js 버전 12.22.12와 호환되지 않기 때문에 발생한다. Unsupported engine for typescript@5.1.6: wanted: {"node":">=14.17"} (current: {"node":"12.22.12","npm":"6.14.16"}) npm WARN notsup Not compatible with your version of node/npm: typescript@5.1.6 시도해본것 다음과 같이 typescript 를 전역으로 설치했는데도 해결되지 않음 n..
[TypeScript] Any, unknown, union any 타입 TypeScript에서 any 타입은 모든 타입의 슈퍼 타입 이는 어떤 타입의 값이든 저장할 수 있다는 의미 JavaScript의 object 타입과 같은 최상위 타입 let anything: any; anything = 5; // 최초에는 숫자를 넣었지만 anything = 'Hello'; // 문자열도 들어가고요 anything = { id: 1, name: 'John' }; // JSON도 들어가네요 프로그램의 안정성을 위해서 타입스크립트에서 가급적 any를 쓰지 않는 것이 좋음 unknown 타입 unknown 타입은 any 타입과 비슷한 역할을 하지만 더 안전한 방식으로 동작 unknown 타입의 변수에도 모든 타입의 값을 저장할 수 있다. 하지만, 그 값을 다른 타입의 변수에 할당..
[TypeScript] const, readonly let let 키워드를 사용하면 변수가 되고, let 으로 선언된 값은 변경할 수 있다. let num: number = 5; console.log(num); // 출력: 5 num = 10; console.log(num); // 출력: 10 const const로 값을 선언하면 변수가 아닌 상수가 된다. 상수는 값을 변경할 수 없고 재할당 할 수 없다. 그러나 배열로서 추가 삭제는 가능 const num: number = 5; console.log(num); // 출력: 5 num = 10; // 에러: 'num'은 const로 선언되었으므로 다시 할당될 수 없어요! const nums: number[] = []; console.log(nums); // 출력: [] nums.push(1); // 할당은..
[TypeScript] 기본 타입 익히기 타입을 제대로 알아야 하는 이유 1. 변수 변수 : 프로그래밍 언어에서 변수는 데이터를 저장하는 공간 2. 변수와 타입 변수에 저장되는 데이터는 여러가지 타입이 있을 수 있는데, 타입을 이해하고 올바르게 사용하면 코드의 가독성과 안정성이 향상된다. TypeScript 의 장점 TypeScript는 정적 타입 시스템을 도입함으로써 이러한 이점들을 제공하고 있다. 개발자들이 더 안정적이고 효율적인 코드를 작성할 수 있게 도와준다. 이를 통해 프로젝트의 전반적인 품질이 향상되고, 더 나은 소프트웨어 개발 경험을 제공할 수 있다 [기본 타입 종류] 1. boolean(불리언) 2. number(숫자) 3. string(문자) 4. array(배열) 5. tuple(튜플) 튜플은 서로 다른 타입의 원소를 순서에 ..
[TypeScript] JavaScript 라이브러리를 TypeScript 에서 사용하기 1. cd desktop -> mkdir [디렉토리명] -> cd [디렉토리명] 이후 다음과 같이 입력 npm init -y 2. tsconfig.json을 생성하여 TypeScript 프로젝트로 변환 tsc --init 3. tsconfig.json 을 열어서 아래의 옵션 주석해제하여 true 로 만듬. "allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부 "checkJs": true // JavaScript 파일 타입 체크 여부 4. TypeScript에서 사용하고 싶은 커스텀 JavaScript 라이브러리(test.js)를 만듬 아래의 주석문은 JSDoc 라고 하며, API 의 시그니처 (인자, 리턴타입) 을 설명하는 HTML 문서 생성기이다. 이를 통..

티스토리툴바