하이고니의 개발 스토리

lib lib DOM으로 작업을 수행하는 항목들에 타입스크립트 노드를 지정하게 해주는 옵션 button에 왜 에러 표시줄이 뜰까? button을 진짜 찾은 것인지의 여부를 타입스크립트가 확신하지 못하기 때문이다. 이렇게 라인의 끝에 느낌표를 붙여 해결해줄 수 있다. '느낌표'는 버튼이 존재하니 걱정하지 말라고 타입스크립트에게 알려주는 것이다. Q: 그럼 document에는 왜 에러가 발생하지 않을까? querySelector라는 메서드를 가지고 있다는 것은 또 어떻게 아는 걸까? 버튼이 addEventListener 메서드를 가지고 있다는 것은 또 어떻게 알고?? A: 바닐라 자바스크립트에서는 이것들을 당연하다고 여길 수 있다. 타입스크립트에서는 무조건적으로 브라우저만을 위한 작업을 하는 것은 아니다. ..

디버깅 타입스크립트를 컴파일한 뒤 lite-server로 개발 과정을 체크할 때, sources 탭을 보면 js 파일들만 있는 것을 확인할 수 있다. tsconfig.json 파일을 조금 수정하면 ts 파일을 디버깅 할 수 있다. { "compilerOptions": { /* Basic Options */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system',..

watch mode 타입스크립트를 사용하면 변경 사항이 생길 때마다 터미널에 tsc 파일명.ts을 입력해줘야 브라우저 상에서 제대로 작동하는지 확인할 수 있다. 이 작업이 번거롭다면 watch mode를 사용하면 된다. 터미널에 tsc 파일명.ts -w 혹은 tsc 파일명.ts --watch 를 입력하면 다음과 같은 문구가 출력되고 변경 사항이 생길 때마다 자동으로 컴파일된다. 하지만 하나의 파일에만 적용할 수 있는 모드이기 때문에, 큰 프로젝트에서는 잘 사용되지 않는다. 그러면 파일이 여러 개일 경우에는 어떻게 할까? 두 개 이상의 ts 파일의 컴파일이 필요한 경우에는 터미널 상에 파일들이 존재하는 폴더(정확한 경로를 지정해야 함)에서 tsc --init 를 입력한다. 그러면 tsconfig.json ..

union function combine(input1: number, input2: number) { const result = input1 + input2; retrun result; } const combinedAges = combine(30, 26); console.log(combinedAges); const combinedNames = combine("Max", "Anna"); console.log(combinedNames); 위와 같은 함수에서, combineNames는 작동하지 않는다. 매개변수의 타입이 number로 명시되어 있기 때문. 이럴 때 union 타입을 사용할 수 있는데, | 기호로 여러 타입을 연결해주면 된다. 하지만 타입스크립트는 입력될 값이 number와 string이라는 것..

string, number 타입스크립트에서는 위와 같이 함수의 인자로 들어올 타입을 미리 정할 수 있다. 그리고 함수를 호출할 때 타입이 맞지 않다면 문법 오류로 표시된다. 이는 런타임까지 가지 않고도 개발자가 오류를 확인할 수 있다는, 매우 강력한 장점이다. (자바스크립트에서는 위와 같이 if 조건문으로 에러 처리를 해주고, 런타임 에러를 발생시킨다.) 자바스크립트의 타입은 동적 타입이다. 숫자를 예상한 자리에 문자열이 입력돼도 전혀 문제가 되지 않는다는 것이다. 그래서 자바스크립트에서는 특정 타입이 필요한 코드의 경우, 런타임에서 체크할 수 있도록 typeof 연산자를 사용한다. 반면 타입스크립트의 타입은 정적 타입으로, 이는 개발 도중에 변수와 매개변수의 타입을 정의한다는 것을 의미한다. 런타임 중..

타입스크립트: 자바스크립트 슈퍼셋 타입스크립트는 자바스크립트라는 언어를 사용해 새로운 기능과 장점을 추가한 것이다. 브라우저는 타입스크립트를 실행할 수 없다. 예를 들어 node.js는 타입스크립트를 실행할 수 없다. 자바스크립트를 실행할 수 있는 환경에서는 타입스크립트가 지원되지 않는다. 이게 뭔 개소리일까? 더 나은 버전인데 실행은 안된다? 그리고 타입스크립트가 결국 일반적인 자바스크립트라면, 어떻게 새로운 기능을 추가할 수 있다는 것인가? 타입스크립트는 언어면서 도구다. 즉, 코드를 시행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 컴파일러인 것. 타입스크립트 컴파일러는 보다 나은 구문을 제공하고, 작업을 쉽게 수행할 수 있게 해준다. 그를 통해 복잡한 자바스크립트 문법을 멋지고 쉽게 컴파일할 ..