49일차 TIL( TypeScript 주차 시작 / 후발대 모의 면접 강의 )

TypeScript 주차

js 언어의 숙련도가 필요하다,

구글 크롬 - v8 엔진이 내장됨 
js 의 실행 성능을 향상 시킬 수 있게됨
v8의 좋은 성능으로 node.js 가 등장 FE -> BE 제어가 가능하게됨

JS의 맹점 : *동적 타입 언어
실행시간에 결정되는 변수의 타입
약한 타입 체크 let a = 1  /  a = "hello" 도 ㄱㄴ
물렁물렁한 객체
  const = obj = { latitude : 11.5, longitude : 47.1 };
 const result = obj.latitud * obj.longitude; ( 오타가 남)
console.log(result) // 11.5 x Undefined           로 계산해서 NaN 으로 띄워줌 

5XX error는 서버 쪽 에러 트래픽 수용량이 넘쳤을 때도 해당
Node.js의 맹점 : 

이러한 복합적인 이유로 더 나은 안정성을 위해 TypeScript 등장
JS의 모든 기능을 포함하며 추가적인 기능까지 제공
MS사에서 개발한 오픈 소스 프로그래밍

vs code 내에서 오류 캐치를 해줌
컴파일 시간에 오류 캐치 계속 에러 메세지를 띄워줌
휴먼 에러를 원천차단 해줌

함수의 캡슐화를 할 수 있음 (접근성)

 

컴파인러 & tsc
타입 검사 : 컴파일러
숫자가 들어간 a 라는 변수를 문자열로 대입하는 순간 error를 간주하고 error 발생으로 표현
error를 잡아주며 문지기 역할을 한다
(error 메세지의 위치를 자세하게 띄워줌)

컴파일러의 끝은 "최적화" 비효율적으로 작성된 코드를 효율적으로 내부적으로 바꿔준다
코드가 최적화 되면 전반적으로 실행시간이 빨라질 수가 있다

컴파일러란 프로그래밍 언어로 작성돤 소스 코드 -> 다른 프로그래밍 언어로 변화하는 도구
typescript의 컴파일러은 tsc는 JS로 변환해줌
C언어 컴파일러는 C언어로 작성된 소스코드가 기계어로 변환되는 도구
소스코드를 검사해서 소스 코드의 구문과 구조를 검사해서 문자가 없는지 체크해서 유저에게 알려 줌

pc가 말하는 기계어는 인간이 이해하기 힘들다 = 작성하기에 힘들다
다소 낮춘 수준의 프로그래밍 언어가 고안된게 c언어 (기계어) 등장 더 고차원의 Assembly어도 있다
c언어로 작성된 코드를 pc가 이해하기 위해 기계어로 변환해야 되고
이 c언어로 작성된 코드 자체가 instruction set라고 생각하면 이해하기 쉽다
명령어들의 집합소
이렇게 유저 친화적으로 작성하여 컴파일러(번역기의 역할)가 기계어로 번역 pc에게 명령할 수 있다

 
tsc = typescript 컴파일러
typescript 파일을 js로 변환해준다
js 동적언어 ( 인터프리터 언어) 이기 때문에 기계어로 작성을 안해도 된다.
 = 어디서 실행되는지, 실행 주체에 따라서 다른데 node.js나 크롬은 js를 실행할 때 v8엔진이 코드해석 실행을 담당한다
firefox에서는 spiderMonkey가 실행해줘서 기계어로 작성할 필요가 없어.

 

tsc 명령어
tsc --init    : tsconfig.json이 생되는 명령어

tsc index.ts  : index.ts를 컴파일 한다.

tsc src/*.ts  : src 디렉토리 안에 모든 Typescript 파일을 컴파일 한다
  에러가 나면 에러를 전부 출력

tsc index.js --declaration --emit declaration only
  @types 패키지를 위한 d.ts 파일을 생성하는 명령어
  typescript로 작성된 모듈이 아니라 js로 작성된 모듈의 타입 선언을 제공할 때 쓰임


tsconfig.json 해부하기 
compilerOptions - strict    는 true로 설정
compilerOptions - sourceMap 옵션은 개발환경에서 true 로 설정

compilerOptions - target
해당 js 프로젝트 내의 코드들이 어떤 js 버전으로 변환을 할지 ts-compiler로 정하는 옵션

compilerOptions - module
ts를 컴파일한 후에 생성되는 js module 형식을 지정해주면 된다
가져오고 내보내는 방식을 결정 / 프로젝트의 요구사항에 따라 옵션을 지정해주면 돼

 compilerOptions  - outDir 
dist , bin 등 내가 컴파일러를 돌려서 나온 산출물이 어느 디렉터리에 지정될 것인가에 대해 지정해주는 옵션
compilerOptions  - strict
엄격한 타입 검사 옵션
타입검사를 수행하여 코드의 실수를 미리 찾아낼 수 있다

stirctNullChecks
  잠재적으로 null(Undifined)이 될 수 있는 값들에 대해 엄격하게 확인하는 옵션
strictFunctionTypes
strictBindCallApply
stictPropertyInitialization
   이런게 있다~~
noImplicitAny
  함수 - 시그니처 등이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 any 타입을 부여하지 않도록 강제하는 옵션
  "당신 TypeScript 쓰잖아 any 타입은 절대로 허용할 수 없어"

compilerOptions - sourceMap 옵션은 개발환경에서 true 로 설정
  컴파일된 js 파일의 sourceMap을 생성해준다 
  sourceMap = 소스의 단서 , 디버깅을 할 때 출처를 알 수 있게 끔, 에러가 일어났을 때 캐치를 하고 고치기 위함이기에
  코드 디버깅에 도움을 준다 / 프로덕션 환경에서는 용량이나 성능때문에 개발환경에서만 true

 include, exclude
  tsc가 커파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션
  "include" : [*src/**/**]
  "exclude" : ["node_modules", "dist"]

d.tx 파일이란
js 라이브러리도 ts 코드에서 사용할 수 있게 해주는 중요한 역할

@types 라이브러리 등장
외부 라이브러리에 타입 정보를 제공한다
ts에서 js 라이브러리에 대한 타입정보를 제공 해주어 믿고 import해서 쓸 수 있게 해준다

외부 라이브러리의 함수 타입정보
     //                        클래스 타입 정보
    //                         객체 타입 정보

외부 라이브러리의 타입을 추론할 수도 있다

js라이브러리를 ts에서 쓰려면 해당 라이브러리에 대한 .d.ts 파일만 제공해주면 된다
그러면 ts 프로젝트에서도 js 라이브러리를 한 줄도 수정하지 않고 그대로 쓸 수 있다