오늘도 조으네💜

TypeScript

📌 Partial Partial 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Address { email: string; address: string; } type MyEmail = Partial; const me: MyEmail = {}; // 가능 const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능 const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능 👉 Partial 구현해 보기 interface Profile { name: string; age: number; married: boolean } // case 1 type P..

2024. 3. 11.

TypeScript

타입스크립트를 사용하면서 간혹 window에 object 를 확장해야 하는 경우가 종종 발생한다. 이럴 때, 무작정 property를 추가하려고 시도하면 아래와 같은 오류가 발생한다. Window 인터페이스에는 해당 property의 정의가 없기에 TS typechecke에서 컴파일 오류를 발생시키는 것이다. 해결 방법은 크게 두가지가 있는 것 같다. 1️⃣ (window as any).(property) window object를 any 타입으로 만들고 property에 접근하는 방법인데, 이는 TS를 쓰는 이유인 타입체킹이 안되니 좋은 방법은 아닌 것 같다. 2️⃣ .d.ts 정의 global이라는 네임스페이스에 윈도우 인터페이스를 정의하여 선언해준다. declare global { interface..

2023. 9. 3.

TypeScript

👉 useState 상태 변경 함수를 넘길 때 다음처럼 타입을 설정해주면 된다! import React, { Dispatch, SetStateAction } from 'react' interface Props { setIsMade: Dispatch }

2023. 8. 21.

TypeScript

📌 typeof 객체 데이터를 객체 타입으로 변환해주는 연산자이다. 객체에 쓰인 타입 구조를 독립된 타입으로 사용하고자 한다면 객체 앞에 typeof키워드를 붙여 명시해주면 된다. const obj = { red: 'apple', yellow: 'banana', green: 'cucumber', }; // 위의 객체를 타입으로 변환하여 사용하고 싶을 때 type Fruit = typeof obj; /* type Fruit = { red: string; yellow: string; green: string; } */ 📌 keyof 객체 형태의 타입에서 속성들만 추출하여 유니온 타입으로 만들어주는 연산자이다. type Type = { name: string; age: number; married: boole..

2023. 8. 17.

TypeScript

📌 tsconfig.json 타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일이다. 타입스크립트 .ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정을 할 수 있다. 📌 tsconfig.json 설정 파일 속성 { "include": ["src/**/*"] // 변환할 폴더를 지정 "exclude": ["node_modules"] // include와 반대되는 속성으로 변환하지 않을 폴더 경로를 지정 "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import ..

2023. 6. 25.

TypeScript

📌 Interface TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것이다. 이를 "덕 타이핑(duck typing)" 혹은 "구조적 서브타이핑 (structural subtyping)"이라고도 한다. 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고, 코드 안의 계약을 정의하는 것뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. interface LabeledValue { // 인터페이스명은 대문자로 짓는다 label: string; } function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label); } let myObj = {size: 10, labe..

2023. 4. 7.

TypeScript

String Javascript와 마찬가지로 문자열 데이터를 둘러싸기 위해 큰 따옴표 “ ” 나 작은 따옴표 ‘ ’ 를 사용한다. let str: string = 'hi'; 위와 같이 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다. ES6에서 추가된 Template String도 사용할 수 있다. 템플릿 문자열을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있고, ${expr}과 같은 형태로 표현식을 포함시킬 수 있다. let fullName: string = "Mark Lee"; let sentence: string = `Hello, My name is ${fullName}.`; Number Javascript와 같이 TypeScript의 모..

2022. 11. 28.

TypeScript

Primitive Type 오브젝트와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형 boolean number string null undefined function reverse(s: String): String(return값) { return s.split("").reverse().join(""); } reverse("hello world") TypeScript의 핵심 primitive types은 모두 소문자이다. (✨ 중요!!) Number, String, Boolean, Symbol, Object 유형은 primitive를 나타내지 않으며 타입으로 사용하면 안된다. 다음과 같이 number, string, boolean, symbol, object 타입을 사용해야 한다. function rev..

2022. 11. 10.