본문 바로가기

Language

(11)

[TypeScript] 중첩된 객체의 값을 타입으로 만들고 싶을 때 중첩된 객체에서 값만 뽑아서 타입으로 만들 수 있을까?🤔 const ENDPOINTS = { AUTH: { SIGN_UP: 'POST /auth/sign-up', SIGN_IN: 'POST /auth/sign-in' }} 만약 이런 형태의 객체가 있다고 해봅시다. 이 객체의 값을 사용하려면 ENDPOINTS.AUTH.SIGN_UP 으로 접근할 수 있습니다. 제가 하고 싶은 것은 이렇게 중첩된 객체에서 value만 모아서 하나의 타입으로 사용하는 것입니다. 수동으로 type Endpoint = 'POST /auth/sign-up' | 'POST /auth/sign-in' | ... 로 선언할 수도 있겠지만, 이 객체의 몸집이 훨씬 더 크다고 할 때는 꽤나 귀찮고 더러운 코드가 될 ..

[JavaScript] parseInt( ) vs Number( ) Javascript에서 parseInt( )와 Number( )의 차이를 정리해보았습니다. parseInt( ) 문자열을 파싱해서 특정 진수의 정수를 반환합니다. 첫 번째 매개변수는 string, 두 번째 매개변수는 radix 입니다.문자열에서 첫 번째 숫자 부분을 정수로 변환하고, 소수점과 숫자 이후의 문자열은 무시합니다.radix가 2~36 범위의 값이 아니거나, 공백이 아닌 첫 문자를 정수로 변환할 수 없는 경우 NaN을 반환합니다.parseInt("123"); // 123 (문자열을 정수로 변환)parseInt("123.45"); // 123 (소수점 이하 숫자는 무시)parseInt("123abc"); // 123 (숫자 이후의 문자는 무시)parseInt(" ..

[TypeScript] Class vs Interface vs Type 차이점 정리 JavaScript Class vs TypeScript Class 1. 속성 초기화 코드를 생략할 수 있다.TS Class는 생성자의 매개변수 타입 선언과 동시에 접근 제어자(+readonly)만 사용하면 속성 초기화를 할 수 있다.이때는 속성이 public이어도 명시해야 한다.// JSclass User { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }}// TS// 컴파일하면 위 JS 코드와 동일하다class User { constructor(private firstName: string, private lastName: string) {}} 2. 접근 제한자(acces..

[TypeScript] Declaration File & JSDoc Declaration FileTypeScript 선언 파일은 주로 JavaScript로 작성된 라이브러리나 모듈을 TypeScript에서 사용할 때 필요합니다.선언 파일은 .d.ts 확장자를 가지며 동일한 이름의 라이브러리나 모듈의 타입을 정의합니다. Visual Studio Code와 같은 통합개발환경(IDE)에서는 선언 파일을 불러와서 보여주기 때문에 바로 타입을 확인할 수 있습니다.TypeScript는 JavaScript 코드도 같이 쓸 수 있도록 허용하지만, 타입 정의가 없다면 사실 TypeScript를 쓰는 의미가 없습니다. 따라서 TypeScript에서 선언 파일은 꼭 필요합니다.tsconfig.json에 "strict": true 를 설정하면 선언 파일이 없는 JavaScript 패키지에 대..

[TypeScript] TypeScript 타입 정리 Object변수명: { key1: 타입, key2: 타입, ... }변수 선언문을 확장해 위와 같은 형태로 타입을 명시할 수 있습니다.타입 주석(type annotation)이라고 합니다.예시const player: { name: string; age: number } = { name: "kim",}; Optional변수/프로퍼티명?: 타입물음표를 붙여서 특정 프로퍼티나 함수의 매개변수를 옵셔널로 만들 수 있습니다.예시// 인터페이스 프로퍼티에 적용interface PaintOptions { shape: Shape; xPos?: number; yPos?: number;}// 객체 프로퍼티에 적용const player: { name: string, age?: number } = { name: 'k..

[TypeScript] TypeScript 수동으로 설정하기 개요프레임워크를 쓰면 타입스크립트가 설정된 프로젝트를 자동으로 만들어주지만, 간혹 타입스크립트 설정을 건드려야 할 때가 있습니다.그때를 위해 타입스크립트를 수동으로 설정하는 방법을 기록해두기로 했습니다.NodeJS가 설치되어 있다고 가정합니다. 수동 설정 방법1. package.json 생성npm init -y 2. 타입스크립트 설치npm install -D typescript 3. tsconfig.json 생성tsc -init 4. tsconfig.json 작성{ "include": ["src"], // 컴파일 할 파일의 경로 "compilerOptions": { "outDir": "build", // 컴파일 한 파일을 저장할 위치 "target": "ES6", // 자바스크립트 어떤 버..

[TypeScript] TypeScript 장점과 특징 TypeScript란?Microsoft에서 개발한 오픈 소스 프로그래밍 언어입니다.JavaScript의 확장으로, JavaScript의 모든 기능을 포함하면서도 정적 타입을 지원하고 있습니다. 왜 TypeScript를 쓰는가?1. 타입 안정성타입 안정성(Type Safety)은 변수나 함수 등이 정의된 타입과 일치하는지 여부를 보장하는 것을 의미합니다.타임 안정성을 통해 얻는 것컴파일 타임 타입 체크 : 컴파일 과정에서 타입 에러를 발견하고 경고나 오류를 통해 개발자에게 알려줍니다.강력한 타입 시스템 : 타입이 명확하게 지정되어야 하고, 타입에 대한 엄격한 규칙을 가집니다.타입 추론 : 타입을 명시적으로 지정하지 않아도 컴파일러가 타입을 추론해줍니다.타입 안정성 덕분에 버그와 런타임 에러를 줄일 수 있고..

[JavaScript] JavaScript의 일급객체란? 자바스크립트의 일급 객체가 무엇인지 알아보기 전에 함수의 선언식과 표현식에 대해 짚고 넘어가보겠습니다.함수 선언식 & 함수 표현식자바스크립트 함수에는 선언식(Function Declarations)과 표현식(Function Expressions)이 있습니다.함수 선언식function f1() { // ...}함수 표현식표현식에는 아래와 같이 두가지 방식이 있습니다.const a = function f1() { //...};const b = () => { // 화살표 함수(Arrow Functions)}; 표현식에서는 변수에 함수의 반환값이 아니라 함수 자체를 담는 모양새입니다.선언식과 달리 변수에 함수를 어떻게 대입할 수 있는 것일까요?이것을 이해하기 위해 자바스크립트에서 객체의 의미를 이해해야 ..

이전 1 2 다음

티스토리툴바