본문 바로가기

전체 글

 (157)
Effective Typescript - 24 - 일관성 있는 별칭(Allias) 사용하기 아래의 예제는 객체의 특정 속성을 별칭으로 만들어 값을 변경하는 코드이다. const borough = { name: 'Brooklyn', location: [40.688, -73.979] }; const loc = borough.location; // loc라는 별칭을 만들었다. //별칭의 값을 변경하면 원래 속성값에서도 변경이 된다. loc[0] = 0; console.log(borough); // { // "name": "Brooklyn", // "location": [ // 0, // -73.979 // ] // } 위 예제에서 타입 별칭을 만들어서 값을 수정하면 원본 객체도 같이 수정되는 사실을 확인할 수 있다. 이와 같은 코드 흐름이 너무 난발하게 된다면 코드의 제어 흐름을 파악하는데 어려워질..
Effective Typescript - 23 - 한꺼번에 객체 생성하기 타입스크립트에서 객체를 표현할 때 한꺼번에 객체의 속성을 명세하는 것이 유리하다. 그 이유는 아래 예제를 참고하면 이해할 수 있다. const point = {}; //point 의 타입은 {} 이다. point.x = 5; // 에러 ) x는 속성에 존재하지 않음 point.y = 10; // 에러 ) y는 속성에 존재하지 않음 const pointFix = { x: 5, y: 10 } pointFix.x = 10; // 정상 pointFix.y = 15; // 정상 const person = { age : 0, name : 'jeff' }; const birth = { birth: new Date() } const person_with_brithday = {}; // person_with_brithd..
Effective Typescript - 22 - 타입 좁히기(Narrowing) 타입스크립트에서 타입 좁히기란? 넓은 범위의 타입을 좁은 범위로 좁히는 과정을 말한다. 아래 예제는 null check하는 일반적인 예제인데, 이 것 또한 타입스크립트의 타입 좁히기의 일환이다. const el = document.getElementById('test'); // 타입이 HTMLElement | null if (el) { // null check 하는 행위도 타입좁히기의 일환이다. el.innerHTML = 'test element!'; // 여기서 el의 타입은 HTMLElement 이다. //const el: HTMLElement }else{ //const el: null // 여기서 el의 타입은 null이다. alert('cannot found test element'); } 분기문..
Effective Typescript - 21 - 타입 넓히기(Widening) 타입 스크립트의 '타입'이라는 개념은 타입을 체크하는 정적 분석 시점에서, 할당 가능한 '범위'로 이해할 수 있다. '타입'이란, 할당 가능한 값들의 '집합'의 개념인 것이다. 상수를 사용해서 변수를 초기화할 때, 타입을 명시하지 않으면 타입 체커는 타입을 결정한다. 다시 말해, 지정된 단일 값을 가지고 할당 가능한 값들의 집합(타입)을 유추한다는 뜻이다. 여기서 '유추'하는 과정을 넓히기(Widening)이라고 부른다. 넓히기 과정을 이해한다면 오류의 원인을 파악하고 타입 구문을 좀 더 효과적으로 사용할 수 있다고 한다. 아래의 예제를 보면서 타입 채커가 타입 넓히기를 어떻게 하고, 타입을 유추하는지 알아보도록 하자. interface Vector2 { x : number; y: number; } co..
Effective Typescript - 20 - 다른 타입에는 다른 변수 사용하기 자바스크립트를 사용할 때, 하나의 변수를 다른 목적으로 재사용 한 경험이 있는데 이 경험을 그대로 타입스크립트에 적용을 해보면 아래와 같은 문제가 발생한다. let temp = "aaa-bbb-ccc"; // 타입 추론에 의해 temp의 type은 string; console.log(temp); temp = 1; // 에러 발생 : temp 의 type은 string이기 때문에 number를 대입할 수 없음. 위 사실에서 우리는 변수의 값은 바뀔수는 있으나 최초 정해진 타입은 보통 바뀌지 않는 다는 사실을 알 수 있다. 타입을 바꿀수 있는 상황은 기존 타입의 범위를 확장 하는게 아니라 좁히는(Narrowing) 상황으로 제한적이라고 한다. 위 예제를 뜯어 고치려고(한 변수를 다른 목적으로 굳이 사용하려고..
Effective Typescript - 19 - 추론 가능한 타입을 사용해 장황한 코드 방지하기 변수를 선언할 때마다 타입을 명시적으로 기입하는 것은 사실상 반드시 필요한 것은 아니다. 왜냐하면 타입스크립트 타입 체커는 타입 추론을 해주기 때문이다. 저자는 타입 스크립트 고수와 하수의 차이를 아래와 같이 구분하고 있다. 고수 : 반드시 필요한 부분에만 타입을 명세해 주는 노하우를 가지고 있다. 타입 명세를 난발하지 않아 코드가 장황하지 않다. 하수 : 굳이 필요없는 타입 명세를 명시적으로 계속해서 코드가 장황해진다. let x: number = 12; let y = 12; // 이정도만 해도 충분하다. 때로는 타입스크립트 타입체커는 우리의 생각보다 좀 더 구체적으로 타입 추론을 한다. 아래의 예제를 보면 얼마나 구체적으로 타입 추론을 하는지 이해할 수 있다. const axis1: string = ..
Effective Typescript - 18 - 매핑된 타입을 사용하여 값을 동기화하기 특정 인터페이스 또는 타입의 property들과 동기화된 새로운 타입을 재생산 하려면 '매핑된 타입' 기능을 사용하면된다. 아래 예제는 사용자 계정 정보를 표현하는 인터페이스를 정의하였고, 사용자 정보 중 일부 property만 업데이트 하기 위한 flag object를 생성하고 있다. // 사용자 계정 정보를 표현하는 인터페이스 타입 interface UserAccount { email: string; nick_name : string; password: string; age : number; readonly sign_in_date : Date; info: string; } //UserAccount 같은 타입의 특정 property를 업데이트 하기 위한, 업데이트 flag 자료구조를 구성하기 위한 방법..
Effective Typescript - 17 - 변경 과련된 오류를 방지하기 위한 readonly 속성 활용하기 아래 함수는 배열을 인자로 받아서 배열 내 모든 숫자를 합한 숫자를 반환하는 함수이다. function sum_array(array: number[]): number { let sum = 0; while(true){ const el:number | undefined = array.pop(); if(el === undefined) break; sum += el; } return sum; } const array = [1, 2, 3, 4, 5]; console.log(sum_array(array)); // 15 console.log(array); // [] -> 배열이 빈 상태로 된다. 숫자를 모두 더했지만 sum_array 함수에서 인자로 넘긴 배열을 빈 배열로 만들어 버렸다. 인자로 넘긴 배열이 변경되는..

티스토리툴바