TIL | TypeScript로 타입 에러 체크 / node 환경에서 TypeScript 사용하기 / TypeScript와 jsconfig

📍 TypeScript로 타입 에러 체크하기

✔ 코드를 작성할 때 formatting과 linting도 중요하지만 한가지 더 중요한 것은 Type checking이다
Type checking이란? 자바스크립트는 동적으로 타입이 정의되는 언어로 실행시간에 가서야 작성 된 변수의 타입을 알게 된다 그래서 미리 에러가 나지 않는다
( 실행 전에는 타입에러를 알 수가 없다 즉, 코드로 작성한 변수의 타입이 맞지 않아도 실행되는 순서에서 작성된 변수 중 타입 에러 있다는 사실을 알 수 있다는 것이다 )

• ❗ 강력하게 타입 체크를 하는 언어들은 컴파일 과정을 거치고 미리 Type check를 해두기 때문에 에러가 잘 나타나지 않다
• 하지만 자바스크립트에서는 그런 문제가 굉장히 자주 일어난다
• 그런 문제를 TypeScript를 사용해서 Type checking를 할 수 있다

TypeScript는 기본적으로 javascript로 컴파일되는 언어로, javascript에 타입 정의만 얹어놓은 것이라고 보면 된다 ( 타입 정의 빼면 그냥 javascript )

const someString = 'Hello'
const result = Math.log(someString);
console.log(result);

• 위와 같이 말도 안되는 코드를 작성하고 결과를 보면 NaN이 나온다 즉, 이상한 연산을 했다는 뜻이다
• 하지만 어디가 잘못된건지 정보를 알 수는 없다
• 이러한 문제점을 해결하기 위해 TypeScript를 설치하면 간단하게 해결이 된다
• npm install --save-dev typescript

// @ts-check
const someString = 'Hello'
const result = Math.log(someString);
console.log(result);

• typescript를 설치하고 // @ts-check 라는 문장을 위에 추가해준다면 typescript가 낸 빨간줄 에러와 함께 문제를 확인할 수 있다
  
  

📍 node 환경에서 TypeScript 도움 받기

• TypeScript가 Node 환경에서 작동하게 하려면 패키지를 설치해야한다
• npm install --save-dev @types/node
  • 이 패키지에 들어있는 정보는 Node에서 주로 사용되는 객체들의 정보가 담겨있다

// @ts-check
// Formatting, Linting, Type Checking
// Formatting : Prettier
// Linting : ESLint
// Type Checking : TypeScript
const http = require('http')
http.createServer((req, res)=>{
	res.statuscode = 200
  	res.end('hello')
})
const port= 8000
server.listen(port, ()=>{
	console.log("the server is listening at port : ${port}.")
})

• 이 코드를 실행시킨다면 TypeScript에서 statusCode 이렇게 써야한다고 에러를 잘 잡아준다
• 사소한 에러사항도 잘 캐치할 수 있게 된다
  
  

📍 TypeScript와 jsconfig

TypeScript를 써서 프로젝트를 진행하려면 설정이 필요한데, TypeScript의 설정파일을 작성해야한다

• jsconfig.js

{
	"compilerOptions":{
    	"strict" : true
    }
    "include" : [
    	"src/**/*"
    ]
}

• ts.js
  • 여기에서 위에 작성한 jsconfig.js 테스트

// @ts-check
const x = null //에러