결과가 미쳤다. 우선 두 타입이 전혀 다른 형태인데 연산은 왜 된것이며 연산이 됐다쳐도 배열은 어디가고 false는 string형태로 배열의 마지막 요소에 붙어있다. (차라리 에러를 던져주세요..)
런타임에러가 왜 최악의 에러일까?
런타임 에러란 콘솔 안에서 일어나는 에러이다. 이런 에러는 유저의 컴퓨터에서 코드가 실행될 때만 일어나는 에러일 수 있다. 즉, 코드를 실행시키기 전에 에러를 감지하지 못하기 때문에 우선은 실행을 해봐야 에러를 확인할 수 있다.
const cong = { name: "gamza"};
cong.hello(); // 실행시키기 전에 cong이라는 객체에 hello메소드가 없는 것을 확인할 방법이 없다.
//실행 시 TypeError ~ is not a function 를 던진다.
🤸♀️TypeScript가 무엇일까?
TypeScript is JavaScript with stytax for types. TypeScript is a stroinglye typed programming language that builds on JavaScript, giving you better tooling at any scale. (타입스크립트 공홈 설명)
TypeScript 또한 자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다.
C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로, 정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.
강타입 프로그래밍 언어이다. C#, Java, Go, Rust 같은 언어에서 넘어왔다면 프로그래밍 언어라 할 때 컴파일러를 떠올릴 것이다. 이런 언어들은 코드를 다 작성하고 나면 코드를 컴파일 해서 0101로 바꿔주거나 어셈블리 코드, 바이트 코드가 된다( 기계가 실행할 수 있는 다른 종류의 코드로 변환되는 것 )
하지만, 타입스크립트의 경우는 작성한 코드가 자바스크립트로 변환된다. 브라우저가 이해할 수 있는 언어가 자바스크립트이기 때문이다. (Node.js는 타입스크립트와 자바스크립트 둘 다 이해할 수 있다. ) 여기서 컴파일은 그저 작성한 타입스크립트 코드를 일반적인 자바스크립트로 바꿔주는 것이다.
Q. 타입스크립트를 사용하는 이유? 이름 그대로 타입 안전성 때문이다.
🤸♀️타입스크립트를 사용함으로써 얻을 수 있는 장점
자바스크립트 언어의 장점을 최대한 활용할 수 있게 된다.
코드에 버그가 비약적으로 줄어들게 된다.
런타임 에러가 줄어든다.
결론적으로 생산성도 늘어난다.
1.TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다. 2. TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다. 3. TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다.
TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게한다. 참고 링크
기본지식
TS는 최종적으로 JS로 변환된다. 순전한 TS코드를 돌릴 수 있는 것은 deno이나 대중화가 되지 x. 브라우저, 노드는 모두 js파일을 실행한다. (deno는 node만든 사람이 만든 런타임임)
TS는 언어이자 컴파일러(tsc)이다. 컴파일러(정확히 말하면 트랜스파일러)는 ts코드를 js로 바꿔준다.
tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야한다.
단순히 타입 검사만 하고 싶다면 tsc --noEmit (발음: 노 에밋(x) 노 이밋(o) 미국∙영국[iˈmɪt]) 하면된다.
tsc(타입스크립트 컴파일러)의 역할? 1️⃣ js를 ts로 코드 변환 2️⃣타입 검사 *두 역할은 별개이다. 타입 검사에서 에러가 나도 ts 를 js로 변환할 수 있다. ts적으로는 문법적 오류지만 js로는 말이 되기 때문에
tsconfig.json 설정에서 esModuleInterop: true, strict: true 두 개만 켜놓는 편(제로초님) 핵심은 스트릭 모드를 켜두는 것
ts 파일을 실행하는 것이 아니라 결과물인 js를 실행한다.
에디터가 필수가 된다. (VScode , 웹스톰 등등..)
설치 1.에디터 vs code 설치-> 2. node (LTS, not current 저는 v16.15.0임) -> 3. 노드 설치 후 명령프롬프트 cmd 에서 , node -v npm -v 로 제대로 노드와 npm(노드 패키지 매니저)가 설치됐는 지 확인하기 제 npm -veresion은 8.5.5 네요.
프로젝트 세팅
vscode를 열어서 ts파일을 간단하게 생성하고 터미널에 tsc --noEmit 명령어를 입력해주는데 우리의 터미널은 tsc를 이해하지 못한다. 아래의 명령어로 package.json을 생성하고 나면 npm명령어를 사용할 수 있게 된다.
노드의 패키지를 모아둔 저장소를 npm이라고 보면 된다.
npm init -y # package.json 파일 생성
package.json이 생성되면 해당 폴더는 node 프로젝트가 되는 것이다. 이 노드 프로젝트의 설정들을 다 모아둔 것이 package.json이다.
npm i typescript
#타입스크립트 설치->TS를 설치하면 tsc 명령어를 사용할 수 있게 되는데 tsc 명령어가 안 먹을 것이다.
# 💥요즘에는 tsc 앞에 npx를 붙여야 사용가능
npx tsc --init #tsconfig.json 생성
npx tsc --noEmit #이제 명령어가 정상 실행된다. (타입 검사해주는 기능, IDE에서 자동으로 제공한다.)
npx tsc # ts -> js 파일로 변환하는 기능(ts파일에 타입에러가 있더라도 js파일 변환으로는 문제가 없다.
# tsc에는 2가지 기능이 있고 별개이기 때문이라는 것을 명심
node 파일의 메인이 되는 것이 package.json
결론적으로 TS프로젝트를 시작할 때에는 package.json 파일과 tsconfig.json 파일을 무조건 만들고 시작해야한다.
tsconfig.json
esModuleInterop: true
strict: true
tsconfig 옵션 설명1
forceConsistentCasingInFileNames는 항상 켜두는 것이 좋다. 리눅스나 맥에서는 파일을 임포트해올 때 파일명의 대소문자를 구분하여 다른 파일로 인식하는데 윈도우의 경우는, 구분하지 않는다. 그렇기 때문에 배포시 임포트해왔던 파일을 제대로 쓰지않아 에러가 날 수 있으니 항상 켜두는 것이 좋다.
skipLibCheck : true // 패키지는 각각 d.ts 파일을 가지고 있는데 이들의 타입 체킹을 건너뛰는 기능이다. 사용하지 않는 타입까지 검사하면서 진행하면 컴파일러가 느려지기 때문에 실제로 사용하는 것(패키지)들의 타입만 체킹하기 위해서 true로 설정해준다.
+
개인적으로 자바스크립트는 최대한 개발자에게 에러를 던지지 않는 언어인데 처음에는 이게 좋은 줄 알았다.
초반에 접했던 언어는 자바였으니 당연히 이렇게 작성하기 편한 언어가 없다고 생각했다. (멈춰..!)
에러를 던지지 않는 것은 좋은 것이 아니다. 특히나 JS 자체에서 개발자의 잘못된 코드를 보고 멋대로 " 음.. 너가 의도한게 이거려나? " 하고 결과값을 멋대로 던지는 건 실제로 프로젝트를 진행하게 될 때 곤혹스러운 일이 발생할 게 뻔하다.
