[TypeScript] TypeScript - Basic 문법

 타입 스크립트 좋더라, 타입 스크립트 쓰세요. 런타임 에러가 확 줄어요..!라는 말을 종종 들으면서도 현재 회사에서 잡고 있는 프로젝트가 전부 JS로 되어 있는 것도 그렇고, 뭔가 JS도 잘 쓰고 있는 마당에 굳이...?라는 생각이 들어서 따로 쳐다보지를 않고 있었다.

 

이젠 리엑트로 프로젝트도 하고 있고, 조만간 RN으로도 하나 진행할 거 같아서 더는 미루지 말고 한번 사용이나 해보자! 라는 생각이 들어서 다뤄보려고 한다.

 

기본적인 내용부터 차근차근 공부해보자.

---

- 그래서 타입 스크립트가 뭐야?

 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 하는 언어로, 자바스크립트의 모든 기능을 포함하면서 타입 시스템을 추가해 준다는 것이 기본 콘셉트이다.

 

이로 인해 큰 규모의 애플리케이션 개발이나 복잡한 프로젝트에서 코드의 안정성과 유지 보수성을 향상할 수 있을 뿐 아니라, 아래 특징과 문법으로 인해 좀 더 객체 지향적인 프로그래밍이 가능하다는 점과 타입 지정으로 인한 런 타임 에러를 줄일 수 있는 등 다양한 장점을 가지고 있는 언어이다.

 

타입스크립트는 Microsoft에 의해 개발되었으며, 오픈 소스 프로젝트이다.

 

- 특징

1. 정적 타이핑 지원: 변수, 매개변수, 객체 속성 등에 타입을 지정할 수 있어, 개발 과정에서 타입 체크를 통한 오류를 사전에 발견할 수 있다.
2. 객체 지향 프로그래밍 지원: 클래스, 인터페이스 등 객체 지향 프로그래밍의 핵심적인 요소들을 사용할 수 있다.
3. 최신 자바스크립트 기능 지원: ES6 이상의 최신 자바스크립트 문법과 기능을 사용할 수 있으며, 구버전 브라우저에서도 호환 가능한 자바스크립트 코드로 컴파일된다.
4. 넓은 생태계와 도구 지원: 자동 완성, 코드 리팩토링, 타입 체크 등 다양한 개발 도구의 지원을 받을 수 있다.

---

- 기본 문법과 자료 구조

타입스크립트의 기본 문법과 자료 구조를 알아보자. 자바스크립트에 능숙하다면, 타입스크립트의 추가적인 타입 선언만 이해하면 된다.

 

변수 선언과 타입

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10]; // 튜플 타입

 

인터페이스

객체의 구조를 정의할 때 사용한다.

클래스와 비슷하게 속성과 메서드를 정의할 수 있지만, 인터페이스는 구현부가 없고, 타입 체킹 목적으로만 사용된다.

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = { size: 10, label: "size 10 object" };
printLabel(myObj);

 

클래스

타입스크립트에서 클래스도 자바스크립트와 비슷하지만, 타입과 접근 제한자(public, private 등)를 추가할 수 있다.

class Animal {
  private name: string;
  constructor(theName: string) {
    this.name = theName;
  }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

let cat = new Animal("Cat");
cat.move(12);

 

함수

함수의 매개변수와 반환 값에 타입을 지정할 수 있다는 점을 제외하면 JS와 동일하다.

function add(x: number, y: number): number {
  return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

 

제네릭

타입을 매개변수처럼 사용할 수 있어, 재사용 가능한 컴포넌트를 만들 때 유용하다.

function identity<T>(arg: T): T {
  return arg;
}

let input = identity<string>("myString");

 

열거형

열거형은 관련된 상수들의 집합을 정의할 때 사용한다.

기본적으로 0부터 시작하지만, 수동으로 값을 할당하여 시작 값을 변경할 수 있다.

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

 

any 타입

타입 체크를 원하지 않는 변수에 사용할 수 있는 타입이다. 기존 자바스크립트 코드를 타입스크립트로 점진적으로 이전하는 경우 유용할 수 있다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

 

Void 타입

어떤 타입도 가지지 않는 빈 상태.

function warnUser(): void {
  console.log("This is my warning message");
}

 

Null과 Undefined

타입스크립트에서 null과 undefined는 각각 null과 undefined만을 값으로 가질 수 있는 타입이다.

strictNullChecks 옵션이 true일 때, 모든 타입에 자동으로 포함되지 않으므로 명시적으로 사용해야 합니다.

let u: undefined = undefined;
let n: null = null;

 

네버 타입(Never)

절대 반환되지 않는 함수의 반환 타입으로 사용된다. 예를 들어, 함수가 예외를 발생시키거나 무한 루프에 빠지는 경우에 해당한다.

function error(message: string): never {
  throw new Error(message);
}

---

유니언 타입(Union Types)

두 가지 이상의 타입 중 하나일 수 있는 값을 나타낸다. 예를 들어, string | number는 값이 문자열 또는 숫자일 수 있음을 의미한다.

function padLeft(value: string, padding: string | number) {
  // ...
}

 

인터섹션 타입(Intersection Types)

여러 타입을 모두 만족하는 하나의 타입을 나타낸다. 예를 들어, Person & Serializable & Loggable은 Person, Serializable, Loggable의 모든 멤버를 가진 타입을 의미한다.

interface Person {
  name: string;
}

interface Loggable {
  log(name: string): void;
}

type PersonLoggable = Person & Loggable;
let john: PersonLoggable = {name: "John", log: (name) => console.log(name)};

 

타입 가드(Type Guards)

특정 범위 내에서 타입이 무엇인지를 보장하는 방법이다. 주로 조건문 내에서 사용된다.

function isNumber(val: string | number): val is number {
  return typeof val === "number";
}

function doSomething(input: string | number) {
  if (isNumber(input)) { // true
    console.log(input.toFixed(2)); // 여기서 input은 number 타입으로 간주
  } else { // false
    console.log(input.charAt(0)); // 여기서 input은 string 타입으로 간주
  }
}

 

옵셔널 속성(Optional Properties)

타입스크립트의 인터페이스나 타입에서, 특정 속성이 선택적으로 필요할 때 옵셔널 속성을 사용할 수 있다. 이는 객체를 생성할 때 해당 속성을 제공할 수도 있고, 생략할 수도 있음을 말한다. 옵셔널 속성은 속성 이름 끝에 ? 기호를 붙여서 표시한다.

interface Person {
  name: string;
  age?: number; // 옵셔널 속성
}

function greet(person: Person) {
  console.log("Hello, " + person.name);
  if (person.age !== undefined) {
    console.log("You are " + person.age + " years old.");
  } else {
    console.log("Your age is unknown.");
  }
}

greet({name: "Alice"});
greet({name: "Bob", age: 30});

 

Type Alias (타입 별칭)

타입 별칭은 특정 타입에 대한 새로운 이름을 정의할 때 사용된다. 기본적인 타입부터 복잡한 객체 구조, 심지어 유니언 타입이나 인터섹션 타입까지, 다양한 타입의 별칭을 생성할 수 있다.

type StringOrNumber = string | number;
type Student = {
  name: StringOrNumber;
  id: StringOrNumber;
};

function logStudent(student: Student) {
  console.log(`Student Name: ${student.name}, ID: ${student.id}`);
}

logStudent({name: "Alice", id: 12345});
logStudent({name: "Bob", id: "s12345"});

---

 확실히, 타입을 깐깐하게 지정하는 문법이 많아서 런타임 에러를 많이 줄일 수 있을 거 같긴 하다. 

 

코드의 가독성이 좀 더 향상되고, 이로써 프로젝트의 안정성을 크게 올릴 수 있는 언어인 건 확실하다.

 

앞으로 자주 사용해서 친해져 봐야겠다...ㅋㅋ