전체 글

TS021. 타입스크립트 다차원 배열

타입스크립트 다차원 배열 타입스크립트 다차원 배열은 일반 타입스크립트 배열과 엄청나게 차이가 나진 않는다. 결국 array([]) 표시를 몇개를 해주냐가 다른 것이지 작동 방식은 일반 array 와 똑같다. const twoDArr: number[][] = [ [1, 2, 3], [4, 5, 6], ]; const twoDArr2: (string | number)[][] = [ [1, 2, 3], ["4", "5", "6"], ]; for (const arr of twoDArr) { for (const e of arr) { e; // number 로 타입 추론이 잘 됨 } }

TS020. 자바스크립트 배열의 문제점과 타입스크립트 배열의 특징

자바스크립트 배열의 문제점: 의도치 않은 동작 초래 타입스크립트와 비교했을 때 타입이 없다. 가끔 의도치 않은 동작을 초래할 수 있다. 자바스크립트 코드는 간혹 HTML Input Element 와 같은 곳에서 들어온 정제되지 않은 입력값을 타입과 상관없이 넣었다가 의도치 않은 연산을 초래할 수 있다. ex) number 와 string 타입의 + 연산 자체는 문제 없지만 기대했던 값이 나오지 않을 수 있다. let numbers = [1, 2, 3]; numbers.push(4); // OK numbers.push("5"); // OK, but may lead to unexpected behavior since the array is now mixed type let numbers: number[] =..

TS019. 타입스크립트 never 타입

Never 타입 never 타입을 보게되는 경우는 크게 두가지가 있다. 함수의 반환 값으로 보게 되는 경우 잘못된 인터섹션을 진행한 경우 함수의 반환 값으로 never 가 나오는 경우 함수에서 에러를 던지는 경우 function throwError(): never { throw Error(); } 무한루프가 끝나지 않는 경우 function infiniteLoop(): never { while (true) {} } 존재할 수 없는 인터섹션이 있는 경우 string 과 number 의 intersection 은 존재하지 않는다. never 가 된다. type never = string & number;

TS018. 타입스크립트 Unknown 타입과 Any 타입 비교

Unknown 타입 any 와 동작이 흡사하여 주로 any 와 비교된다. any 는 유형 검사를 우회한다. 반면, unknown 은 값에 대한 연산을 수행하기 전에 명시적 assertion 혹은 narrowing 을 통해 타입 안정성을 유지하는 것이 가능하다. unknown 은 타입스크립트 3.0 에서 도입되어, any 대신 사용했을 때 안정성이 더 뛰어나다. any, unknown 타입에 다른 값을 할당하는 예시 두 타입으로 선언된 변수라면 어떤 primitive 타입의 값이든 할당이 가능하다. let unknown: unknown; unknown = "ab"; // string 할당 unknown = 123; // number 할당 let any: any; any = "ab"; // string 할당..

TS017. 타입스크립트에서 Any 타입 사용의 문제점

Any 타입의 문제점 1: 타입 세이프티가 손실된다. Silent Type Errors: 컴파일 타임 타입 검사에서 에러를 받아보지 못하고 런타임에 에러가 발생하게 된다. 서비스 운영에 치명적이다. Masking Bugs: 타입 에러는 종종 잠재적 버그를 나타내주는 지표가 되는데 이런 지표가 마비된다. 결국 디버깅하기 어려운 버그가 발생할 수 있다. function addNumbers(a: any, b: any) { return a + b; } const result = addNumbers("10", 5); // Expected number, but gets string "105" 2: 자동완성과 툴링에 있어서 손해를 많이 본다. 아래와 같이 any 타입으로 변수를 선언하면 IDE 에서 primitive..

TS016. 타입스크립트 타입, 인터페이스 상속과 오버라이딩

인터페이스와 타입의 상속 타입스크립트에서 interface 와 type 둘 다 상속 기능이 있다. 사실 type 의 경우엔 extends 키워드를 직접 이용하는 것은 아니지만 거의 흡사하다. 인터페이스 상속 인터페이스 상속은 여타 언어처럼 extends 를 통해 가능하다. interface Person { name: string; age: number; } // 상속 가능 interface User extends Person { id: string; } const user: User = { id: "abc", name: "김모씨", age: 10, }; 타입 상속 타입의 상속은 intersection(&) 을 통해 가능하다. type PersonT = { name: string; age: number; ..

TS015. 타입스크립트에서 타입과 인터페이스의 차이

타입과 인터페이스의 차이 interface 는 시기상 type 보다 나중에 등장했다. 그렇다고 interface 가 type 의 상위호환은 아니고 각자만의 역할이 존재한다. 오브젝트 선언 방법 알아보기 type 의 경우 일반 자바스크립트에서 오브젝트를 선언하는 것과 흡사하다. 함수의 시그니처를 선언할 때는 표현식처럼 선언한다. // 일반 오브젝트 선언 type t = { x: number; y: number; }; // 함수 시그니처 type t = (x: number, y: number) => number; // 오브젝트 메서드 type t = { foo(x: number): number; }; interface 의 경우 인터페이스도 일반 자바스크립트에서 오브젝트를 정의하는 것과 흡사하게 선언한다. 타..

TS014. Type Predicate (타입 술어, 타입 가드)

Type Predicate (타입 술어) 타입 가드 역할을 하는 특별한 종류의 리턴 타입이다. 사용자 정의 타입 가드 함수에서 코드의 특정 영역에서 타입을 좁히기 위해 사용한다. 인자로 들어온 타입이 이런 타입이다 라고 알려줘서 타입 추론을 가능하게 만든다. parameterName is Type 의 형태를 띈다. 코드 예시 1 function isString(value: any): value is string { return typeof value === "string"; } const mixedArray: any[] = [1, "hello", 2, "world"]; // isString() 을 거친 값들은 string 이라는 것을 `value is string` 이 말해주고 있다. const stri..

TS013. 타입스크립트의 문장(statement)과 표현식(expression)

타입스크립트 함수의 Statement 와 Expression 문 (Statement) 타입스크립트에서도 자바스크립트처럼 함수를 Statement 와 Expression 으로 표기할 수 있다. 보통 statement 에서는 일반 함수를 선언하는 것과 마찬가지로 표기한다. 매개변수의 반환 타입을 표기하고 반환 타입은 타입 추론에 의해 판별된다. 단, 재귀 함수이거나 로직이 복잡할 때는 반환 타입을 적절하게 추론하지 못해낼 수 있다. Javascript 와 마찬가지로 호이스팅이 일어난다. 함수에 이름이 있으므로 디버깅이 더 쉬워진다. function 은 자바스크립트에서 기본적으로 무한 중복 선언이 가능하기 때문에 스코프를 제대로 관리해야 한다. // statement (문장) function foo(x: nu..

TS012. 타입스크립트 함수 오버로딩

함수 오버로딩 타입스크립트를 통해 함수 오버로딩을 정의할 수 있다. 사실 자바스크립트에서는 여러 케이스의 인자를 넣어도 되는 함수가 있을 때, 어떠한 파라미터를 넣어도 정적 분석 때 에러가 발생하지 않기 때문에 인자를 잘못 전달하는 일이 비일비재하다. 타입스크립트 오버로딩을 통해 이를 막을 수 있다. 오버로딩 적용 전 /** * 파라미터를 1개만 받는다면, 그냥 반환한다. * 파라미터를 3개 받는다면, 전부 더해서 반환한다. */ function sumOrJustReturn(p1: number, p2?: number, p3?: number) { if (p2 && p3) { return p1 + p2 + p3; } return p1; } console.log(sumOrJustReturn(10, 10, 10..

TS011. 타입스크립트로 함수 시그니처 선언하기

함수 시그니처를 type 으로 선언하기 type 에 단순히 하나의 타입을 지정하는 것을 넘어 함수 시그니처 자체도 하나의 타입으로 만들 수 있다. 아래의 예제는 2개의 number 타입 파라미터를 받고 number 를 반환하는 시그니처를 만들고 적용한 예이다. type TypeFunctionSignature1 = (x: number, y: number) => number; const nf: TypeFunctionSignature1 = (x, y) => x + y; 아래는 string 의 경우이다. type TypeFunctionSignature2 = (x: string, y: string) => string; const sf: TypeFunctionSignature2 = (x, y) => x + y; 콜..

TS010. 타입스크립트 함수 정의 (Function Definition)

타입스크립트 함수 선언 방식 타입스크립트 함수 선언 포맷은 아래 예제코드와 같다. 각 파라미터 옆에 파라미터의 타입을 명시해주고, 파라미터 괄호 뒤에는 함수 자체의 반환 타입을 명시해주면 된다. 중요한 것은 파라미터 갯수나 타입을 정확히 맞추지 않으면 타입스크립트 검증에 의해 에러가 난다. function foo(param1: string, param2: string): string { return `${param1}, ${param2}`; } foo(); // 에러, 파라미터 갯수 부족 foo("a"); // 에러, 파라미터 갯수 부족 foo("a", 1); // 에러, 파라미터 타입이 하나 틀림 foo("a", "b"); // 정상 동작 참고로 반환 타입인 string 은 타입 추론에 의해 잘 추론되..