Typescript

Documentation - GenericsTypes which take parameterswww.typescriptlang.org 제네릭(Generic) 이란?제네릭은 어떠한 클래스 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법이다. generic의 단어 뜻은 일반적인, 총칭의, 포괄적인 이다.즉, 타입을 일반화하는 것을 의미한다. 특정 타입에 의존하지 않고 다양한 타입에 대해 동작할 수 있는 함수나 클래스 등을 작성할 수 있게 해주기 때문이다. → 함수와 클래스의 범용적인 사용이 가능해진다.  콘크리트 타입 대신 사용 가능📢 콘크리트 타입 : number, string, boolean, void, unknown 등" data-ke-type="html">HTML ..

Index Signatures[key: string]: string처럼 key값의 이름 대신 key값의 type을 대괄호 안에 명시해주는 형식이다.  타입 프로퍼티의 이름은 모르지만 타입은 알고 있을 때 인덱스 시그니처를 통해 인터페이스를 정의할 수 있다.declare interface CodeMap { [key: string]: CodeItem[];}  또는 하나의 인터페이스에 동일한 타입의 key-value가 반복될 때 인덱스 시그니처를 통해 코드를 간략하게 유지할 수 있다.interface Student { studentId: string; name: string; className: string; subject: string;};interface Student { [key: string]..

객체에 동적 변수를 key 값으로 하여 접근하기 위해 대괄호 표기법을 사용했을 때, 이러한 타입 에러가 발생했다. 실제 코드는 훨씬 복잡하기 때문에 간략한 예시로 정리 const obj = { one: "uno", two: "dos", three: "tres", }; for (const k in obj) { const v = obj[k]; } obj에 명시된 타입이 없기 때문에 엘리멘트는 암시적으로 'any' 타입이다. k의 타입은 string인 반면, obj 객체에는 ‘one’, ‘two’, ‘three’ 세 개의 키만 존재한다. k와 obj 객체의 키 타입이 서로 다르게 추론되어 오류가 발생한 것이다. 이 오류를 해결하기 위해서는 k의 타입을 더욱 구체적으로 명시해야 한다. 이때 두가지 방법이 있다...

Emit 이벤트를 통해 전달한 value의 값이 항상 any이기 때문에 발생하는 타입 오류를 해결하기 위해 고민한 흔적~^^ 아래에서는 단계적으로 정리해뒀다. 1. 타입 정의 X const emit = defineEmits(['update:value']); const setSelectedValue = (value) => { emit('update:value', value); }; 이때 value의 타입은 따로 명시해주지 않았기 때문에 any이다. 근데 이 경우 공통 컴포넌트를 앱에 전역 등록해주면, vue 파일에서 emit 이벤트를 받아서 변수를 업데이트해 줄 때, @update:value="(value) => props.row.data.volType = value" 이런 TypeError가 나타난다. ..

이전의 프로젝트를 진행하며 인터페이스 네이밍 규칙으로 다른 변수명과의 구별을 위해 접두사 I를 붙이는 헝가리안 네이밍을 사용했었다. 그러나 MS의 Typescript Coding guidelines에 접두사 I를 사용하지 말라는 규칙이 있는 것을 보고 이에 대해 고민해보게 됐다. (참고로 MS의 가이드라인은 타입스크립트 규정은 아니니 반드시 따를 필요는 없다. 그러나 참고용으로 굿굿) Coding guidelines TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - microsoft/TypeScript github.com Typescript에서 I 표기를 지양하는 이유? 1. 더 이상 변수명으로 역할을 구분..

타입스크립트를 사용하다보면 참 이런 이벤트들, 외부 라이브러리들 타입 주기가 참 어렵다. @input이 반환하는 event의 타입은 InputEvent 이다. InputEvent → UIEvent → Event 순으로 타고타고 찾아가다보면 target을 확인할 수 있다. 이때 target의 타입은 EventTarget 또는 null이다. 황당하고 놀랍게도 EventTarget에는 value가 없다….. (메서드만 가지고 있더라) const target = e.target as EventTarget 그래서 만약 이렇게 줘버리면 또 target.value 를 쓸 수 없게 된다. EventTarget - Web API | MDN EventTarget 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한..

기존 서비스의 기능 및 페이지를 확장하게 되며, 타입스크립트 정의 방법에 대해 고민을 하게 됐다. 기존에는 서비스 규모가 작았기 때문에 declare로 타입 인터페이스를 정의해두었는데, 이번에 확장하며 필요한 인터페이스의 개수가 많아졌다. 그래서 declare과 export(모듈화) 방식의 성능 차이나 장단점을 알아봤다. 1. 전역적으로 선언하는 경우 (declare) 장점: 편리하게 전역적으로 사용 가능 (별도의 Import 문이 필요하지 않음) 일부 라이브러리와 외부 모듈과의 통합이 간편할 수 있음 단점: 전역 네임스페이스 오염 위험 코드가 커질수록 유지보수가 어려워짐 성능 저하의 가능성이 있음 (일반적으로 미미함) 2. 모듈화된 인터페이스 사용하는 경우 (export) 장점: 네임스페이스 충돌과 오..