TypeScript

타입스크립트 글로벌 설치ts 코드 작성컴파일결과Documentation - tsc CLI Optionstsconfig.js를 수동으로 작성하거나 tsc --init 명령어로 생성 및 셋팅자동 생성된 tsconfig.js당장 필요한 부분만 설정한 내용https:

기본 타입에는 크게 다음 12가지가 있음BooleanNumberStringObjectArrayTupleEnum이넘은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미이넘은 인덱스 번호로도 접근 가능만약 원한다면 이넘의 인덱스를

변환전 변환 1단계 변환 2단계 Type 또는 Interface를 사용하면 중복되는 코드를 방지할 수 있다.

변수와 함수에 활용함수의 스펙에 인터페이스를 활용인덱싱인터페이스의 딕셔너리 패턴인터페이스 확장(상속)상속받은 인터페이스의 타입들 모두 정의를 해줘야한다.

타입 별칭이란새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다.인터페이스와 타입별칭의 차이타입 별칭은 확장(상속)이 불가하다타입 공식 문서에서는 “좋은 소프트웨어는 언제나 확장이 용이하다는 원칙”에

Union Type: 하나의 타입 이상을 사용할 수 있게함유니온 타입의 장점밸류의 타입에 따라 로직을 분기하면 해당 타입의 속성들을 vsc상에서 확인할 수 있다.지정한 타입이 아닐경우 에러를 발생시킬 수 있다.유니온 타입의 특징두 인터페이스의 공통 속성인 name만 접

이넘은 특정 값들의 집합을 의미하는 자료형드랍다운과 같은 정해진 목록을 지정할때 쓰기 좋다.이넘을 사용할때 별도의 값을 지정하지 않으면 숫자형 이넘으로 취급한다. (Nike는 0, Adidas는 1 과 같이 순차적으로 값이 적용된다. 만약 Nike = 10과 같이 정의

es2015 클래스콘솔창에 객체를 출력시켜보면 프로토타입 기반임을 확인할 수 있다프로토 타입을 사용한 상속처음에 admin은 빈 객체이지만 상위 프로토 타입으로 거슬러 올라가 age, name에 접근할 수 있다. ‘.’을 사용하여 멤버를 직접 추가할 수 도 있다.프로토

제네릭이란 타입을 마치 함수의 파라미터처럼 사용하여 재사용성이 높은 컴포넌트를 만들 때 활용 특히 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용.일반 자바스크립트단순히 다른 타입을 인자로 받기 위해서 중복되는 코드를 생산해 나가는것은 가독성 뿐만 아니라 유지보

타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미.변수 초기화, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어남타입스크립트 랭귀지 서버는 getB()에서 넘버와 스트링의 + 연산으로 스트링이 리턴될것임을 추론할 수 있다.타입 랭

변수에 여러 타입이 반복되어 대입되거나 복잡한 연산에 의하여 변수에 값이 대입될때 타입 추론이 불가한 경우가 있다.타입 단언은 as 키워드를 사용하여 타입을 강제 정의하는것을 말한다.타입 단언은 DOM API를 조작할때 가장 많이 사용된다.div는 null일 수 도 있

유니온 타입으로 리턴 타입을 정의하였을 경우 함수 내부에서 skill을 명시하여 리턴했음에도 불구하고 리턴된 값에서는 정의한 두 인터페이스의 공통된 속성만 접근할 수 있다.위와 같이 타입 단언을 사용하여 공통이 아닌 속성에 접근할 수 있지만 반복되는 코드를 작성할 수

타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지 즉, 타입스크립트가 코드를 해석해나가는 과정에서 두 개의 타입이 서로 호환이 되는지를 점검하는것이 타입 호환이라 볼 수 있다.C하지만 위와 같은 코드가 타입스크립트에서 정상적으로 동작하는 이유는 자

타입스크립트에서 가리키는 모듈이라는 개념은 \*\*ES6+의 Modules(https://babeljs.io/docs/en/learn 개념과 유사하다. 모듈은 전역 변수와 구분되는 자체 유효 범위를 가지며 export, import와 같은 키워드를 사용하여 다

맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미.자바스크립트 map() API 함수를 타입에 적용한 것과 같은 효과맵드 타입은 자바스크립트의 map 함수를 타입에 적용했다고 보면된다.이를 위해서는 아래와 같은 형태의 문법을 사용해야

Documentation - Utility Types유틸리티 타입은 이미 정의해 놓은 타입을 “변환”할 때 사용하기 좋은 타입 문법.기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의

실습 프로젝트 소개존스홉킨스 병원에서 제공한 코로나 현황 사이트를 약식 클론ArcGIS Dashboards(https://www.arcgis.com/apps/dashboards/index.html 사용될 오픈 API Coronavirus COVID19

타입 변환 외에 기능적인 변경은 절대 하지 않을 것테스트 커버리지가 낮을 땐(테스트 코드가 없을 경우) 함부로 타입스크립트를 적용하지 않을 것처음부터 타입을 엄격하게 적용하지 않을 것 (any부터 시작해 점진적으로 strict 레벨을 증가)jsdoc으로 타입 적용하기@

프로젝트 폴더 생성npm init -y로 package.json 파일 생성아래 명령어로 타입스크립트 및 문법 검사(eslint), 코드 정리 도구(prettier) 라이브러리 추가Babel바벨은 최신 자바스크립트 문법을 최대한 많은 브라우저에서 호환될 수 있도록 컴파일

타입스크립트의 모듈 해석 방식 참고Documentation - Module Resolution모듈 자체 타입 정의 제공axios에는 index.d.ts(타입에 대한 정의 파일)에 타입 정의가 되어있다. /node_modules/axios/index.d.ts에 타입 정의

변환 과정변환 과정변환 전 전체 코드변환 후 전체 코드

TSConfig Reference - Docs on every TSConfig option(https://www.typescriptlang.org/tsconfig스트릭트 옵션을 true로 설정하게되면 위 이미지의 오른쪽에 있는 모든 항목들이 true로 설정된다