본문 바로가기

IT/typescript31

[typescript] Union & Intersection 정리Union Type에서의 교집합, 합집합과 구조적 타입에서의 교집합, 합집합의 개념은 다르다.구조적 타이핑은 객체가 어떤 타입에 부합하는 최소한의 특징을 가지고 있다면, 그 타입에 해당하는 것으로 간주한다. Union Type여러 타입 중 하나를 가질 수 있다.  개념은 너무 쉬워서 넘어가고, 값을 넣을 때는 합친 타입 중 아무거나 넣으면 되고,사용할 때는 어떤 타입을 사용할 것인지 확인 후 사용. 즉, Narrowing해서 사용 단, 사용할 로직이 어느 타입이든 상관없다면 Narrowing 할 필요는 없음function printId(id: number | string) { if (typeof id === 'number') { console.log(`${id} is number`).. 2024. 3. 17.
[Typescript] Type Assertion 언제 사용하나 Typescript가 알 수 없는 type이거나 추론한것보다 개발자가 더 정확한 타입을 알고 있을 때 타입을 강제할 수 있다. 예) getElementById에서는 HTMLElemnt를 리턴하는데, 개발자는 canvas를 가져올것을 알기에 HTMLCanvasElement 으로 강제시킨다. const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement; 특징 컴파일 때 사라지기에 런타임 때 영향을 받지 않는다. 그래서 강제한 타입이 틀리더라도 null이나 exception이 발생되지 않는다. 하지만 조심해야 한다. 경험사례로, string을 enum 타입으로 강제해서 사용했지만 런타임에서는 enum타입에 맞지 않아 u.. 2024. 3. 16.
[typescript] Array가 Record type에 호환이 된다고? 결론 맞다. 뿐만아니라 function, Map, Date, Boolean, String, class도 된다. Record Type type Record = { [P in K]: T; } 이유 key의 형태가 index signature로 되어 있기 떄문이다. [P in K] 가 array['0'] 를 받아줄 수 있기 때문이다. const a = [1, 2, 3, 4, 5] const b: Record = a console.log('a', a) // [1, 2, 3, 4, 5] console.log('b', b) // [1, 2, 3, 4, 5] console.log('isArray', Array.isArray(b)) // true 더 신기한 사실!! string 자체도 Record에 호환이 된다. 이유.. 2024. 3. 13.
[Typescript] Complier Options - suppressImplicitAnyIndexErrors 개념 object에 있는 값을 indexing 하는 방식으로 값을 가져올 때 2가지 상황에 대해서 암묵적인 any로 추론되는데, 이 에러 경고를 무시하는 옵션 첫번째 상황 object type에서 없는 키 index signature에 넣었을 때 두번째 상황 keyof typeof object 의 타입과 다른 타입의 키를 index signature에 넣었을 할때 특징 해당 옵션을 사용한다면 (set to 'true') 너무 위험하기에 사용할 때마다 아래처럼 주석을 달아주는걸 권장한다. 5.5에는 deprecation이 될 예정이라 미리 false로 변경 후 에러 경고나는 곳을 수정하는게 바람직하다 테스트 무조건 에러 경고가 뜨는건 아님. 추론된 object 타입의 key가 아닌 다른 key를 index.. 2024. 3. 12.
[typescript] ConstructorParameters<Type> 개념 constructor function의 파라미터의 type을 반환하는 Utility Type class A { constructor(b: number) { } } type T0 = ConstructorParameters; /** * * [b: number] * */ 2024. 3. 11.
[Typescript] Parameters<Type> 개념 함수의 파라마터의 Type을 Type으로 사용하고 싶을 때 function f1(arg: {a:number; b:string}) { } type T1 = Parameters /** * * [arg: { a:number; b:string }] * */ type T2 = Parameters[0] /** * * { a:number; b:string } * */ https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 2024. 3. 11.

티스토리툴바