아래 예제에서 1번 방법을 이용하면, 아래 사항을 알 수 없다.Failed의 경우에 Error가 포함된다는 점Success에서 response가 포함된다는 점그래서 processResult 함수에서도 task.error? 나 task.error!와 같이 그 프로퍼티 있어!하고 추가로 얘기를 해줘야 한다. 그래서 2번 방법과 같이, 각 타입을 정의하고 해당 타입을 |으로 엮어서 서로소 유니온 타입을 표현하는 것이 가독성과 관리 면에서 더 좋다.// 비동기 작업의 결과를 처리하는 객체// 1️⃣번 방법type AsyncTask = { state: "SUCCESS" | "FAILED" | "LOADING"; error?: { ... }; response?: { ... };};// 2️⃣번 방법type L..
Language/TypeScript
type Person = { name: string; age: number;};function func(value: number | string | Date | null | Person) { if (typeof value === "number") { console.log(value.toFixed()); } else if (typeof value === "string") { console.log(value.toUpperCase()); } else if (value instanceof Date) { console.log(value.getTime()); } else if (value && "age" in value) { console.log(`${value.name}은 ${va..
타입 단언이 뭘까type Person = { name: string; age: number;};let person: Person = {}; // ❌ 에러 발생person.name = "";person.age = 23;위와 같은 코드가 있다고 해보자. Person 타입으로 선언했지만, 빈 객체로 초기화했기 때문에 에러가 발생한다.이럴 때 이용하는 것이 타입 단언이다. 타입 단언을 이용하면 빈 객체도 Person 타입으로 만들 수 있다.type Person = { name: string; age: number;};let person = {} as Person;person.name = "";person.age = 23; 초과 프로퍼티에서도 유용!정말 어쩔 수 없이 기존 타입에 특정 프로퍼티를 추가해야..
객체에도 슈퍼타입이 있다.아래 예제를 보면,Animal에 Dog 타입을 대입하는 것은 되지만Dog에 Animal 타입을 대입하는 것은 불가능하다.이유는 Animal 타입이 슈퍼타입이기 때문이다. 모든 객체 타입은 각각 다른 객체 타입들과 슈퍼-서브 타입 관계를 갖는다. 객체 타입도 마찬가지로 업캐스팅은 되고, 다운캐스팅은 안되기 때문에 서브타입인 Dog에 슈퍼타입인 Animal을 대입할 수 없다.type Animal = { name: string; color: string;};type Dog = { name: string; color: string; breed: string;};let animal: Animal = { name: "기린", color: "yellow",};let dog: Do..
불변성불변성이란 데이터가 최초 생성된 후 그 상태를 변경할 수 없는 성질이다. 불변성을 지키는 것은 예측이 가능하고, 안정적인 코드를 만드는데 중요하다. 그런데, 객체와 배열같은 참조 타입은 가변적이다. 예를 들어, 객체의 프로퍼티 값을 변경할 수 있다. 다음과 같이 말이다.person.name = "yerang"만약 불변성을 유지하고 싶다면, 객체의 프로퍼티를 직접 변경하지 않고 새로운 객체를 생성하는 방식을 사용해야 한다. 예를 들면 다음과 같다.const person = { name: "yerang", age: 27 };// 불변성 유지const updatedPerson = { ...person, age: 28 }; 추가적으로 스프레드 연산자, Object.assign(), Object.freeze..
타입스크립트의 타입은 집합이다. 예를 들어 number 타입의 경우 10, 1.5, -1, Infinity와 같은 숫자를 모두 포함한다. 그런데 만약 타입에 10이라고 적는다면? 10이라는 값만 가질 수 있는 타입이 된다. 이를 number literal type이라고 부른다. number literal 타입은 number타입에 포함되는 구조라서 number타입은 슈퍼타입, number literal타입은 서브타입이라고 부를 수 있다. 타입 호환성 타입 호환 시에 주의할 점은 슈퍼타입에 서브타입을 대입할 순 있지만, 서브타입에 슈퍼타입을 대입할 수 없다는 점이다. 마치 정사각형은 사각형이지만, 사각형 모두가 정사각형은 아닌 것처럼 말이다.
any 타입자바스크립트처럼 어떤 타입이든지 변수에 담을 수 있게 하려면 'any' 타입을 사용하면 된다.number값이 들어있어도, string 관련 메서드도 자유롭게 사용할 수 있게 된다.반대로, 모든 타입의 값에 any 타입의 값을 대입할 수 있다.치트키 같은 타입이다. 근데 문제가 안발생하냐? -> NO! 문제가 👿런타임에 발생👿한다. (최악의 상황)쓰지 말자. unknown 타입any와 마찬가지로 어떤 타입이든 담을 수 있다.하지만, any와는 다르게 반대로 다른 타입에 unknown 타입의 값을 대입할 수 없다.덧셈, 뺄셈, 나눗셈, 곱셈 등의 연산과 문자열 관련 메서드도 사용이 불가하다.이걸 활용하려면 조건문으로 검사한 뒤 사용해야 한다.그래서, any보단 차라리 unknown을 써야 한다..
이전 회사에서 enum을 굉장히 많이 서서 그런지 enum에 대한 갈구가 있었는데 TS에 enum타입이 있었구나! 숫자형 enum아래와 같이 작성하면 된다.enum Role { ADMIN, // 0 USER, GUEST = 10, // 이 다음부터는 11, 12, ... }const user1 = { name: "머랑", role: Role.ADMIN,}C++에서와 동일하게 시작하는 숫자를 지정할 수 있다. 문자형 enumenum Language { Korean = 'ko', English = 'en',}const user1 = { name: "머랑", language: Language.Korean,} TS를 빌드해서 JS가 되면서 enum이 제거되면 버그가 발생하는거 아니야?아니다..
아래와 같은 경우에 인덱스 시그니처를 이용할 수 있다.국가 코드를 담는 key-value 형태의 데이터가 있다고 해보자.국가 코드는 지금은 3개 뿐이지만, 앞으로 200개 가량의 국가가 추가될 거라고 하면200개를 type에 추가해줘야 하는 번거로움이 있다.type CountryCodes = { Korea: string, UnitedStates: string, UnitedKingdom: string, // 2. 여기서 매번 타입을 수정해줘야 한다.}const countryCodes: CountryCodes = { Korea: 'ko', UnitedStates: 'us', UnitedKingdom: 'uk', // 1. 만약 여기 국가 코드가 추가되어야 한다면?} 인덱스 시그니처type C..
