Typescript

자바스크립트로 제작된 COVID-19 세계 현황판을 타입스크립트로 변환해보면서 타입스크립트의 개념과 기초를 배워보자.실습 & 코딩 중심 강의 \- 3개의 실습 프로젝트개념 설명은 짧고 간단하게 실습은 자세하게수업 & 학습 자료는 웹문서로 제공 \- 타입스크립트 핸드

자바스크립트에 타입을 부여한 확장된 언어자바스크립트와 달리 브라우저에서 실행하기 위해 파일을 한 번 변환하는 과정이 필요하다.(=컴파일(compile))받아온 데이터의 형상들을 알지 못할 경우 낼 수 있는 에러, 오탈자로 인한 에러들을 방지할 수 있다.1\. 받아온 데

브라우저가 ts파일을 인식하도록 js파일로 변환해야 한다. (compile)$ node -v : node 버전이 설치되어있는지 확인. $ npm i typescript -g : node 기반으로 사용하는 javascript 라이브러리인 typescrip

타입스크립트의 기본 타입에는 크게 12가지가 있다.BooleanNumberStringObjectArrayTupleEnumAnyVoidNullUndefinedNever기존 JS 문자열 선언 방식TS 선언 방식 TS를 사용할 때는 대부분 es6이상을 이용한다. - let,

프로젝트 실습 파일:실습자료 - learn-typescript - quiz - 1_todo변수 타입정의와 함수의 타입정의만으로도 간단한 애플리케이션에 대한 타입을 입힐 수 있다.$ node -v으로 node가 설치되어있는지 확인 후, $ npm i로 package.js

인터페이스로 정의한 것은 이후에 해당 인터페이스를 사용할 때 오탈자 방지, 중복/반복 되는 타입들을 손쉽게 정의할 수 있다는 장점이 있다.위 이미지에서 발생하는 오류를 해결하려면 정의된 인터페이스 타입을 모두 적어줘야한다.타입스크립트가 가장 빛을 보는 구간은 API를

타입 별칭 \- 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.타입스크립트 핸드북 - 타입 별칭인터페이스와 타입으로 정의를 선언 후, 변수 선언에 사용했을 때 어떻게 다르게 나타나는지 확인해보자. \- Person이라는 인터페이스를 사용했다고 알려

Union type \- 특정 변수/파라미터에 하나 이상의 타입을 사용할 수 있게 해준다.타입 가드 \- 특정 타입으로 타입의 범위를 좁혀나가는 필터링하는 과정.2개의 구조체가 유니온 타입이 될 경우.예를 들면 string, number, boolean을 모두 만족하는

이넘(Enums) \- 특정 값들의 집합을 의미하는 자료형이다. \- 실제 서비스 개발 시 드롭다운이나 정해져 있는 목록의값들을 지정할 때 사용하기 좋다.타입스크립트 핸드북 - 이넘별도의 값을 지정하지 않을 경우 숫자형 이넘으로 취급된다.숫자형 이넘 vs 문자형 이

ES2015(ES6)에서 소개된 문법.클래스가 하는 역할은 기본적으로 인스턴스를 만들어 주는 것이다.자바스크립트가 프로토타입 기반 언어라는 개념을 인식해야 클래스 사용시 이점을 이해하기 쉽다.많은 객체들을 활용할 때 중복되는 코드들에 대해 줄일 수 있는 방법이 필요한데

타입을 마치 함수의 파라미터 개념인 것처럼 받게 되는 것이다.C\*\*\*제네릭 교안 바로가기기본적으로 파라미터(text)의 타입은 'hi'가 된다.문자열을 그대로 들고가서 한 바퀴(console.log(), return) 돈 뒤에 반환하는 것까지도 문자열이 된다고 정

프로젝트 실습 파일:실습자료 - learn-typescript - quiz - 2_address-book$ npm i을 이용해서 package.json에 정의해놓은 라이브러리들을 설치하자.tsconfig.json \- "compilerOptions"에서 "noImpl

타입 추론(Type Inference)VSCode 상에서 코드를 작성했을 때 그 코드의 타입이 뭐인지 정의해나가는 방식이 타입 추론이라는 방식이다.타입스크립트가 어떻게 타입을 추론하는지에 대해 알아보자.특정 변수를 선언해서 값을 할당한다거나, 함수의 파라미터의 기본값을

타입 단언(type assertion) \- 타입스크립트보다 개발자가 타입을 더 잘 알고있으니, 개발자가 정의한 타입으로 간주를 하도록 하는 것이 타입 단언이다. \- DOM API를 조작할 때 가장 많이 사용하게 된다.a의 값을 중간에 바꿔도 현재의 타입스크립트

유니온 타입을 사용하게 되면 사용한 타입들의 공통된 속성에만 접근할 수 있다.따라서, 공통되지 않은 속성에 접근하고 싶을 때 '타입 단언'을 사용하면 된다.하지만 타입 단언이 반복되면 가독성이 줄기 때문에 '타입 가드'를 사용하면 좋다.타입가드를 정의함으로써 true,

타입 호환(Type Compatibility) \- 타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미한다.타입 호환이란?타입호환은 기본적으로 오른쪽에 있는 타입이 더 많은 속성을 가지거나 구조적으로 더 컸을 때 왼쪽과 호환이 된다.즉, 구

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

안좋은 예: 좋은 예: 제네릭(Generics) : 타입을 마치 함수의 파라미터처럼 사용하는 것좋은 예:안좋은 예:좋은 예:안좋은 예:좋은 예:안좋은 예:좋은 예:declare 타입스크립트 컴파일러에게 해당 변수가 어딘가에 선언되어 있다고 알려주는 행위. 전역변수를 사

함수의 매개변수가 3개 이상인 경우, 각기 다른 인수로 여러 다른 케이스를 테스트해야 하기 때문에 경우의 수가 매우 많아진다. 따라서 한 개 혹은 두 개의 매개변수가 이상적인 경우이며, 세 개는 피해야 한다. 그 이상의 경우에는 합쳐야 한다. 많은 매개변수를 사용해야

타입스크립트는 getter, setter 구문을 지원한다. 캡슐화한 객체에서 데이터를 접근할 때 객체에서 속성을 찾는 것보다, getter, setter를 사용하는 것이 더 낫다. 그 이유는 다음과 같다.객체 속성을 얻는 것 이상으로 무언가를 더 하고 싶을 때, 코드

클래스의 크기는 책임에 의해 측정된다. 단일 책임 원칙에 따르면 클래스는 작아야 한다.안좋은 예:좋은 예:응집도는 클래스 멤버가 서로에게 연관되어 있는 정도를 정의한다. 이상적으로, 클래스 안의 모든 필드는 각 메소드에 의해 사용되어야 한다. 결합도는 두 클래스가 서로

클래스를 변경할 때는 단 한 가지 이유만 존재해야 한다. 2개 이상일 경우 클래스가 개념적으로 응집되어 있지 않다는 것이 된다. 클래스를 수정하는데 들이는 시간을 줄이는 것은 중요하다. 만약 한 클래스에 너무 많은 기능이 있고 그 안에서 하나의 기능을 수정할 경우, 다

테스트는 배포하는 것보다 중요하다. 테스트 없이 배포한다는 것은 코드가 언제 오작동해도 이상하지 않다는 것과 같다. 훌륭한 테스트 프레임워크 뿐만 아니라, 훌륭한 Coverage 도구를 사용해야 한다.타입스크립트 타입을 지원하는 좋은 자바스크립트 테스트 프레임워크(ht

콜백은 깔끔하지 않고, 많이 중첩된 콜백 지옥을 만들어낸다. 콜백 방식 보다 promise 방식을 사용해주자. (Promise는 ES2015/ES6에서 내장되어있다.)안좋은 예:좋은 예:프로미스는 코드를 더욱 간결하게 해주는 헬퍼 메소드를 지원한다.Promise.all

에러를 뱉는다는 것은 좋은 것이다. 프로그램에서 무언가가 잘못되었을 때 런타임에서 성공적으로 확인되면 현재 스택에서 함수 실행을 중단하고 (노드에서) 프로세스를 종료하고 스택 추적으로 콘솔에서 사용자에게 그 이유를 알려준다.타입스크립트 뿐만 아니라 자바스크립트는 어떤