[TS] 타입스크립트란? (TypeScript)

타입스크립트란?

- 자바스크립트에 타입을 추가해서 확장시킨 것이다.

- 자바스크립트를 이해함으로써 코드를 실행하기 전 에러를 잡거나 고치는 데 시간을 절약해준다.

- 어떤 브라우저나 어떤 운영체제 어떤 실행환경이든 가능하며 완전히 오픈소스다.

타입스크립트는 "Compiled Language"
자바스크립트는 "Interpreted Language"

 

타입스크립트는 컴파일 타임에서 미리 에러를 찾아 고칠 수 있기 때문에 편리하다.

 

타입스크립트에서 바로 해석해서 실행시켜주는 자바스크립트로 컴파일러가 변경해준다!

 

 

✅ 자바스크립트 Type vs 타입스크립트 Type

자바스크립트는 Dynamic (Types resolved at runtime)

개발할 땐 알 수 없고 런타임에 도달해야만 잘못되었는지 알 수 있다!

 

타입스크립트는 Static Types (set during development)

개발하는 중간에 타입을 체크

// JavaScript
function add(n1, n2) {
  if (typeof n1 !== 'number' || typeof n2 !== 'number') {
    throw new Error('Incorrect input!');
  }
  return n1 + n2;
}

const result = add(39, 28);

// TypeScript
function add(n1: number, n2: number) {
  return n1 + n2;
}

const result = add(39, 28);

 

✅ 작성자와 사용자의 관점으로 코드 바라보기

1️⃣ 함수 사용법에 대한 오해를 야기하는 자바스크립트

// JavaScript

// (f2 실행의 결과가 NaN 을 의도한 것이 아니라면)
// 이 함수의 작성자는 매개변수 a 가 number 타입이라는 가정으로 함수를 작성했다.

function f2(a) {
  return a * 38;
}

// 사용자는 사용법을 숙지하지 않은 채, 문자열을 사용하여 함수를 실행했다.

console.log(f2(10)); // 380
console.log(f2('Mark')); // NaN

 

2️⃣ 타입스크립트의 추론에 의지하는 경우

// 타입스크립트 코드지만,
// a 의 타입을 명시적으로 지정하지 않은 경우이가 때문에 a 는 any 로 추론된다.
// 함수의 리턴 타입은 number 로 추론된다. (NaN 도 number 의 하나다.)

function f3(a) {
  return a * 38;
}

// 사용자는 a 가 any 이기 때문에, 사용법에 맞게 문자열을 사용하여 함수를 실행했다.

console.log(f3(10)); // 380
console.log(f3('Mark') + 5); // NaN

 

noImplicitAny 옵션을 켜면

타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 `any`라고 판단하게 되면 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다.

// error TS7006: Parameter 'a' implicitly has an 'any' type.

function f3(a) {
  return a * 38;
}

// 사용자의 코드를 실행할 수 없다. 컴파일이 정상적으로 마무리 될 수 있도록 수정해야 한다.

console.log(f3(10));
console.log(f3('Mark') + 5);

number 타입으로 추론된 리턴 타입

// 매개변수의 타입은 명시적으로 지정했다.
// 명시적으로 지정하지 않은 함수의 리턴 타입은 number 로 추론된다.

function f4(a: number) {
  if (a > 0) {
    return a * 38;
  }
}

// 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했다.
// 해당 함수의 리턴 타입은 number 이기 때문에, 타입에 따르면 이어진 연산을 바로 할 수 있다.
// 하지만 실제 undefined + 5 가 실행되어 NaN 이 출력된다.

console.log(f4(5)); // 190
console.log(f4(-5) + 5); // NaN

 

strictNullChecks 옵션을 켜면

모든 타입에 자동으로 포함되어 있는 `null` 과 `undefined` 를 제거해준다.

number | undefined 타입으로 추론된 리턴 타입

// 매개변수의 타입은 명시적으로 지정했다.
// 명시적으로 지정하지 않은 함수의 리턴 타입은 number | undefined 로 추론된다.

function f4(a: number) {
  if (a > 0) {
    return a * 38;
  }
}

// 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했다.
// 해당 함수의 리턴 타입은 number | undefined 이기 때문에,
// 타입에 따르면 이어진 연산을 바로 할 수 없다.
// 컴파일 에러를 고쳐야하기 하기 때문에 사용자와 작성자가 의논을 해야한다.

console.log(f4(5));
console.log(f4(-5) + 5); // error TS2532: Object is possibly 'undefined'.

 

noImplicitReturns 옵션을 켜면

함수 내에서 모든 코드가 값을 리턴하지 않으면, 컴파일 에러를 발생시킨다.

모든 코드에서 리턴을 직접 해야 한다.

// if 가 아닌 경우 return 을 직접 하지 않고 코드가 종료된다.

// error TS7030: Not all code paths return a value.
function f5(a: number) {
  if (a > 0) {
    return a * 38;
  }
}

object literal type

function f7(a: { name: string; age: number }): string {
  return `이름은 ${a.name} 이고, 연령대는 ${
    Math.floor(a.age / 10) * 10
  }대 입니다.`;
}

console.log(f7({ name: 'Mark', age: 38 })); // 이름은 Mark 이고, 연령대는 30대 입니다.
console.log(f7('Mark')); // error TS2345: Argument of type 'string' is not assignable to parameter of type '{ name: string; age: number; }'.

나만의 타입을 만드는 방법

interface PersonInterface {
  name: string;
  age: number;
}

type PersonTypeAlias = {
  name: string;
  age: number;
};

function f8(a: PersonInterface): string {
  return `이름은 ${a.name} 이고, 연령대는 ${
    Math.floor(a.age / 10) * 10
  }대 입니다.`;
}

console.log(f8({ name: 'Mark', age: 38 })); // 이름은 Mark 이고, 연령대는 30대 입니다.
console.log(f8('Mark')); // error TS2345: Argument of type 'string' is not assignable to parameter of type 'PersonInterface'.