본문 바로가기
728x90

typeScript8

typeScript - type alias vs interface 타입 알리아스 vs 인터페이스 type alias - intersaction으로 상속. 상속은 interface와 type alias 둘 가능합니다. type Tstyle = Color & Display & Geometry & { } - 동일명의 타입알리아스가 존재할 수 없음 - 변수 타입이 모두 같은 경우 일괄적용 가능 export type TOnlyNumberValueObject = { [prop: string]: boolean; } interface - extends로 상속받음. type alias와 interface 둘 다 상속 가능. interface Istyle extends Color, Display, Geometry, { } - 동일명의 interface가 존재 시 서로 합쳐집니다. - 변.. 2021. 8. 19.
typeScript - @types 타입스크립트로 개발을 하다보면 타입스크립트를 지원하지 않는 라이브러리가 상당수 존재한다는 것을 알 수 있습니다. 타입스크립트를 지원하지않는 타이핑이 되어있지않고 인터페이스도 없고 타입 규격도 없는 라이브러리를 사용해야 경우. 타이핑되어있지않은 라이브러리를 등록해서 저장해놓은 패키지 저장소를 이용하시면 됩니다. npm 공식 사이트에 @types로 시작하는 저장소가 존재합니다. https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScrip.. 2021. 8. 1.
typeScript - 타입가드 타입가드란 타입스크립트 내에서 어떤 변수가 2개 이상의 타입을 갖게되는 경우가 있을 때. 특정 타입이 들어왔을 때 작동할 수 없는 코드에 대해서 경고해주거나, 원천적으로 막을 수 있는 코드 테크닉을 말합니다. function foo(a) { if(a === null) return; console.log(a?.valueOf()); } foo();// undefined 자바스크립트로 런타임 에러를 막을 수는 있습니다. 하지만 위와 같은 방식은 그렇게 좋은 방식이 아닙니다. 런타입 에러로 자동으로 멈추는 것도 필요한 것이죠. 그렇기에 타입검사용 함수를 만들어 오작동을 막고 런타임을 멈출지 아닐지 판단하는 것이 좋습니다. 참고로 자바스크립트에는 null을 undefined 처리하는 와일드카드가 있습니다. a?... 2021. 8. 1.
typeScript - 제네릭(Generic) 기법 제네릭 기법 타입스크립트에서는 특별한 타입을 지정해줄 수 있는 제네릭을 사용할 수 있습니다. 정의한 타입을 지정한다는 점에는 자바의 제네릭과 비슷한 점이 있습니다. 타입스크립트에서는 any라는 모든 타입을 받을 수 있는 타입이 존재합니다. 그럼 any를 쓰면 되지 제네릭을 쓰는 이유가 무엇일까요? any를 이용하여 구현하면 저장하고 있는 자료의 타입이 모두 같지 않다는 문제점이 생깁니다. 예를 들면 any 타입으로 구현한 배열에 문자, 숫자 등 여러 타입이 함께 들어갈 수 있다는 것이죠. 따라서 위의 스택에서 자료를 추출하는 경우 런타임에서 항상 타입 검사를 해줘야 한다는 문제가 있습니다. 다른 방법으로 타입을 상속해서 몇 가지 타입만 허용하는 방법으로 구현을 할 수 있습니다. 하지만 코드랑이 길어지고 .. 2021. 7. 29.
typeScript - 튜플 공부하다가 튜플이라는 것을 알게 되었습니다. 자바스크립트의 튜플은 조금 생소했으며, 현업에서 아직 써보지 못한 개념이었습니다. 1. 튜플이란 튜플은 자바스크립트의 배열을 확장한 기능입니다. 튜플은 배열의 함수를 모두 사용할 수 있다. 다만 제약을 걸 수 있다는 점이 다릅니다. 배열원소의 수와 원소의 타입에 제약을 걸 수 있습니다. 즉, 튜플이란 배열원소의 수를 제약하고 그 각각의 원소의 타입을 규정한 데이터 타입이라고 할 수 있습니다. type BookInfo = [string, string, number]; const BookData: BookInfo[] = [ ['헨리 8세', '세익스피어', 1884], ['헨리 8세', '세익스피어', 1884], ]; BookData.push(['title', .. 2021. 7. 26.
typeScript - typeScript 개괄3(기타) TypeScript 타입 명시(type annotations)에 쓰이는 몇 가지 기타 기능들 보겠습니다. 1. any Type any Type은 작업중인 코드의 타입 명시가 매우 어려운 경우거나 복수의 타입을 가질 때 사용됩니다. 예를 들어 서드 파티 라이브러리에서 가져온 컨텐츠의 타입을 모르거나 공통 메소드의 인자값이 상황에 따라 달라질 때 유용하게 사용할 수 있습니다. function getTestData(baseParam: any, baseParamArray: any[]): {} { if(baseParam) { if(typeof baseParam != 'number' || !Number(baseParam)) { baseParam = 0; } } else { baseParam = 0; } let te.. 2021. 7. 7.
typeScript - typeScript 개괄2(객체 생성과 접근자 제한) 안녕하세요. 저번 포스팅 글에 이어서 타입스크립트로 인터페이스를 만들고, 인터페이스로 객체를 생성하는 것을 좀 더 자세하게 다루어 보겠습니다. 1. class로 객체생성 // 인터페이스 interface member { memberNo: number; name: string; phoneNm?: string;// 문자열 타입 isAuthenticated: boolean;// boolean 타입 } // 인터페이스 상속 interface customer extends member { point: number; address?: string; } // 객체 정의 class customerInfo { info: customer; createDt: string; constructor(info: customer, .. 2021. 7. 7.
typeScript - typeScript 개괄1(환경설정, 타입 명시, interface) 타입스크립트는 저도 최근에 공부하고 있어서, 잘은 모르지만 정리 목적으로 타입스크립트를 다루어 보겠습니다. 1. 타입스크립트 개발환경 설정 일반적으로 js파일 확장자를 ts로 바꾸거나, ts 확장자로 파일을 생성하면 자동으로 타입스크립트 컴파일러가 생성됩니다. 만약 자동으로 생성되지 않는다면, $npm install -g typescript 를 통해서 설치해주시면 됩니다. 브라우저가 타입스크립트를 인식하지 못하기 때문에 자바스크립트로 변환해주기 위한 컴파일러가 필요하며, tsconfig.json을 통해 컴파일러를 설정할 수 있습니다. tsconfig.json 파일에서 타입스크립트와 자바스크립트 간의 컴파일 설정을 하시면 됩니다. // tsconfig.json { "compilerOptions": { "s.. 2021. 7. 6.
728x90

티스토리툴바