1-1. TypeScript Intro & 기본 타입

TypeScript는?

TypeScript는 언어이면서 도구(컴파일러)이다
TypeScript 코드를 JavaScript 코드로 변환해주는 강력한 컴파일러

도구 : 변수 선언문 끝에 !를 붙이면 이것이 절대 null 이 되면 안된다는 것을 typescript에게 알려줌

 

JS 와 TS 간 공유되는 타입

- number (integer / float 등의 구분은 없음 -> 5 나 5.0이나 똑같음)

- string

- boolean

 

컴파일 해보기

app.ts 파일과 app.js 파일을 같은 위치에 만들고,

tsc app.ts 명령어를 사용하면 TypeScript로 작성된 app.ts 가 JavaScript 코드로 작성된 app.js로 컴파일된다.

 

// app.ts
function add(n1, n2) {
  return n1 + n2;
}

const number1 = '5';
const number2 = 2.8;

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

 

아래는 컴파일된 코드

 

// app.js
function add(n1, n2) {
    return n1 + n2;
}
var number1 = '5';
var number2 = 2.8;
var result = add(number1, number2);
console.log(result);

 

JS의 특성상 string '5' + number 2.8 은 52.8이 된다 (string + number = string)

 

의도치 않은 결과를 방지하기 위해 TypeScript의 type을 부여해준다

 

// app.ts
function add(n1: number, n2: number) {
  return n1 + n2;
}

const number1 = '5';
const number2 = 2.8;

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

 

app.ts와 app.js가 같이 열려있으면 중복 에러가 발생하니, app.js는 닫아준다

 

vs code 상에서 위의 코드는 number1 의 타입 에러를 발생시킨다

 

JS의 타입과 TS의 타입

JS는 동적 타입을 사용한다 (런타임에서 타입이 결정됨)

TS는 정적 타입을 사용한다 (컴파일 중에 타입을 결정)

 

JS에서 타입 검사하는 방식 (런타임 도중)

 

// app.ts
function add(n1: number, n2: number) {
  if (typeof n1 !== '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);

 

브라우저의 JavaScript 엔진에는 TypeScript 기능이 내장되어 있지 않기 때문에 TypeScript는 런타임에서 타입 검사를 수행할 수 없다

 

 

string + number 는 각 타입이 살아서 출력되는 반면,

string + num + num 은 모두 string으로 출력된다

 

// app.ts
function add(n1: number, n2: number, showResult: boolean, phrase: string) {
  if (showResult) {
    console.log(phrase + n1 + n2); // Result is: 52.8
  } 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);

 

3개 이상의 타입이 합쳐진 것은 모두 문자열로 출력된다

 

이것을 방지하기 위해 string + number 형태로 출력해주면 각 타입이 그대로 보존되어 출력된다

 

// app.ts
function add(n1: number, n2: number, showResult: boolean, phrase: string) {
  const result = n1 + n2;
  if (showResult) {
    console.log(phrase + result); // Result is: 7.8
  } else {
    return result;
  }
}

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

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