Typescript란?

What is TypeScript?
타입스크립트는 자바스크립트에 정적 타입 정의(static type definitions)를 더해 구축된 오픈소스 프로그래밍 언어다.
(Microsoft에서 개발하고 관리함)

정적타입언어란?

• 타입스크립트 코드는 자바스크립트 컴파일러나 바벨을 통해 자바스크립트로 변환된다. 이를 트랜스파일(transpile)이라고도 한다. (트랜스파일: 어떤 특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것)

• 타입스크립트는 자바스크립트가 돌아가는 어디서든 돌아간다. (In a browser, on Node.JS or in your apps.)

• 타입스크립트는 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 충분히 지원한다. 타입이라는 특징을 가지고 ES7이하의 표준을 포함하고 있다. 타입스크립트는 ES5를 포함하는 집합이기 때문에 기존의 ES5 자바스크립트 문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 사용할 수 있다.

Typescript의 장점

정적 타입 언어(static type language)이기 때문에 컴파일 시 시간이 조금 걸리더라도 안정성을 보장한다. 자바스크립트의 경우는 동적 타입 언어(dynamic type language)이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않는다. 타입스크립트는 자바스크립트의 이러한 단점을 보완하기 위해서 만들어 졌다. 이러한 이유로 MS에서는 타입스크립트에 “JavaScript that scales(확장된 자바스크립트)”라는 슬로건을 만들었다.

Basic Type

Basic type에는 우리가 javascript에서 흔히 사용하길 예상하는 단순한 단위의 데이터가 있다.

Boolean(boolean), Number(number), String(string), Array(number[], Array)
👉 얘네들은 대부분의 프로그래밍 언어에서 사용되므로 pass!

• Tuple: 고정된 개수와 타입을 갖는 배열을 표현할 수있다.

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

• Enum: 연관된 상수 집합에 친숙한 이름을 부여한다(열거형 타입)

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

• Unknown: 모르는 타입 (unknown인 경우 typeof로 체크를 해줘야함)

if (typeof maybe === "string"){}

• Any: 아무타입이나 가능

const temp:any = 4
temp.toString()

any에 숫자를 할당하고 제멋대로 문자열 함수를 호출해도 타입스크립트가 잡아주지 않으니 주의해서 사용해야한다.

• Void: any의 반대라고도 볼 수 있음, 아무것도 타입이 없을 때 void 씀 (주로 함수리턴타입)

• Null, Undefined 타입도 있는데 별로 안 유용함

• Never: 에러를 리턴하거나, 무한루프여서 아예 리턴하지 않는 경우의 함수 리턴 타입으로 쓰임.

• Object: non-primitive type으로 number, string, boolean, bigint, symbol, null, or undefined가 아님! → 일반적으로 딱히 안 필요함

Type Inference(타입 추론)

타입스크립트는 변수를 초기화하거나 파라미터를 넘겨주거나 함수를 반환할 때 명백한 타입이 지정되지 않은 경우 타입을 추론한다.

let x = 3;
//  ^ = let x: number

let x = [0, 1, null];
//  ^ = let x: (number | null)[]

Type assertion

변수의 현재 타입보다 내가 알고있는 이 타입이 더 명확할 때 type assertion을 한다. (assert가 주장하다라는 뜻)

Type assertions are a way to tell the compiler “trust me, I know what I’m doing.” (야야 나 이거 무슨타입인지 알아. 나 믿어봐.)

as-syntax와 angle-bracket 두 가지로 사용할 수 있음

// '나 이거 확실히 문자열인거 알아'하면서 as 로 string이라고 타입 지정하여 length를 사용
let someValue: unknown = "this is a string";
// as-syntax
let strLength: number = (someValue as string).length;
// angle-bracket
let strLength: number = (<string>someValue).length;

JSX와 같이 쓰일때는 as-style assertion만 사용한다.

(❗️추가적으로 Number, String, Boolean, Symbol, or Object 이런것들은 number, string, boolean 등과 같이 타입으로 할당할 수 있을 것 같아보이는데 쟤네는 타입 할당할 때 쓰지 않는다)

Type guard

타입을 검사하는 메서드를 만들어서 명시적으로 타입을 검사하자!

Type guard를 사용하면 조건문에서 객체의 타입을 좁혀나갈 수 있다.

이 링크가 정리가 깔끔해서 이거 읽으면 된다.

(❗️ 올해 버려야 할 ts 나쁜 버릇 10 가지 4번째에 따르면 Type assertion보다 type guard를 통해 명시적으로 검증하는 것이 추후 유지보수 비용을 더 낮춘다고 한다!)

type guard를 위한 js operator

• typeof

  사용법: typeof operand

  operand의 타입을 string으로 반환 (ex) type of "blabla" === "string" → true)

• instanceof

  사용법: object instanceof constructor

  object가 constructor의 인스턴스이면 true 반환

• in

  사용법: prop in object

  prop이 object의 property면 true 반환

참고자료

TypeScript #1 타입스크립트란 무엇인가?

Typescript 공식문서 - Type Inference