📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 값vs타입 - 원시 타입 📍값vs타입 값 공간과 타입 공간의 이름은 서로 충돌하지 않음 - 타입과 변수를 같은 이름으로 정의할 수 있음 (타입스크립트 type 문법은 컴파일 시 제거되기 때문) type Developer = { isWorking: true }; const Developer = { isTyping: true }; // OK ES6의 class 문법은 값과 타입으로서 동시에 사용됨 - 타입스크립트에서는 클래스를 타입 어노테이션으로 사용 가능 - 자바스크립트에서는 런타임에서 객체로 변환되어 자바스크립트의 값으로 사용됨 class Developer { name: string; do..

📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 구조적 타이핑 - 구조적 서브 타이핑 📍구조적 타이핑 아래 코드에서는 비슷하면서 서로 다른 타입이 호환된다. 타입스크립트는 구조로 타입을 구분하기 때문. (다른 언어였으면 타입 이름이 다르면 호환 불가) interface Dog { age: number; } interface Man { age: number; } let sundance = { age: 10 }; let kim = { age: 30 }; sundance = kim; // ok kim = sundance; // ok 📍구조적 서브타이핑 타입스크립트에서 타입은 집합의 개념이기 때문에, 특정 값이 string or number 타..

📍Barrel 여러 모듈의 export 를 하나의 모듈(주로 index.ts)에서 import로 받아 다시 export 해주는 파일 예를 들어 아래와 같은 3개의 모듈이 각각 존재할 때 // src/lib/foo.ts export class Foo {} // src/lib/bar.ts export class Bar {} // src/lib/baz.ts export class Baz {} barrel이 없으면 3개 라인의 import가 필요함 // src/pages/page.ts import { Foo } from '../lib/foo'; import { Bar } from '../lib/bar'; import { Baz } from '../lib/baz'; barrel 파일(lib/index.ts) 을 ..

📍예시 - 아래처럼 객체로 이루어진 배열이 있다. name필드의 모든 value를 union type으로 받으려면 어떻게 해야할까? // 뽑아내고 싶은 타입 // "javascript" | "typescript" | "react" | "vue" | "svelte" | "nextjs" | "nestjs" | "nodejs" | "java" | "spring" | "go" // 데이터 const SKILL_LIST = [ { name: "JavaScript", value: "javascript", }, { name: "TypeScript", value: "typescript", }, { name: "React", value: "react", }, { name: "Vue.js", value: "vue", },..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리📍요약✅unknown은 any 대신 사용할 수 있는 안전한 타입이다- 어떤 값이 있을 때, 그 타입을 알지 못하는 경우라면 unknown을 사용하면 된다 ✅사용자가 타입 단언문이나 타입 체크를 사용하도록 강제하려면 unknown을 사용하면 된다✅{}, object, unknown의 차이점을 이해해야 한다 📍함수의 반환값과 관련된 unknown✅함수의 반환값으로 any 대신 unknown을 사용해야 한다 any를 사용하는 경우function parseYAML(yaml: string): any { // ...}interface Book { name: string; author: string;}const book = parseYAML(` name..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리📍요약✅암시적 any와 any[] 타입은 진화할 수 있다- 명시적 any : 진화 없이 계속 any- any 타입의 진화 : 중간에 값이 할당되거나, 배열에 원소가 추가되면 타입이 변경되는 것 ✅any 진화는 타입 안정성에 좋지는 않다- 중간에 실수로 타입이 오염될 수 있음- 명시적 타입 구문이 바람직하다 📍변수의 타입이 any인 경우, 다른 타입으로 확장될 수 있다일반적으로 변수의 타입이 선언 시에 결정된다. 그리고 한번 정해지면 새로운 값이 추가되지 않는다- 그러나 any의 경우, 예외가 존재한다 예시) 일정 범위의 숫자를 배열에 담아 리턴하는 함수- out 의 타입이 변경된다 (any -> number[])function range(start..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리📍요약✅any보다 더 정확한 모델링을 위해,any[]{[key: string]: any}() => any 처럼 구체적인 형태를 사용해야 한다 📍any✅자바스크립트에서 표현할 수 있는 모든 값을 아우르는 매우 큰 범위의 타입- 원시 값- 정규식- 클래스- DOM 엘리먼트 등을 포함 ✅any 타입의 값을 그대로 정규식이나 함수에 넣으면 안됨- 아래 코드에서 any 대신 any[] 를 사용하여 배열이 아닌 경우를 걸러낼 수 있다 function getLengthBad(array: any) { // Don't do this! return array.length;}function getLength(array: any[]) { // 차라리 이렇게 ret..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리더보기5장 any 다루기#38 any 타입은 가능한 좁은 범위에서만 사용하기 📍요약✅any 의 사용 범위를 최소한으로 좁혀야 한다✅함수의 반환 타입이 any이면 절대 안된다 -> 다른 코드에 악영향을 미침✅강제로 타입 에러를 제거하려면 any 대신 @ts-ignore가 낫다 📍함수의 매개변수로 any 사용할 때- 함수의 매개변수로 any를 사용해야 할 때는매개변수 as any 형태로 사용하여 다른 코드에 영향이 없도록 하는 것이 좋다 interface Foo { foo: string; }interface Bar { bar: string; }declare function expressionReturningFoo(): Foo;function proce..