seohyun han

※ 아이템28 유효한 상태만 표현하는 타입을 지향하기 웹애플리케이션을 만들 때 페이지의 상태관리 설계 interface State { pageText: string isLoading: boolean error?: string } declare let currentPage: string function renderPage(state: State) { if (state.error) { return `Error! Unable to load ${currentPage}: ${state.error}` } else if (state.isLoading) { return `Loading ${currentPage}...` } return `${currentPage}\n${state.pageText}` } 페이지를 그리는 ..

※ 아이템23. 한꺼번에 객체 생성하기 변수값은 변경될 수 있지만 타입스크립트의 타입은 일반적으로 변경되지 않는다. 따라서 객체를 생성할 때는 속성을 하나씩 추가하기 보다는 여러 속성을 포함해서 한꺼번에 생성해야 타입 추론에 유리하다. const pt = {} pt.x = 3 // ~ Property 'x' does not exist on type '{}' pt.y = 4 // ~ Property 'y' does not exist on type '{}' pt 는 빈 객체로 생성되었기 때문에 위 방식으로 할당이 불가하다. 존재하지 않는 속성을 추가할 수 없다. 객체를 한번에 정의하면 문제를 해결할 수 있다. interface Point { x: number y: number } const pt = { x:..

타입스크립트는 x 의 타입을 string 으로 추론한다. let x = 'x' x = 'a' x = 'Four score and seven years ago...' 자바스크립트에서는 다음과 같이 작성해도 유효하다. let x = 'x' x = /x|y|z x = ['x','y','z']; 타입스크립트는 x 의 타입을 string 으로 추론할 때 명확성과 유연성 사이의 균형을 유지하려고 한다. 일반적인 규칙은 변수가 선언된 후로는 타입이 바뀌지 않아야 하므로 string | RegExp string | string[] any 보다는 string 을 사용하는게 낫다. ▶ 타입스크립트에서 넓히기 과정을 제어할 수 있도록 제공하는 방법 ▷ const 사용하기 - let 대신 const로 변수를 선언하면 더 좁은..

아이템19 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. function square(nums: number[]) { return nums.map(x => x * x) } const squares = square([1, 2, 3, 4]) // Type is number[] 타입스크립트는 예상한 것 보다 더 정확하게 추론하기도 한다 const axis1: string = 'x' // Type is string const axis2 = 'y' // Type is "y" 타입스크립트가 추론한 y 가 더 정확한 타입이다. 아래는 기록을 위한 함수 logProduct 이다. interface Product { id: number name: string pr..

※ 아이템17 변경 관련된 오류 방지를 위해 readonly 사용하기 매개변수로 받은 배열의 합을 구하는 함수 arraySum function arraySum(arr: number[]){ let sum = 0, num; while((num = arr.pop()) !== undefined){ sum += num; } return sum; } 삼각수를 출력하는 함수 printTriangles 0 1 3 6 10 이 출력되어야하는데, 오류가 발생하고있다 arraySum 이 nums 를 변경하지 않는다고 간주해서 문제가 발생했다. 실제로 arraySum 은 pop() 을 사용해 매개변수 arr 을 변경한다. 계산이 끝나면 배열 arr 은 비게 되고, 다음과 반복문을 돌면서 각 변수들은 다음과 같은 값들을 갖게된..

※ 아이템15 동적 데이터에 인덱스 시그니처 사용하기 타입스크립트에서는 타입에 인덱스 시그니처 를 명시해 매핑을 유연하게 표현한다. type Rocket = {[property: string]: string}; const rocket: Rocket = { name: 'Falcon 9', variant: 'v1.0', thrust: '4,940 kN', }; 위 코드에서 인덱스 시그니처 [property: string]: string 는 다음 의미를 갖고 있다. 키의 이름 : 키의 위치만 표시하는 용도 키의 타입 : string | number | symbol 값의 타입 : 어떤것이든 될 수 있음 ▷ 위와 같이 타입 체크가 수행되었을 때의 단점 잘못된 키를 포함해 모든 키를 허용한다 const rocket..

다음은 원기둥의 반지름과 높이, 표면적, 부피를 출력하는 코드이다. console.log('Cylinder 1 X 1', //r: 1 h: 1 'Surface area:', 6.283185 * 1 * 1 + 6.283185 * 1 * 1, //2πrh + 2πr^2 'Volume: ', 3.14159 * 1 * 1 * 1); //πr^2h console.log('Cylinder 1 X 2', //r: 1 h: 2 'Surface area:', 6.283185 * 1 * 1 + 6.283185 * 2 * 1, //2πr^2 + 2πrh 'Volume: ', 3.14159 * 1 * 2 * 1); //πr^2h console.log('Cylinder 2 X 1', //r: 2 h: 1 'Surface are..

※ 아이템 13 타입과 인터페이스의 차이점 알기 ▶ 타입스크립트에서의 타입 정의 ▷ 1. 타입 사용 type TState = { name : string; capital: string; } ▷ 2. 인터페이스 사용 interface IState { name: string; capital: string; } 번외 : 클래스를 사용할 수도 있지만, 클래스는 값으로도 쓰일 수 있는 자바스크립트 런타임 개념이다. 아래 아이템 8의 내용을 참고해서 이해해보자. 49p ) 클래스가 타입으로 쓰일 때는 형태가 사용되는 반면, 값으로 쓰일 때는 생성자가 사용된다. class Cylinder{ radius=1; height=1; } function caculateVolume(shape: unknown){ if(shape..

※ 아이템 10 객체 래퍼 타입 피하기 ▶ 자바스크립트 기본형 값의 7개 타입 string, number, boolean, null, udefined, symbol, bigint 자바스크립트에는 메서드를 가지는 String '객체' 타입이 존재한다 기본형들은 불변이고, 메서드를 갖지 않는 점에서 객체와 구분된다. 근데 기본형 string 은 메서드를 갖고있는 것 처럼 보인다 . .? ▶ 자바스크립트 문자열의 기본형과 객체타입 자바스크립트는 기본형과 객체 타입을 서로 자유롭게 변환한다. ▷ 기본형 string - 문자열 값 자체를 나타낸다. 문자열은 불변한다. const str = "Hello Sian !"; const str = "Hello Sian !"; const res = str.toUpperCas..

TypeORM은 NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo 및 Electron 플랫폼에서 실행할 수 있고 TypeScript 및 JavaScript(ES5, ES6, ES7, ES8)와 함께 사용할 수 있는 ORM입니다 [ 공식문서] ▶ ORM 이란 ? Object Relational Mapping (객체 관계 매핑) : 데이터베이스를 사용하는 서비스를 객체지향적으로 구현하는데 큰 도움을 주는 도구이다 관계형 데이터베이스와 객체지향 프로그래밍언어의 중간에서 패러다임 일치를 시켜주기위한 기술이다 개발자는 객체지향적으로 프로그래밍을하고, ORM 이 관계형데이터베이스에 맞게 SQL을 대신 생성해서 실행한다 ORM 을 ..