typescript

리액트, 노드 개발자 채용공고에서 타입스크립트가 필수거나 우대사항에 있는 것을 심심찮게 볼 수 있었다. 취직 확률을 높이기 위해서는 학습이 필수라고 생각했다.깃허브에서 자바스크립트 베이스 프로젝트들을 보면 꽤 많은 프로젝트들이 타입스크립트로 작성되어 있음을 확인할 수

tsconfig.jsontsconfig.json 파일 내부에는 sourceMap 속성이 있다. 이 속성을 활성화시키면 컴파일된 js 코드와 ts 코드를 매핑하여 컴파일된 자바스크립트 코드를 디버깅할 때 typescript 코드로 확인할 수 있게 해준다.sourceMap

중요!이 과정 이전에 tsconfig.json에서 sourceMap 속성이 활성화되어 있어야 합니다. 그래야 디버거가 자바스크립트 코드와 타입스크립트 코드를 매핑하여 디버깅할 수 있습니다.본격적인 디버깅 이전에 launch.json 이라는 파일을 생성할 것입니다.이 파

변수 a는 숫자 123456789를 할당받았다. 여기서 타입스크립트 컴파일러는 a가 어떤 데이터 타입인지 할당된 값을 통해 추론할 수 있다.위와 같이 작성하여도, 타입 추론 때문에 타입스크립트 컴파일러는 a의 데이터 타입을 number로 정하게 된다.변수 b에는 어떠한

타입스크립트에서는 새로운 데이터 타입을 지원한다. 튜플은 정해진 길이의 배열과 그 배열의 각 요소들에 대해 타입을 지정한다. 타입스크립트의 튜플은 컴파일된 자바스크립트 코드에서 평범한 배열이다.x가 실제로는 배열이기 때문에 push 메서드가 지원돼고 타입스크립트 컴파

위의 예제 함수 calculateTax는 숫자 0을 리턴하고 있고 f(x): number {} 형태로 작성되어 있다. 여기서 number의 의미는 number 타입의 데이터를 리턴하겠다는 의미이며 함수를 만들 때 후에 리턴되는 데이터의 타입이 다른 것이 되는 것을 미

본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.nodemon은 글로벌 모듈이 아니어도 상관없다. 글로벌 설치된 nodemon을 지우고 npm i no

employee 객체에 name 프로퍼티를 만들어보자.? optional chaining 연산자를 써서 name프로퍼티의 부재에 대한 에러를 회피하지만name프로퍼티가 부재할 경우에 employee 타입에 name: string을 설정해둔 것이 말이 안되기 때문.만약

위 예시 코드는 type narrowing을 통해 엄격히 함수의 작동법을 통제하고 있는데 type narrowing을 이해하기 위해 위 코드를 다시 짜야한다.이 경우에는 원하는 메서드나 프로퍼티에 접근할 수 없게 되므로 number던지 string이던지 둘 중 하나로

타입의 값을 명시적으로 지정하여 특정 값만 할당할 수 있도록 제한을 둘 수 있는 타입 방식이다.type alias를 이용하여 여러 다른 변수에 똑같은 타입 지정을 하면 생산성이 증대된다.greet함수의 인자에 타입 string이 지정되어 있으므로 null값을 패스하는건

개발환경에서 에러를 잡는 것을 도와준다코드 분석을 위한 type annotation 사용개발 중에만 작동 (프로그램 실행때는 자바스크립트로 이미 컴파일된 상태)타입스크립트 컴파일러는 성능 최적화에 관여하지 않음 (다른 언어들의 컴파일러와 다른 부분)타입스크립트 코드 -

logTodo의 1번째 인자로 false가 패스되었다. logTodo 선언시에는 1번째 인자가 title이었는데 title에 문자열 데이터를 받는 것을 의미했다면 위 코드는 원치 않는 결과를 로깅하게 될 것이다.title과 completed가 뒤바뀐 결과를 보여줄테니

하나의 값이 가지는 프로퍼티와 함수들을 쉽게 참조할 수 있도록 하는 방식hello는 string타입이다. 그래서 hello라는 값은 이 string 타입을 통해 프로퍼티와 함수들을 가지게 되며 . 하나를 통해 프로퍼티, 함수들을 참조할 수 있게 된다.인터페이스를 통해

type과 interface의 차이점이 살펴보는 주 목적이나 어떤 부분이 같은 것인지도 확인해보려고 한다type alias로 작성된 PointType과 인터페이스 키워드로 작성된 PointInterface가 있다.위 코드에서는 두 함수가 보이고 각 함수의 매개변수 타입

타입스크립트 인터페이스에 메서드를 등록하는 방식이 두 가지가 있다.Method Declaration타입스크립트 인터페이스에서는 메서드의 오버로딩이 가능하다.오버라이딩은 존재하지 않는다. 왜냐하면 메서드의 바디는 구현하지 않기 때문이다.오버라이딩 / 오버로딩오버라이딩은

레코드 타입은 특정하게 중첩된 객체 1개 이상을 가지는 객체에 대응하는 타입이다.그 객체는 아래와 같은 모습이다.

들어가기에 앞서 용어 정리구조적 타이핑 Structural Type System타입 A 와 B가 있다고 가정하고 A 와 B를 비교할 때 A와 B가 서로 관련이 없는 독립적 타입이더라도 타입 내부의 구조에 같은 부분이 있다면 같은 타입으로 보는 타입 시스템타입스크립트가

위 코드의 target 타입을 보면 유니온 타입이 명시적으로 지정되어 있으나 Machine 타입과는 전혀 관련이 없는 독립적인 타입으로 Machine 타입에 변경이 생겼을 경우에도 개발자가 일일이 찾아서 유니온 타입을 변경해줘야한다. 타입 체커는 개별 타입으로 인식해

tsconfig.jsonindex.ts에 아래의 에러가 발생.타입 체크를 통과하지 못했지만 컴파일은 진행된다.타입스크립트와 기존의 정적 타입 언어들의 다른점은 타입스크립트는 타입 체크와 컴파일이 독립적으로 작동. 기존 정적 타입 언어들은 의존적으로 작동하여 타입 체크

Object.keys()는 객체의 키값들을 배열에 집어넣고 그 배열을 리턴해주는 메서드. 위 메서드는 아래와 같은 패턴으로 자주 쓰였다. 위 코드를 작성해보니 에러가 발생하는 것을 발견했다. obj의 타입을 보면 키값은 string 리터럴로 되어있다.

Cage 인터페이스에 animal속성은 readonly가 아니므로 수정가능한 상태다.

readonly 키워드를 모든 속성에 지정해주는 작업을 반복하는 걸 줄여주는 법이 있었다..Readonly 유틸리티 타입을 사용하는 것이었다.tsc의 타입 체크를 확인해보면 아래와 같이 의도한대로 모든 속성에 readonly 가 적용되었음을 알 수 있다.

자바스크립트에서 이벤트리스너를 사용할때 e.target.innerText 를 사용한 적이 있던 기억이 있었기에 타입스크립트에서 아래와 같은 코드가 정상작동하리라 생각했다.위 코드에서는 innerText 부분에서 에러가 발생했는데 이유는 e.target의 타입이 Even

interface로 선언된 타입의 경우 implicit index signature 가 지원되지 않는다고 합니다.type alias의 경우는 암묵적 index signature 가 적용되어 index signature를 명시적으로 선언하지 않아도 타입 체크를 통과하는

takeArray 함수 안으로 들어간 people 배열은 readonly로 인식되고 변경 불가능해진다. 이렇게 함수 내부에서 인자에 대해 readonly를 걸어주면 매번 데이터를 만들때마다 readonly 타입을 지정해줄 필요가 없다. 효율적인 함수 설계라고 생각이 든

또 다른 방식으로는두번째 타입이 가독성이 떨어지고 내장되어 있는 ReadonlyArray 타입이 더 가독성이 좋다고 생각한다.