Typescript 핵심 타입 number, string, boolean #99클럽5일차 #TIL

 

 

---

#99클럽 #99일지 #코딩테스트 #개발자스터디 #항해 #TIL

 

✅ 타입스크립트의 타입

 

 

그래서 오늘의 TIL(Today I Learned) 학습 키워드 
 

✨ number, string, boolean

✨ 타입추론

---

 

✅ 타입스크립트의 타입

 

가장 중요한 타입 세가지부터 알아보도록 하겠습니다.

자바스크립트 number 타입

1, 5.3, -10

정수형과(integer), 실수형(float)의 구분이 없습니다.

 

텍스트를 나타내는 string 타입

'hi', "hi", `hi`

템플릿 리터럴 가능합니다.

 

truthy falsy의 boolean타입

true, false

 

function add(n1, n2) {
  return n1 + n2;
}

const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

 

 

 

5+ 2.8을 한다는게 5가 문자열로 설정되어있자 문자열을 연결한다고 생각해서 문자로 변환해서 연결해버렸습니다. 따라서 수학적인 문제가 아닌 논리적인 문제가 발생했는데 이런 문제는 스크립트에서 찾기 힘듭니다. 그러나 타입스크립트의 타입으로 간단하게 해결할 수 있습니다. 이와중에 tsc 컴파일러에서 오류가 생겼네요. 강의와 다르게 tsc를 찾지 못합니다. 이러한 경우는 다음 명령어로 타입스크립트를 설치해야합니다.

 

npm install -g typescript

 

설치전 / 설치후

 

다시 강의를 따라가봅시다. 문자열이 아닌 number 타입으로 설정해주면 되겠지요. 타입설정은 :으로 가능합니다. 두 매개변수는 숫자인 것을 알려줍니다. 다시 실행하려 컴파일 하려하면 number1에서 오류가 발생해서 문제를 컴파일전에 막을 수 있습니다. 하지만 자바스크립트가 실행될 때 브라우저는 타입스크립트를 지원하지 않기 때문에 ✨개발단계✨ 에서만 이를 발견할 수 있습니다. 타입스크립트를 자바스크립트로 컴파일 하기 전, 개발할 때만 도움이 됩니다.

 

✨ That means. TypeScript's type system only helps you during development(i.e. before the code gets compiled)

 

 

런타임 코드가 아닌 컴파일 중에서 오류를 발견할 수 있습니다. 그렇다면 자바스크립트와 타입스크립트의 타입을 알아보겠습니다. 확인에 앞서 자바스크립트의 내장 연산자 키워드 typeof로 타입형을 알아보겠습니다. 자바스크립트로 예외처리를 할 때, 가장 큰 단점은 런타임에만 입력 값을 검증할 수 있습니다.

 

function add(n1: number, n2: number) {
  console.log(typeof number1);
  console.log(typeof number2);
  // 자바스크립트에서 예외처리 하는 방법
  if (typeof n2 !== 'number' || typeof n2 !== 'number'){
    throw new Error('Incorrect input!');
  }
  return n1 + n2;
}

const number1 = "5";
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

 

자바스크립트는 동적 타입을 사용합니다. 처음에는 숫자를 입력했다가, 나중에 문자열을 입력할 수 있습니다. 그래서 타입이 중요한 코드가 있다면 런타임에서 변수가 어떤 타입인지 확인하는 typeof 가 있습니다. 그러나 타입스크립트는 정적 타입을 사용합니다. 개발 시에 변수와 매개변수의 타입 정의가 끝나며 런타임에 변경되지 않습니다. 그러나 자바스크립트로 컴파일 되기 때문에 변경 가능한거 아닌가? 싶지만 새로운 타입의 데이터를 변수에 할당하는 코드를 작성하면 개발 중에 오류가 발생합니다.

 

✨  The key difference is: JavaScript uses "dynamic types" (resolved at runtime), TypeScript uses "static types" (set during development).

 

가장 중요한 점은, 타입스크립트는 코드를 컴파일 할때, 개발 중에만 지원한다는 것입니다. 또한 타입스크립트의 주요 원시 타입은 모두 소문자입니다. 그리고 다른 프로그래밍 언어에서는 5는 정수로, 2.8은 실수로 취급하지만 타입스크립트에서는 모두 float 실수로 처리합니다.

 

function add(n1: number, n2: number, showResult: boolean) {
  // 자바스크립트에서 예외처리 하는 방법
  // if (typeof n2 !== 'number' || typeof n2 !== 'number'){
  //   throw new Error('Incorrect input!');
  // }
  if(showResult){
    console.log(n1 + n2);
  } else {
    return n1 + n2;
  }
}

const number1 = 5;
const number2 = 2.8;
const printResult = true;

const result = add(number1, number2, printResult);
console.log(result);

 

이렇게 showResult를 통해 분기점을 나눌 수도 있습니다. 함수명의 매개변수는 기존의 변수명과 다르게 가져가는게 좋습니다. 아래와 같이 타입스크립트라도, 아래처럼 합쳐버리면 똑같은 오류가 발생할 수 있습니다. 수학적으로 처리해야하는 경우 값을 먼저 계산하는게 오류를 예방할 수 있습니다.

 

 

function add(n1: number, n2: number, showResult: boolean, phrase: string) {
  // 자바스크립트에서 예외처리 하는 방법
  // if (typeof n2 !== 'number' || typeof n2 !== 'number'){
  //   throw new Error('Incorrect input!');
  // }
  if(showResult){
    console.log(phrase + n1 + n2);
  } else {
    return n1 + n2;
  }
}

const number1 = 5;
const number2 = 2.8;
const printResult = true;
const resultPhrase = "Result is: ";

const result = add(number1, number2, printResult, resultPhrase);
console.log(result);

 

 

지금까지 number, boolean, string 핵심 타입을 사용하고 있습니다. 이들을 특별한 식별자로 타입스크립트로 추가된 문법입니다. 이는 타입스크립트 컴파일러가 처리합니다. 컴파일된 파일을 보면 var로 처리되고 있습니다. 그렇다면 어떻게 타입스크립트로 타입을 추가할 수 있는 걸까요?

 

 

 

✨ 타입추론

 

타입스크립트만 이해할 수 있는 식별자로 ✨ 타입을 추론 ✨ 할 수 있습니다. number1은 5를 입력받으니, 자동적으로 number 타입이란걸 추론하고 있습니다. 

 

 

let number1: number = 5; //X
let number2: number; //O

 

명시적으로, 이렇게 선언할 수 있지만 이는 중복되는 작업이라 지양하는 방식입니다. 타입스크립트는 완벽하게 타입을 추론할 수 있기 때문에 값을 할당하지 않는 경우에만 적용하면 좋습니다. 정리하면 타입스크립트의 핵심 기능은 타입을 확인하고 잘못 사용하면 알려주는 기능입니다.