TS
[TS] Decorators
데코레이터는 아직 확정적으로 사용할 수 없는 기능이기 때문에 변경사항이 일어나면 코드를 수 없이 변경해야 하기 때문에 깊게 사용하지 않는 것이 좋습니다. 데코레이터는 향후 릴리스에서 변경될 수 있는 실험적 기능입니다. 공식문서에서도 명확히 구현되지 않아 문제점에 대해 이야기 하고 있습니다. 그럼에도 불구하고 많은 곳에서 사용하고 있습니다. (내용은 공식문서에 있는 내용입니다.) Decorators 기능 활성화 Decorators를 활성화하려면 tsconfig.json에서 experimentDecorators compiler options를 true로 설정해야 합니다. { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } } De..
[TS] Compile (option)
타입스크립트를 자바스크립트로 변환하는 과정에서의 옵션을 줄 수 있는 것으로 공식문서나 검색을 하여 어떠한 것이 있는지 어떻게 쓰는지 확인 할 수 있습니다. 1. tsconfig 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다. { "compilerOptions": { /* Basic Options */ "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "c..
[TS] utility type
1. 타입의 기본 변경 타입스크립트에서 타입을 고정하지 않고, 타입을 변환하거나 일부 변환이 가능합니다. Index type 인덱스 타입은 속성이 정해져 있지 않고 동적으로 처리해야 할 경우 사용합니다. 흔히 자바스크립트 객체에서 배우는 내용으로 아래와 같이 접근을 할 수 있습니다. const lol = { cham: 'nunu', }; obj.name; // nunu obj['name']; // nunu 하지만 타입스크립트에서는 세밀하게 type을 이용하여 정의할 수 있습니다. 캐릭터 타입의 name을 이용하고 선언하여 이름을 설정하거나, 캐릭터의 스킬 값 q,r을 정의할 수도 있습니다. 즉, 타입의 선언한 내용을 필요한 것만 사용이 가능한 것입니다. type character = { name: str..
[TS] type alias, interface 차이
type alias, interface는 쉽게 말해서 어떤 오브젝트에 대한 정의를 할 때 주로 선언을 하게 됩니다. type alias, interface 으로 선언을 하면 공통적으로 object에 정의를 하고 타입을 할당이 가능하고 class에서도 implements를 통해 구현이 가능하고 extends 상속을 통해서 확장도 가능합니다. 차이점으로는 interface는 오브젝트와 오브젝트간의 약속사항으로 상호작용을 도와줍니다. 그렇기 때문에 동일한 규격으로 어떤 것을 구현할 때 interface를 사용하는게 좋습니다. interface Person { makeEmail(age: number): Email; } interface Person { makePhone(age: number): Phone; } ..
[TS] 제네릭(Generics)
클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 것으로, 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능하게 해주는 타입입니다. 즉, 어떠한 타입이든 받으면서 받은 해당 타입을 그대로 리턴하게 하는 것 입니다. 제네릭 타입은 다양한 타입을 받을 수 있다는 유연성이란 점에서 타입의 정보가 동적으로 결정됩니다. 클래스 상속을 사용하면 별도의 자료 타입을 받고자 하는 클래스를 추가해야 하고 중복되는 코드를 양산하기에 불편합니다. 바로 이런 경우에 유용하게 사용할 수 있는 것이 제네릭 입니다. 함수 function checkNull(arg: T | null): T { if (arg == null) { throw new Error() } return arg; } fu..