TIL : Typescript

interface

: 다른 언어에서는 클래스를 정의하는 용도로 사용하지만, typescript에서는 좀 더 다양한 것들을 정의한다.

• 선택속성 : 선택적으로 넣어도 되고 안넣어도 되는 값에 옵셔널 파라미터를 주게되면, 값이 없어도 오류가 안남

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

const person1: Person = { name: "js"};
const person2: Person = { name: "js", age: 34 };

• Read Only 속성 : 인터페이스를 객체를 처음에 생성할 때만 할당할 수 있고, 그 이외에는 변경할 수 없는 속성을 의미

//프로퍼티 앞에 readonly를 작성
interface Person {
  readonly name: string;
  age?: number;
}
const person1: Person = { name: "js" };
person1.name = "chh"; //읽기 전용 속성이므로 값을 할당할 수 없다.

• index type : 인터페이스에서 속성의 이름을 구체적으로 정의하지 않고 어떤 값의 타입만 정의하는 것을 의미함.

• interface 확장

interface Person {
  name: string;
  age: number;
}
interface Korean extends Person {
  birth: "KOR";
}

//아래코드처럼 기존 Person인터페이스에 birth에 대한 내용이 추가된 형태이다.
interface Korean {
  name: string;
  age: number;
  birth: "KOR";
}

• intersection type

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

interface Developer {
  name: string;
  skill: string;
}

type DevJob = Person & Developer;
//위 처럼 적으면 DevJob은 세가지 속성을 가지게 된다.
const nbcPerson: DevJob = {
  name: "a",
  age: 20,
  skill: "js",
};

---

제네릭(generic)

타입을 마치 함수의 파라미터처럼 사용하는 것.

function getText<T>(text: T): T {
  return text;
}

getText<string>("hi"); // T에 string이 들어가면서 , text로 string타입이 반환된다.
getText<number>(10); //T에 number 들어가면서 , text로 number타입이 반환된다.
getText<boolean>(true); // T에 boolean 들어가면서 , text로 boolean타입이 반환된다.
//여기서 <>안에 타입(제네릭)은 생략이 가능하다. => 왜냐하면 파라미터에 들어간 값의 타입으로 T에 할당되기 때문이다. (아래처럼 작성해도 되지만, 코드가 복잡한경우에는 제네릭을 이용해서 타입을 명시적으로 해주는 것이 좋다.)

getText("hi");
getText(10);
getText(true);

위와 같이 작성된 함수는 동작은 하지만, 어떠한 값이 들어가도 되며, 어떠한 반환값도 반환될 수 있다. 그러므로 아래의 의도와는 다른 함수이다.
string자료형이 들어오면 string을 반환한다고 알려주고 싶고, number자료형이 들어오면 number가 반환한다고 알려주고 싶다.
그럴때 쓰는 게 generic이다.

• 제네릭 제약조건

interface LengthWise {
  length: number;
}
//length는 숫자라는 정보를 담은 LengthWise로 인터페이스를 확장해서 오류를 없앨 수 있다.
function printOut<T extends LengthWise>(input: T): T {
  console.log(input.length); 
  // Error: T doesn't have .length
  return input;
}

//printOut(10); //숫자타입의 length가 존재하지 않으니까 error
printOut({ length: 0, value: "hi" }); 
//object를 넣었을 경우, object안에 length가 있어서 오류가 안남.

---

타입추론

: 타입을 작성하지 않았음에도 불구하고, aaa와 bbb에 각각 넣었을 경우, 넣은 값을 통해 자동으로 type을 추론해준다.

let aaa = 123;
let bbb = "abc";

//그래서 aaa와 bbb에는 이후로 다른 타입을 넣을 경우 error가 발생한다.

aaa = "abc"; //type이 number라 error
bbb = 234; //type이 string이라 error

// let의 경우 변수에 재할당이 가능하기 때문에 어느정도 융통성있게 추론이 가능하다.

// const는 재할당이 불가능하기 때문에 let 보다 엄격하게 type이 결정된다.
const c1 = 123; 
//type이 123 =>number라는 type을 좁혀서 c1의 타입을 number인 123으로 추론한 것.
const c2 = "abc"; 
//type이 "abc" =>string이라는 type을 좁혀서 c2의 타입을 string인 "abc"로 추론한 것.

---

오늘 타임어택으로 리액트 과제를 타입스크립트로 리팩토링하는 과정에서, 오류도 많이 났어서 해결하는 과정들을 정리해보려 했지만, 결과적으로 흰화면이 나와서, 잔 오류를 해결한다고 근본적인 실수를 한 것이 아닐까? 하는 생각이 들어서, 좀 더 고쳐본 다음에 정리해 봐야 겠다 !