본문 바로가기

IT

 (58)
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 함수에서 인자로 넘긴 배열을 빈 배열로 만들어 버렸다. 인자로 넘긴 배열이 변경되는..
Effective Typescript - 16 - number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기 자바스크립트 런타임은 모든 array, object에 대한 key 또는 index를 string으로 인식하는 특징이 있다. 추가로, 어떠한 복잡한 형태의 key도 런타임에는 string으로 변환되는 것이 특징이다. 위와 같은 상황들 때문에 자바스크립트를 사용함에 있어 혼란스러운 상황이 발생할 수 있는데, 타입스크립트는 이와 같은 문제를 줄이는데 도움을 준다. 타입스크립트는 숫자 key를 허용한다. 그리고 숫자 key는 문자 key와는 다른 것으로 인식한다. // 숫자 key를 사용하는 예시 interface Array{ //... [index: number] : T; } 런타임 시점에서는 숫자 key와 문자열 key를 서로 다르게 인식할 수는 없지만, 적어도 타입스크립트 타입 체크 시스템에서는 다르게 인..
Effective Typescript - 15 - 동적 데이터에 인덱스 시그니처 사용하기 타입스크립트의 인덱스 시그니처란? 동적인 Property 를 다루기에 유용하게 활용 될수 있다. 아래는 그 예제이다. // 인덱스 시그니처의 예 type Pet = { [property : string] : string; // { const row: {[columnName: string]: string} = {}; rowStr.split(',').forEach((cell, i) =>{ row[headerColumns[i]] = cell; }); return row; }); } 그리고, 인덱스 시그니처를 사용했을 때 타입의 범위가 너무 광범위해 지기 때문에, 때에 따라서는 Record 제네릭 타입과 조건부 타입을 활용하는 상황이 있을 수 있다. type Vec3D = Record; // type Vec3D..
Effective Typescript - 14 - 타입 연산과 제네릭 사용으로 반복 줄이기. 같은 코드를 반복하지 않는 것도 중요하지만, 타입스크립트의 타입에 관한 코드도 예외가 될 수 없다. 아래의 코드는 타입스크립트 타입의 정의에서 발생하는 반복과 그것을 해결하는 타입 연산에 관한 예시이다. 1. 타입 연산을 활용한 타입 관련 코드 중복 제거 기법 a. 인터페이스의 확장으로 중복 줄이기 //name key, age key가 반복됨. interface Person{ name: string; age: number; } interface PersonSpan { name: string; age: number; job: string; } //인터페이스의 확장으로 중복 줄이기 interface PersonBase { name: string; age : number; } interface PersonWi..
Effective Typescript - 13 - 타입과 인터페이스의 차이점 이해하기 타입스크립트에서 이름있는 타입을 정의하는 방법은 'type'키워드 이용한 타입 정의와 'inferface'키워드를 이용한 타입 정의 방식이 있다. A. type 선언(type allias) 방식과 interface 선언 방식의 유사한점 a. 리터럴로 할당시 잉여 속성에 대한 체크를 지원한다. ( 11 섹션에서 나온 내용임 ) b. 인덱스 시그니처 사용 가능. c. 함수의 타입도 정의가능. d. 제네릭 사용 가능. e. 확장. 인터페이스는 타입을 확장 가능. 타입은 인터페이스를 확장 가능. // 타입 엘리어스 선언 type THuman = { name : string; age : number; } // 인터페이스 선언 interface IHuman{ name : string; age : number; } ..
Effective Typescript - 12 - 함수 표현식에 타입 적용하기. 자바스크립트, 타입스크립트에는 함수 '표현식(expression)' 과 '문장(statement)'로 함수를 만들 수 있다. 그리고 '표현식' 방식과 '문장' 방식을 다르게 인식한다. // 자바스크립트에서는 함수문장과 함수표현식을 다르게 인식한다. function rollDice1(sides: number): number{ return 1; } //문장 const rollDice2 = function (sides: number): number { return 1; } // 표현식 const rollDice3 = (sides: number) => {} // 표현식 근데 여기서 함수 선언시 표현식 방식을 사용하는 것이 타입스크립트에서는 더 유리하고 한다. 그 이유는 무엇인가? a. 함수의 형태를 타입으로 선..

티스토리툴바