IT (58) 썸네일형 리스트형 Effective Typescript - 27 - 함수형 기법과 라이브러리로 타입 흐름 유지하기 타입스크립트에서는 루프 (while, for 등)를 대체하는 라이브러리 map, filter, reduce, flatMap를 사용하면, 일반 반복문을 사용할 때 대비 더욱 유리하다고 한다. 그 이유는 타입 정보가 그대로 유지되면서 타입 흐름(flow)가 계속 전이되도록 하기 때문이다. 반면, 일반 루프를 사용하면 타입 체크에 대한 관리를 수동적으로 이어 나가야 하기 때문에 불편하다. Effective Typescript - 26 - 타입 추론에 문맥(Context)이 어떻게 사용되는지 이해하기. 타입스크립트는 타입을 추론할 때 단순히 값만 고려하지 않는다고 한다. 값이 존재하는 곳의 Context까지 고려한다고 함. Context까지 고려하는 타입스크립트의 타입 추론 때문에 가끔 직관적으로 이해하기 어려운 추론 결과가 나타나곤 한다. 이와 같이 Context를 고려한 타입추론 동작이 어떻게 돌아가는지 이해한다면 도움이 될 것이다. type Pet = 'cat' | 'dog' | 'rat'; function printPet(pet: Pet){ console.log(pet); } printPet('cat') // 정상 //타입 추론은 변수의 할당 시점에 결정된다. let cat = 'cat'; // 타입이 string printPet(cat); // 비정상) string은 Pet 타입에 할당 불가... Effective Typescript - 25 - 비동기 코드에는 콜백 대신 async 함수 사용하기 이번 아이템은 타입스크립트에서의 코드 작성 철학과는 다소 거리가 먼 얘기를 하고 있다. 이 장에서는 자바스크립트의 callback 지옥을 어떻게 하면 극복 할 수 있는지에 대한 설명을 한다. 아래는 콜백 지옥 코드에 대한 예제이다. fetchURL(url1, (res1) =>{ fetchURL(url2, (res2) =>{ fetchURL(url3, (res3) =>{ console.log(1); }); console.log(2); }); console.log(3); }); console.log(4); //로그 //4 //3 //2 //1 이런 콜백지옥을 극복하기 위한 수단으로 ES2015에 프로미스(promise) 라는 개념이 추가되었다. const page1Promise = fetch(url1); p.. 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) 상황으로 제한적이라고 한다. 위 예제를 뜯어 고치려고(한 변수를 다른 목적으로 굳이 사용하려고.. 이전 1 ··· 3 4 5 6 7 8 다음