일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- CORS
- app router
- 이분 검색
- useAppDispatch
- 결정 알고리즘
- Jest
- SSR
- autosize
- 반공변성
- async/await
- 타입 좁히기
- Promise
- 태그된 유니온
- recoil
- 투포인터
- TS
- RTK Query
- 호이스팅
- dfs
- 인터섹션
- 무한 스크롤
- 리터럴 타입
- map
- React
- CI/CD
- Cypress
- webpack
- ESlint
- 공변성
- tailwind
- Today
- Total
목록TS/이펙티브 타입스크립트 (17)
짧은코딩
객체 래퍼 타입 객체 래퍼 타입은 원시 타입의 값을 감싸는 형태의 객체이다. 예를 들어 string -> String, number -> Number 이런 식으로 사용한다. 기본 원시 타입들은 불변이며 메서드를 가지지 않는 점이 객체와 구분된다. "apple".charAt(2); // "p" 하지만 이 코드를 보면 기본 원시 타입도 메서드를 가진 것처럼 보인다. 사실 charAt는 string의 메서드가 아니고 자바스크립트 내부에서 string을 String으로 바꿔서 사용하기 때문에 charAt 같은 메서드를 사용할 수 있다. 즉, 기본형(원시 타입)과 객체 타입을 서로 자유롭게 변환 가능하다. 따라서 이 과정에서 string을 String 객체로 래핑(wrap)하고 이후 마지막으로 래핑한 객체를 버린..
결론부터 말하면 단언문보다 선언문을 사용하는 것이 좋다. 선언문 interface Person { name: string } const alice: Person = { name: 'Alice' } // Type is Person 타입 선언문은 선언된 타입임을 명시하여 타입을 선언한다. 단언문 interface Person { name: string } const bob = { name: 'Bob' } as Person // Type is Person 단언문은 "as"를 사용한다. 이러면 타입스크립트가 추론한 타입이 있어도 강제로 "as" 뒤에 쓴 타입으로 간주한다. 선언문을 사용해야 하는 이유 interface Person { name: string } const alice: Person = {} // ..
Symbol interface Cylinder { radius: number height: number } const Cylinder = (radius: number, height: number) => ({ radius, height }) Symbol은 이름이 같더라도 속하는 공간에 따라 다른 것을 나타낸다. 일반적으로 type이나 interface 다음에 나오는 심벌은 타입, const이나 let 선언에 쓰이는 것은 값이다. 또는 타입선언(:)이나 단언문(as) 다음에 오는 심벌은 타입, "=" 다음에 오는 모든 것은 값이다. typeof interface Person { first: string last: string } const p: Person = { first: 'Jane', last: 'Ja..
never 타입 const x: never = 12; never는 공집합이라는 의미라서 아무런 값도 할당할 수 없다. 따라서 x에 12를 넣을 수 없다. 유닛(unit) 타입/리터럴(literal) 타입 type A = 'A'; type B = 'B'; type Twelve = 12; 유닛 타입은 never 다음으로 작은 집합이며 한 가지 값만 포함하는 타입이다. 유니온(union) 타입 type AB = 'A' | 'B'; type AB12 = 'A' | 'B' | 12; 유니온 타입은 값 집합들의 합집합이다. "|"을 사용해서 타입을 묶어줄 수 있다. -예시 const a: AB = "A"; // 정상 const c: AB = "C"; // "C"는 'AB' 형식에 할당할 수 없다. "C"는 유닛 타..
자바스크립트는 덕 타이핑(duck typing) 기반이다. 덕 타이핑은 "만약 어떤 새가 오리처럼 걷고, 헤엄치고, 짹짹거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다."라는 명제이다. 예를 들어 "안녕"이라는 문자열에 숫자 10을 더하면 "안녕10" 이렇게 나오는 것을 의미한다. 구조적 타이핑 성공 예시 interface Vector2D { x: number; y: number; } function calculateLength(v: Vector2D) { return Math.sqrt(v.x * v.x + v.y * v.y); } interface NamedVector { name: string; x: number; y: number; } const v: NamedVector = { x: 3, ..
TS 컴파일러 -TS 컴파일러의 역할 1. 최신 js/ts가 동작하게끔 구버전 js로 트랜스파일(translate+compile)한다. 2. 코드의 타입 오류를 체크해준다. 위 역할 두 가지는 독립적이다. 즉, ts가 js로 변환될 때 코드에 있는 타입에는 영향을 주지 않는다. 그리고 변환된 js 실행에서도 타입은 영향을 끼치지 않는다. 타입 오류가 있는 코드 let x = "abcd"; x = 1234; 컴파일과 타입 체크가 독립적이라서, 위 코드처럼 타임 오류가 있어도 컴파일이 가능하다. 코드에 오류가 있더라도 컴파일된 결과가 나오는 것이 도움이 된다. 웹을 만들 때, 오류가 해결되지 않아도 다른 부분을 테스트할 수 있다. 런타임과 타입 체크 ts에서 js로 컴파일되는 과정에서 interface, t..
TS와 JS TypeScript는 JavaScript의 상위 집합이다. 즉 JS로 작성된 코드는 TS가 되지만 그 반대는 성립하지 않는다. 그리고 TS에는 타입 체커가 있는데 이 타입 체커가 문제점을 찾아준다. 예시 let city = 'new york city' console.log(city.toUppercase()) 함수를 잘못 사용하고 있는 코드이다. 원래는 toUpperCase()인데 타입 체커는 이런 오타 같은 문제점을 찾아준다. interface State { name: string capital: string } const states: State[] = [ { name: 'Alabama', capitol: 'Montgomery' }, { name: 'Alaska', capitol: 'Jun..