[TypeScript] 타입스크립트를 알아야 하는 이유(feat.JavaScript)

기업 협업 3일차. 이틀이라는 시간 동안 React Native를 익히고 Todo app을 만들어보았다. 이제 TypeScript의 기본 개념을 익혀 RN 프로젝트를 TSX로 바꿔보며 익히는 시간을 가져야겠다.

Type이 중요해 TypeScript

• TypeScript는 JavaScript에 타입을 부여한 언어로 웹, 모바일 앱, NodeJS 프로젝트, IoT 등에서 사용하는 언어다.
• type safety 모드를 사용해 프로그램이 유효하지 않은 작업을 수행하지 않도록 방지한다.
• 즉, Javascript에서 흔히 발생하는 실수를 방지해 더 안전한 프로그램을 구현할 수 있게 도와주는 awesome한 녀석이다.
• 기본적으로 JavaScript를 사용하고, 모든 기능을 포함하고 있는 것과 동시에 TS만이 갖는 새로운 기능이 있는 언어다.

특징

타입 명시(Type annotaion)

• 변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정한다.

funtion add(a: number, b: number) {
  return a + b;
} //데이터 타입: 숫자

console.log (add('3', '5')); //데이터 타입: 스트링 => error

객체지향적

• 객체지향 프로그램 기능을 지원해 컴파일 타임 오류를 잡을 수 있다.
  -> 자바스크립트에서 실행되는 브라우저는 타입스크립트를 인식하지 못해 같은 환경에서 실행될 수 없다. 따라서 타입스크립트를 자바스크립트로 컴파일해준다.
  => 타입스크립트는 프로그래밍 언어인 동시에 컴파일러다.

• 컴파일(compile): 한 언어의 코드를 다른 언어로 바꿔주는 변환 과정

타입 추론(Type Inference)

• 타입스크립트는 정적 타이핑(Static Typing) 기능을 자바스크립트에 제공한다. 정적 타이핑이란 타입을 선언하고 타입에 맞는 값만이 할당/반환되어야 한다는 뜻이다.
• 타입 추론이란 타입이 표기되어 있지 않은 경우 타입을 유추하는 타입 스크립트의 특징이다.

let a = 5, // type: number
a = 'hello'; // type: string => error
변수 a는 number type이다

타입 명시 유형

변수 타입 명시

let age:number = 30; 
let isAdult: boolean = true;
let a:number[] = [1,2,3]
let a2:Array<number> = [1,2,3];
let week1:string[] = ['mon', 'tue', 'wed'];

튜플(tuple)

• 인덱스 별 각기 다른 타입을 반환할 때 쓸 수 있다.

let a:[string, number];
a = ['zlo', 1];

a[0].toLowerCase(); //소문자로 바꿔줌

함수 타입 명시

function getDetails(studentID:number):void /object { 
  return null; //반드시 return 값을 명시해야 함
}  
// 함수 자체의 type도 명시 가능하다(object)

function showError():never {
   throw new Error();
}

function infLoop():never{
    while(true) {
        // do something
    }
}

void: 함수가 아무 값도 반환하지 않음

never: 에러 혹은 영원히 끝나지 않음

• 타입에 대한 정보를 많이 주면 줄수록 좋다. 타입스크립트는 코드를 깔끔하고 효과적이게 쓰고 유지보수할 수 있도록 도와준다.
  => 따라서 'object'는 반환되는 객체의 구조를 타입으로 지정해 써줄 수 있다.

{ 
  studentID: number;
  studentName: string,
  age:number;
}

enum: 비슷한 값들의 묶음 (sting, number 모두 가능)

enum Os {
   Window = 'win', Ios = 'ios', Android = 'and'
}

let myOs:Os;
myOs = Os.window;

• enum에 숫자를 따로 부여하지 않으면 자동으로 0부터 매겨진다.
  => 특정 값만 입력할 수 있게 강제하거나, 값들의 공통점이 있을 때 사용한다.

null, undefined

let a:null = null;
let b:undefined = undefined;

Questions & Learned

• 새로운 웹 프론트엔드 언어는 JavaScript를 기반으로 한다. 어떤 언어를 배우든 JavaScript를 잘 알아야 다른 언어들도 잘 쓸 수 있다.
• TypeScript도 많이 써보고 눈으로 손으로 익혀봐야겠다.
• 마음이 급할수록 천천히 가고, 꾸준히 체력관리 해야겠다.