유틸리티 타입이란 타입에 대한 내용을 변환을 해야할때 도와주는 좋은 타입 문법입니다. 물론 인터페이스,제너릭으로 타입을 변환 할수 있지만 유틸리티 타입 활용하면 더 간결한 코드로 변환을 할수 있습니다. Partial Partial 타입은 타입에 대한 부분 집합을 만족하는 타입을 선안할수가 있습니다. interface Cafe { cafe_num : number; cafe_name : string; } type CafePartialType = Partial; const cafejun: CafePartialType = {}; // 가능 const junseok: CafePartialType = { cafe_num: 12380918}; // 가능 const jun12: CafePartialType = { ca..

모듈화란 쉽게 말해서 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다. 타입스크립트의 모듈 시스템은 자바스크립트에서 ES6+모듈 시스템과 겉의 같다고 볼수가 있습니다. 우선 자바스크립트에서 왜 모듈화가 필요한지에 대해서 보겠습니다. // a.js var total = 100; function getTotal() { return total; } // b.js var total = 200; 기본적으로 자바스크립트의 파일 유효범위가 전역으로 설정이 되기 때문에 위 코드와 같이 각 파일에서의 변수명이 동일하다면 이후 실행되는 변수나 함수등에 대해서 겹쳐쓰게되는 현상이 발생하여 기존 코드가 오작동을 발생할수가 있습니다. 이러한 문제를 해결하기 위해 자바스크립트에서는 네임스페이..

타입호환이란 타입스크립트에서 특정 타입이 다른 타입에 잘 맞는지지를 체크하는것을 의미합니다. 타입스크립트 관점에서는 타입이 정의되어 있는 속성의 타입을 가지고 코드가 호환되는지를 확인하는것이 구조적 타이팅이라고 합니다. 아래의 코드로 확인해 보겠습니다. interface Cafejun { name: string; skill : string } class Coffee { name : string; } var cafejun : Cafejun; var coffee : Coffee; cafejun = coffee // Error 출력 coffee = cafejun // 정상 동작 위 코드는 타입스크립트에서 어떻게 인식을 하는지를 보면 속성인 name,skill 으로 이루어진 Cafejun 인터페이스와 name ..

타입스크립트 보다 타입스크립트를 이용한 개발자가 타입을 지정하는 것이 타입 단원 입니다. 단어만 들었을때는 감이 언오실수 있어 아래 코드로 예제를 작성해 보겠습니다. ts 파일 안에 ab변수를 선언한뒤 숫자를 한번 선언해주고 문자열을 한번 선언을 하였습니다. 이럴 경우 타입스크립트에서는 타입에 대한 추론은 any 로 추론이 되는데 코드를 작성하는 개발자는 이 타입이 마지막에 선언된 문자열 (string) 이라는것을 알고 있습니다. 이럴경우 개발자가 생각하는 타입을 지정할수가 있습니다. ab 변수 옆에 as 라는 키워드 작성한뒤 타입을 지정하면 변수 c 에대한 타입을 타입스립트에서 추론을 하게 됩니다. 이 타입 단원은 DOM API 를 조작할때 사용되는데 예를 들어 설명해보겠습니다. var div = do..

타입 추론(Type Inference) 타입스크립트가 작성된 코드를 어떻게 해석을 하는지에 대한 개념입니다. 타입스크립트는 변수를 선언하거나 초기화 할때 타입이 추론됩니다. 예를들면 변수,속성,인자의 기본값 함수의 반환값등을 설정할때 타입추론이 발생하게됩니다. var cafejun; 위 코드에서는 cafejun 변수를 선언만 하였습니다. 이때 변수를 선언하면서 any 타입이 할당이되고 여기에 값을 지정을 하면 값에 대한 타입이 변수에 타입으로 지정이 됩니다. cafejun 변수에 'abc' 를 선언하였을때 string 타입으로 추론이 되었습니다. 함수에도 타입을 추론해보겠습니다. function getB(b = 10) { var c = 'hi' return b + c; } Best Common Type ..

그동안 배운 타입스트립트의 타입에대한 개념을 아래 연습 문제들을 통해서 점검을 해보는 시간을 가져보았습니다. 강의를 듣기만 해서는 정말 개념에 대한 내용을 듣는것만 하는거이고 실제로는 개념을 체화하여 코드를 작성을 해야하기 때문에 연습문제를 풀어보기로 하였습니다. 아래 테스트로 작성한 함수의 타입을 지정해보도록 하겠습니다. function fetchContacts() { const contacts = [ { name: 'Tony', address: 'Malibu', phones: { home: { num: 11122223333, }, office: { num: 44455556666, }, }, }, { name: 'Banner', address: 'New York', phones: { home: { nu..