Typescript

TypeScript

타입스크립트는 자바스크립트 처럼 생겼고 컴파일 했을 때 자바스크립트로 컴파일된다.
자바스크립트는 엄격한 규칙이 없고 사용하기 쉬우며 우리가 원하는 방향으로 수정하기 때문에 인기가 많은데 큰 프로젝트를 하거나 팀으로 일하거나 버그를 최소화하고 싶을 경우에는 단점이 될 수 있다.
타입스크립트는 이러한 단점을 보완하며 언어가 예측 가능하고 읽기 쉬운 코드 등 자바스크립트를 더 잘 사용할 수 있게 한다.
타입스크립트는 typed 언어로 어떤 종류의 변수와 데이터인지 설정해줘야 한다.
만약 해당 타입에 맞지 않게 설정하면 에디터 상에서 오류가 나타나게 된다.

const message: string = "hello world";
console.log(message);

let count = 0;
count += 1;
//다음은 에러가 난다
count = "문자열";

const message: string = "hello world";

const done: boolean = true;

const numbers: number[] = [1, 2, 3]; // 숫자 배열
const message: string[] = ["hello", "world"]; //문자 배열

message.push(1); //숫자는 안된다.

let mightBeUndefined: string | undefined = undefined; //string일수도 잇고 undefined 일수도 있다
let nullableNumber: number | null = null; // number일수도 null일수도 있다

let color: "red" | "orange" | "yellow" = "red"; //red, orange, yello중 하나이다.
color = "yello";
color = "green"; // 에러 발생

특정 변수 또는 상수의 타입을 지정할 수 있고 사전에 지정한 타입이 아닌 값이 설정될 때 바로 에러를 발생시키며 그때는 컴파일이 되지 않는다.

함수에서 타입 정의하기

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

sum(1,2);

타입 스크립트를 사용하면 코드를 작성하는 과정에서 함수의 파라미터로 어떠 타입을 넣어야 하는지 바로 알 수 있다.
가장 우측의 : number 는 해당 함수의 결과물이 숫자라는것을 명시하는 것이다. 이 상태에서 결과물이 number가 아닌 null을 반환한다면 오류가 뜨게된다.


function sumArray(numbers:number[]):number{
  return numbers.reduce((acc, current)=>acc_currend, 0)
}

const total=sumArray({1,2,3,4,5});

타입스크립트를 사용하면 배열의 내장함수를 사용할 때에도 타입 유추가 매우 잘 이루어진다.
함수에서 만약 아무것도 반환하지 않아야 한다면 반환 타입을 void 로 설정하면 된다.

function returnNothing(): void {
  console.log('I am just saying hello world');
}

interface

interface는 클래스 또는 객체를 위한 타입을 지정할 때 사용되는 문법이다.

interface Shape {
  getArea(): number; // Shape interface 에는 getArea 라는 함수가 꼭 있어야 하며 해당 함수의 반환값은 숫자이다.
}

class Circle implements Shape {
  //implements 키워드를 사용하여 해당 클래스가 Shape interface의 조건을 충족하겠다는 것을 명시한다

  radius: number; //멤버변수 radius 값을 설정한다.

  constructor(radius: number) {
    this.radius = radius;
  }

  getArea() {
    return this.radius * this.radius * Math.PI;
  }
}

class Rectangle implements Shape {
  width: number;
  height: number;
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width + this.height;
  }
}

const shapes: Shape[] = [new Circle(5), new Rectangle(10, 5)];

shapes.forEach((shape) => {
  console.log(shape.getArea());
});

멤버 변수를 선언한 다음에 constructor에서 해당 값들을 하나하나 설정해주었는데 타입스크립트에서는 constructor의 파라미터쪽에 public이나 private accessor를 사용하면 하나하나 설정 해주는 작업을 생략할 수 있다.

class Rectangle implements Shape {
  constructor(private width: number, private height: number) {
    this.width = width;
    this.height = height;
  }
  getArea() {
    return this.width * this.height;
  }
}

public으로 선언된 값은 클래스 외부에서 조회할 수 있으며 private으로 선언된 값은 클래스 내부에서만 조회할 수 있다.

일반 객체를 interface로 타입 설정하기

interface Person {
  name: string;
  age?: number; //물음표는 설정해도 되고 안해도 되는 값이라는 의미이다.
}

interface Developer {
  name: string;
  age?: number;
  skills: string[];
}

const person: Person = {
  name: "김사람",
  age: 20,
};

const expert: Developer = {
  name: "김개발",
  skills: ["javascript", "react"],
};

const people: Person[] = [person, expert];

Person과 Developer처럼 형태가 유사한 interface를 선언할 때는 다른 interface를 extends 키워드를 사용해서 상속받을 수 있다.

interface Person {
  name: string;
  age?: number; 
}

interface Developer extends Person {
  skills: string[];
}

Type Alias

type은 특정 타입에 별칭을 붙이는 용도로 사용하며 객체를 위한 타입을 설정할 수 도 있고, 배열 또는 그 어떤 타입이던 별칭을 지어줄 수 있다.

type Person={
  name: string;
  age?:number;
}

//& 은 Intersction으로 두개 이상의 타입을 합쳐준다.
https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types
type Developer=Person &{
  skills:string[];
}

const person: Person={
  name:"김사람"
}

const expert: Developer{
  name:"김개발",
  skills:["javascript", "react"]
};

type People=Person[];//// Person[] 를 이제 앞으로 People 이라는 타입으로 사용 할 수 있다.
const people:People=[person, expert];

type Color ="red" | "orange" | "yellow";
const color:Color="red";
const colors:Color[]=["red", "orange"]

클래스와 관련된 타입의 경우엔 interface를 사용하는 것이 좋고, 일반 객체의 타입의 경우엔 그냥 type을 사용해도 무방하다.
객체를 위한 타입을 정의할 때 무엇이든 써도 상관 없지만 일관성 있게 사용하도록 한다.

Generics

함수, 클래스, interface, type alias를 사용하게 될 때 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법이다.

함수에서 사용하기

객체 A와 객체 B를 합쳐주는 merge라는 함수를 만든다고 할 때 A 와 B가 어떤 타입이 올 지 모르기 때문에 이런 상황에서는 any라는 타입을 쓸 수도 있다.

function merge(a: any, b: any): any {
  return {
    ...a,
    ...b,
  };
}

const merged = merge({ foo: 1 }, { bar: 1 });

그렇지만 이렇게 하면 타입 유추가 모든 깨진것이니 이때는 Generic를 사용한다.


function merge<A, B>(a: A, b: B): A & B {
  return {
    ...a,
    ...b,
  };
}

function wrap<T>(param:T){
  return {
    param
  }
}

const wrapped=wrap(10)

함수에서 Generics를 사용하면 파라미터로 다양한 타입을 넣을 수도 있고 타입 지원을 지켜낼 수 있다.

interface에서 Generics 사용하기

interface Items<T>{
  list:T[;]
}

const items:Items<string>={
  list:["a", "b", "c"]
}

type에서 Generics 사용하기

type Items<T>{
  list:T[];
}

const items: Items<string>={
  list:["a", "b", "c"]
}

클래스에서 Generics 사용하기

Queue는 데이터를 등록할 수 있는 자료형이며 먼저 등록(enqueue)한 항목을 먼저 뽑아올 수 (dequeue)있는 성질을 가지고 있다.

class Queue<T> {
  list: T[] = [];
  get length() {
    return this.list.length;
  }
  enqueue(item: T) {
    this.list.push(item);
  }
  dequeue() {
    return this.list.shift();
  }
}

const queue = new Queue<number>()

벨로퍼트와 함께하는 모던 리액트 Interface vs Type alias in TypeScript 2.7 TypeScript에서 Type을 기술하는 두 가지 방법, Interface와 Type Alias React Typescript Tutorial Creating a Todo List App in React using Typescript (Part 1) React With Typescript Crash Course - How To Use React With Typescript Total React Tutorial - For Beginners - Using TypeScript Use TypeScript with React Components React with TypeScript: Best Practices 10++ TypeScript Pro tips/patterns with (or without) React Styled-component #3 with typescript [TypeScript] Advanced Types(고급 타입) Working with React context providers in Typescript How to use React useRef with TypeScript

TypeScript