전체 글 (157) 썸네일형 리스트형 Effective Typescript - 10 - 객체 래퍼 타입 피하기 타입스크립트는 기본형과 객체 래퍼 타입을 별도로 모델링합니다. * string과 String * number와 Number * boolean과 Boolean * symbol과 Symbol * bigint와 BigInt 여기서 string을 사용할 때는 특히 유의해야 합니다. string을 String이라고 잘못 타이핑하기가 쉽고, 실수를 하더라도 처음에는 잘 동작하는 것처럼 보이기 때문입니다. function getStringLen(foo: String){ return foo.length; } getStringLen("hello"); // 정상 getStringLen(new String("hello")); // 정상 그러나 string을 매개변수로 받는 메서드에 String 객체를 전달하는 순간 문제가 .. Effective Typescript - 9 - 타입 단언보다는 타입 선언을 사용하기 아래 예제는 변수를 할당 할 때, 타입 단언과 타입 선언을 사용하는 코드입니다. interface Person { name: string }; const alice: Person = { name: 'Alice' }; // 타입 선언 (추천) const bob = { name : 'Bob'} as Person; // 타입단언 (비추) 타입 선언이 타입 단언보다 타입스크립트의 언어지원을 받기에 훨씬 유리합니다. 그 이유에 대한 것은 아래 예제를 보십시오. interface Person { name: string }; const alice: Person = {} // 오류 const bob = {} as Person // 오류가 아님 타입 체커의 기능을 온전히 사용하려면 어떤 방식을 쓰는게 유리한지 이해할 수.. Effective Typescript - 8 - 타입 공간과 값 공간의 심벌 구분하기 타입스크립트의 심벌(symbol)은 타입 공간이나 값 공간 중 한 곳에 존재합니다. 심벌은 같더라도 속하는 공간에 따라 다른 것을 나타냅니다. 따라서 이와 관련된 혼란이 올 수 도 있습니다. 아래 예제가 바로 그러한 상황입니다. //타입 공간에 존재 interface Cylinder { radius: number; height: number; } // 값 공간에 존재 const Cylinder = ( radious : number, height: number ) => ({radious: radious, height: height}); 위와 같은 상황에 혼란에 빠지면 아래와 같은 상황에 직면할 수 있습니다. //타입 공간에 존재 interface Cylinder { radius: number; height.. Effective Typescript - 7 - 타입이 값들의 집합이라고 이해하기 타입스크립트의 타입은 '할당 가능한 값들의 '집합'으로 이해하는 것이 좋습니다. (타입의 범위) 가장 작은 타입 집합은 아무 값도 포함하지 못하는 집합인 never입니다. never로 선언된 변수에는 어떠한 값도 할당 불가입니다. 그다음으로 작은 집합은 한 가지 값만 포함하는 타입입니다. 이들은 타입스크립트에서 유닛(unit) 타입 이라고도 불리는 리터럴(literal)입니다. type A = 'A'; type B = 'B'; type Twelve = 12; 복수개의 리터럴 타입을 묶으려면 유니온(union) 타입을 사용합니다. 유니온은 타입연산자 '|'를 이용해서 만듭니다. 집합에서 합집합의 개념으로 이해할 수 있습니다. type A = 'A'; type B = 'B'; type Twelve = 12;.. Effective Typescript - 5 - any 타입 지양하기 타입스크립트 사용시 nay 타입이나 as any 타입을 사용하고 싶은 상황이 많을 겁니다. 하지만 any를 사용하면 타입스크립트의 언어 지원을 온전히 받지 못하는 치명적인 단점이 있습니다. any 타입을 사용하면 타입 체커와 타입스크립트 언어 서비스를 무력화 시킵니다. any 타입은 내재하는 문제를 감추며, 개발 경험을 나쁘게 하고, 타입 스시템의 신뢰도를 떨어뜨립니다. 최대한 사용을 피하는게 좋습니다. Effective Typescript - 4 - 구조적 타이핑에 익숙해 지기 자바스크립트는 본질적으로 덕 타이핑(duck typing) 기반입니다. 만약 어떤 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 신경 쓰지 않고 사용합니다. 타입스크립트도 이러한 동작을 그대로 모델링 했습니다. 이와 관련된 동작을 구조적 타이핑으로 이해 할 수 있습니다. 아래는 예제는 구조적 타이핑이 어떻게 동작하는지를 보여 줍니다. interface Vector2D { x: number; y: number; } interface Vector3D extends Vector2D { z: number; } function calcLen(v: Vector2D) { return Math.sqrt(v.x * v.x + v.y * v.y); } const v3d: Vector3D = {.. Effective Typescript - 3 - 코드 생성과 타입이 관계없음을 이해하기 큰 그림에서 보면 타입스크립트 컴파일러는 두 가지 역할을 합니다. * 최신 타입스크립트/자바스크립트를 브라우저에서도 동작할 수 있도록 구 버전의 자바스크립트로 트랜스파일(transpile) 합니다. * 코드의 타입 오류를 체크합니다. 위 두가지 동작은 완전히 독립적이라 합니다. 타입스크립트가 자바스크립트로 변환될 때 코드 내의 타입은 더 이상 유효하지 않습니다. 즉, 자바스크립트 런 타임에도 타입은 전혀 영향을 주지 않습니다. 타입 오류가 있는 코드도 컴파일이 가능합니다. 아래 코드는 분명 타입 체커에 의해 오류가 발생하지만 실제로는 컴파일이 가능합니다. let x = 'test'; x = 1234 // 에러 Type 'number' is not assignable to type 'string'.(232.. Effective Typescript - 2 - 타입스크립트 설정 이해하기 * 타입스크립트 컴파일러는 언어의 핵심 요소에 영향을 미치는 몇가지 설정을 포함합니다. * 타입스크립트 설정은 커맨드 라인을 이용하기보다 tsconfig.json을 사용하는 것이 좋습니다. * 자바스크립트 프로젝트를 타입스크립트로 전환하는 게 아니라면 noImplicitAny를 true로 설정하는 것이 좋습니다. * strict 설정을 사용하면 엄격한 타입 체크가 가능합니다. 이전 1 2 3 4 5 ··· 20 다음