[TIL] TypeScript - 1

TypeScript란?

JavaScript는 웹환경에서 WebAssembly와 함께 유이한 언어로 활용되고 있다. Node의 등장으로 이 범위가 네이티브까지 확장되었고, 대형 프로젝트에서도 많이 활용됨에 따라 JavaScript의 활용성이 매우 확장되었다. 하지만 JavaScript는 여러모로 난해한 언어라고 불리는데, 그 이유 중 하나가 타입을 모두 any(Java로 따지만 Object...?)로 처리하고 '일단'은 실행하고 보는 언어의 특성 때문이다. true + [] 같은 문법이 실행될 수 있는 코드이다... 마이크로소프트는 이에 TypeScript로 JavaScript를 강타입언어로 변형시킨 새로운 언어를 개발한다.

TypeScript vs JavaScript

그럼 TypeScript는 어디에서 사용될 수 있을까? 일단 현재 메이저한 자바스크립트 사용처들은 거의 다 사용 가능하다고 봐도 될 듯 하다. 예를 들어, React와 Angular, Vue나 Node.js (Nest.js) 등은 모두 TypeScript를 어떻게든 지원하고 있다. 왜 어떻게든 이란 수식어가 붙었나면 Node.js는 기본적으로 자바스크립트만 해석이 가능하기에 TS->JS 변환해주는 컴파일러를 돌리고 실행하는 프로세스를 사용자가 따로 추가해줘야 하는 경우가 허다하다. 거기에 웹브라우저는 TypeScript를 지원하지 않기에 어떤 TypeScript든 결국은 Runtime은 JavaScript로 돌아가게 되는 것이다. 그렇지만 개발 편의성을 놓고 보면 TypeScript는 수많은 곳에서 이미 대세가 되어가고 있다.
Deno는 이미 TypeScript-native로 방향을 잡고 개발되어가고 있고, (아직은 조금은 JavaScript 의존성이 있다고 알고 있다.) 계속 새로운 Node.js의 후발주자들은 타입스크립트를 네이티브로 지원하지 않을까 한다.

타입 작성

const var_1 : string = "hello";
const var_2 : number = 10;

var_1 = 20; // error!
var_2 = "world"; // error!

각 변수마다 Kotlin처럼 타입을 지정해주면 VSCode 인텔리전스가 변수의 타입을 감시하고 tsc컴파일러 또한 컴파일 타임에서 타입검사를 진행한다. 이로 인해 변수 타입에서 파생되는 에러의 상당수를 잡아낼 수 있다.

여러 타입들

// 인터페이스는 객체의 상세한 타입을 지정할 수 있다. 
interface NameProps {
  first: string;
  last: string;
}

// 해당 인터페이스를 타입으로 사용하는 객체는 무조건 해당 프로퍼티 (first, last)를 지녀야만 한다.
const myName: NameProps = {
  first: "Kevin",
  last: "Choi",
}


// Record 객체는 Mapping을 도와주는 객체다! 자바의 Map<K, V> 느낌
const students: Record<string, number> = {
  "Alice" : 15,
  "Bob" : 18,
}

students["Hans"] = 12;

옵셔널 체이닝과 널 병합 연산자

const getName( user : {first: string; last: string}) {
  console.log(`${user.first}, ${user.last}`);
}
getName(); // js에서 실행한다 가정했을 때, 에러!

위와 같이 적었을 때, 만에 하나 user 객체에 first, last 프로퍼티가 존재하지 않으면 어떻게 될까? 당연히 Undefined 에러가 나올 것이다. 이때 옵셔널 체이닝을 사용하면 정의되지 않은 프로퍼티를 만날 대 undefined를 리턴한다. 이를 활용하는 이유는 런타임에서 타입 체킹를 할 수 있는 기능이기 때문이다.

const getName( user : {first: string; last: string}) {
  console.log(`${user?.first}, ${user?.last}`);
}
getName(); // js에서 실행한다 가정
// undefined, undefined

여기에 undefined를 보기 싫은 경우 뒤에 따라오는 요소를 출력하게 되는 기능이 널 병합 연산자이다.

const getName( user : {first: string; last: string}) {
  console.log(`${user?.first ?? "first"}, ${user?.last ?? "last"}`);
}
getName(); // js에서 실행한다 가정
// first, last

해당 기능으로 기본값을 리턴하는 함수를 제작할 수도 있을 거 같다.