[TypeScript] 타입스크립트는 왜 좋은 프로그래밍 언어일까?

Typescript 를 쓰는 이유

Javascript는 개발자가 실수를 피할 수 있도록 만들어져 있지 않다.

• “[] + true”와 같은 말도 안되는 코드를 작성해도 Javascript에선 실행 가능
• 함수를 실행할 때 필요한 argument의 개수가 달라도 Javascript에선 실행 가능
• 객체 안에 존재하지 않는 함수를 호출 가능

⇒ 코드가 실행되고 나서야 에러 메시지 확인 가능해서 사용자에게 에러 메시지를 보여줄 수 있기 때문에 코드 실행 전에 이런 에러를 잡기 위해 Typescript를 사용한다.

 

 

어떻게 Typescript가 에러를 발생시킬까?

Typescript는 프로그래밍 언어로서 브라우저는 Typescript가 아닌 Javascript를 이해하기 때문에 Typescript로 작성한 코드가 Javascript로 변환이 되어 실행되게 된다.

 

Typescript가 제공하는 보호장치는 Typescript 코드가 Javascript로 변환되기 전에 발생한다. 즉 Typescript가 먼저 코드를 확인한 다음에 변환된 Javascript에서 에러가 일어나지 않도록 확인해준다.

 

다시 말해, Typescript 코드를 작성해서 컴파일하면 보호장치 없는 일반적인 Javascript 코드가 되지만 Typescript 코드에 에러가 발생할 것 같은 코드를 감지하면 그 코드는 Javascript로 아예 컴파일되지 않는다.

 

 

Type 시스템 (Type 정의 방법)

• 데이터와 변수의 타입을 명시적으로 정의

let b : boolean = false; 
let c : number[] = [1, 2, 3];

• 변수만 생성하면 Typescript가 타입을 추론하여 정의

let a = "hello" 
a = "bye" // 가능, Typescript가 a를 string으로 추론 
a = 1 // 에러 

const player = { 
	name: "name" 
} 
player.name = 1 // 에러 
player.hello() // 에러

 

명시적으로 정의하는 것보다 타입을 추론하도록 하는 것이 더 좋다.

 

 

Typescript의 Type 종류

• number
• string
• boolean
• array
  • number[]
  • string[]
  • boolean[]
• object
  • 주의할 점: 객체 타입은 명시할 때 object라고 명시하면 안되고 object의 타입을 정의해서 명시해줘야 한다.

  const player = {
  	name: "name"
  }
  player.name = "n"  // 에러, object 타입에는 name 요소가 없다고 나온다.
  
  const player : {
  	name: string,
  	age?: number.  // ?: 선택적 변수로 설정, age는 number | undefined 타입
  } = {
  	name: "name"
  	// age는 name과 같이 설정안해줘도 코드가 잘 돌아간다.
  }
  player.name = "n"  // 가능
  
  if(player.age < 10) { }                // 에러, age가 undefined일 수도 있기 때문
  if(player.age && player.age < 10) { }  // 가능

• any
• undefined
• null
• unknown
  • API에서 받아오는 응답의 타입 등 어떤 타입인 지 모르는 변수일 경우에 주로 사용한다.

let a : unknown; 
let b = a + 1; // 에러, 이 변수의 타입을 먼저 확인해야 하고 코드를 짜야한다. 

if(typeof a === 'number'){ 
	let b = a + 1; 
} 

if(typeof a === 'string'){ 
	let b = a.toUpperCase(); 
}

• void
  • 아무것도 return하지 않는 함수에서 사용하는 반환 자료형이다.

function hello() : void { // : void를 직접 명시해줘도 되지만 생략해도 함수의 기본값은 void이기 때문에 상관없다.
	console.log('x');
}

const a = hello();
a.toUpperCase();  // 에러

• never
  • 함수가 return 하지 않을 때 사용한다. 이는 함수가 예외를 throw하거나 프로그램 실행을 종료함을 의미한다.

function hello() : never {
	throw new Error("zzz")
	return "a";  // 에러
}