짧은코딩

타입스크립트는 단순히 값만 가지고 타입 추론을 하지 않고 문맥까지 본다. 하지만 문맥까지 고려하면 추론이 이상해질 수도 있다. 이상한 에러 -에러 코드 type Language = 'JavaScript' | 'TypeScript' | 'Python' function setLanguage(language: Language) { /* ... */ } setLanguage('JavaScript') // OK let language = 'JavaScript' setLanguage(language) // ~~~~~~~~ Argument of type 'string' is not assignable // to parameter of type 'Language' 여기서 language의 타입 추론은 string으로 ..

비동기와 async 과거에는 비동기를 하기 위해 콜백 지옥을 겪었다. 이후에 "Promise"와 "async와 await"이 등장해 콜백 지옥을 해결했다. await는 각 Promise가 처리(resolve)될 때까지 기다려준다. try/catch를 이용해 예외 처리도 가능하다. 타입스크립트 컴파일러는 async와 await이 동작하도록 정교한 변환을 수행한다. 즉, TS는 런타임에 상관없이 async/await을 사용할 수 있다. 콜백보다 프로미스를 사용해야 하는 이유 1. 콜백보다 프로미스가 코드를 작성하기 쉽다. 2. 프로미스가 타입 추론에 유리하다. -Promise 예시 async function fetchPages() { const [response1, response2, response3] =..

타입스크립트의 타입은 일반적으로 변하지 않는다. 타입스크립트에서 객체를 생성할 때는 여러 속성을 한 번에 생성하는 것이 타입 추론에 유리하다. 잘못된 타입 할당 const pt: Point = {} // ~~ Type '{}' is missing the following properties from type 'Point': x, y pt.x = 3 pt.y = 4 이 코드는 pt가 맨 처음 값을 기준으로 타입이 추론되어 에러가 난다. 좋은 타입 할당 -객체를 한번에 정의 const pt = { x: 3, y: 4, } // OK 이렇게 한번에 정의하면 타입 문제를 해결할 수 있다. -타입 단언문(as) 사용 interface Point { x: number y: number } const pt = {} ..

타입 넓히기 런타임 시 모든 변수는 유일한 값을 가진다. 하지만 타입스크립에서는 코드를 정적 분석하는 시점에서 변수는 가능한 값들의 집합인 타입을 가진다. 즉 타입을 명시하지 않으면 타입 체커는 할당 가능한 값들의 집합을 유추한다. 이러한 과정을 타입 넓히기(widening)이라고 부른다. 타입 넓히기의 문제점 -실행은 되지만 에디터에 오류가 나는 코드 interface Vector3 { x: number y: number z: number } function getComponent(vector: Vector3, axis: 'x' | 'y' | 'z') { return vector[axis] } let x = 'x' let vec = { x: 10, y: 20, z: 30 } getComponent(ve..

타입 반복 개발자라면 코드의 반복을 줄이려고 노력한 적이 분명 있을 것이다. 이런 것을 DRY(don't repeat yourself)라고 한다. 이것을 타입에도 적용하여 타입 반복 또한 줄여야 한다. 이 글은 두고두고 많이 봐야 한다고 생각한다. 왜냐하면 평소에 코드 중복을 굉장히 많이 하여 개발했기 때문이다. 그렇기에 개발을 할 때마다 이 글은 자주 챙겨보면서 타입 중복을 피하여 코딩해야겠다. 타입 반복 예시 -문제 코드 interface Person { firstName: string lastName: string } interface PersonWithBirthDate { firstName: string lastName: string birth: Date } 나도 평소에 이렇게 타입이 겹치는 것이..

타입스크립트에서 명명된 타입(named type)을 정의하는 방법은 type과 interface 2가지가 있다. 대부분의 경우 type과 interface 둘 중 아무거나 사용해도 문제가 없다. 하지만 둘 중 하나로 통일해야 하는 상황이 있다. 이 글에서는 type과 interface의 공통점과 차이점에 대해서 알아보도록 하자. 그 전에 이 글에서 interface는 IState, type는 TState로 표기하는 일이 있을텐데 이 방법은 좋은 방법은 아니라서 지양하는 것이 좋다. 예시 코드에는 저 방식을 사용하여서 불가피하게 저 방식을 예시로 사용하겠다. type과 interface의 공통점 1. 인덱스 시그니처와 함수 타입 인덱스 시그니처와 함수 타입은 type과 interface에서 모두 사용된다...

객체 래퍼 타입 객체 래퍼 타입은 원시 타입의 값을 감싸는 형태의 객체이다. 예를 들어 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"는 유닛 타..