졸업 후 지난 몇 달 동안 저는 대부분의 시간을 자바스크립트로 코딩하는 데 보냈습니다. 나는 그 과정에서 많은 재미를 보았고 많은 것을 배웠으며 다운도 있었습니다. 오해하지 마십시오. 그 중 하나는 유형 오류입니다. 그들은 엄청난 양의 좌절을 일으키고 고치는 데 시간이 걸립니다.

구조용 TypeScript

나는 솔직히 오래 전에 타이프 스크립트에 대해 들었고 계속 무시했습니다. 나는 그것에 대해 많은 오해를 가지고 있었다. 나는 그것이 그 자체로 언어이고 OOP를 지향하며 Java와 같지만 웹 개발자를 위한 것이라고 생각했습니다. 현대 타이프스크립트가 얼마나 놀라운지에 대한 이야기를 본 후, 나는 즉시 그것에 대해 배우기 시작했습니다. 오늘은 내가 그것에 대해 좋아했던 몇 가지 개념을 여러분과 공유하겠습니다.

즉, 나는 무언가를 벗어 났을 수 있으며 어떤 비판도 높이 평가할 것입니다. 세상과 무언가를 공유하기로 결정한 것은 이번이 처음이므로 귀하의 도움으로 개선할 수 있습니다. 감사합니다. 이제 실제 비즈니스로 이동하겠습니다.

저게 뭔데?

저는 TypeScript를 자바스크립트의 방패로 생각하고 싶습니다. 유형을 추가하고 편집기에서 이러한 오류를 조기에 캡처할 수 있으며(저는 Vscode를 사용합니다.) 생산성을 높이는 무료 IntelliSense도 얻을 수 있습니다. API가 더 효율적입니다.



여기에는 id를 숫자로 취하고 집 주소를 문자열로 반환하는 함수가 있습니다. Typescript는 이 함수를 호출할 때마다 규칙을 준수하는지 확인합니다.
이 규칙은 변수와 클래스에도 적용됩니다.
참고로, Typescript는 대부분의 경우 유형을 올바르게 유추하므로 명백한 유형에 대한 유형을 작성할 필요가 없습니다.
여기에서 유형 유추에 대해 자세히 알아볼 수 있습니다.
https://www.typescriptlang.org/docs/handbook/type-inference.html

마법의 기능:

유형 쿼리:

우리는 typeof 연산자가 피연산자의 유형을 반환하기 위해 javascript에서 사용된다는 것을 알고 있습니다. Typescript에서 키워드 typeof는 매우 다릅니다. 방법을 살펴보겠습니다.

 const house = { id: 34345, address: " 3B Col, 90000 ",members: 4 }

이 코드를 복사하여 .ts 파일에 붙여넣으면 typescript가 집의 유형으로 { number, string, number }를 추론하는 것을 볼 수 있습니다. 이것이 제가 원하는 것입니다. typeof 키워드로 해당 유형을 쉽게 얻을 수 있습니다.

const house =  { id: 34345, address: " 3B Col, 90000 ",members: 4 };
type House = typeof house;

멋진! 이제 코드에서 사용할 수 있는 집 유형이 있습니다.

유형 조회

우리 모두는 객체로 많은 작업을 합니다. 값을 얻기 위해 객체와 키를 전달하는 함수를 작성하고 싶다고 가정해 보겠습니다.

function getProp<T>(obj: T ,key: string){
  return obj[key]
}   

그러나 이것의 문제는 typescript가 반환 값을 알아낼 수 없다는 것입니다. 그것은 any의 유형이 될 것이고 우리는 그것을 원하지 않지만 typescript가 반환 값을 알고 있는지 확인하는 데 사용할 수 있는 방법이 있습니다. 어떤 유형의 키를 전달할 수 있습니까?

keyof 연산자

집 개체를 고수하고 그것을 기반으로 합시다.

const house = { id: 34345, address: " 3B Col, 90000 ",members: 4 }
type House = typeof house;

keyof를 사용하여 객체의 키를 입력할 수 있습니다.

type HouseKeys = keyof House;  // "id" | "address"| "members"

여전히 내 설명이 혼란스럽다면 Marius Schulz blog about it을 확인하는 것이 좋습니다.

이제 함수를 다시 작성해 보겠습니다.

function getProp<T, P extends keyof T >(obj: T ,key:P ){
  return obj[key]
}   

반환된 유형으로 T[P]를 전달할 수 있지만 TypeScript는 이를 알아낼 만큼 영리합니다. 이제 반환된 값 유형, 키도 입력되었으며 멋진 IntelliSense를 보너스로 얻을 수 있습니다.

이 글이 조금이나마 도움이 되셨기를 바라며, 개선해야 할 부분에 대한 의견을 남겨주세요. 글의 구조가 조금 불안하지만, 더 잘해나갈 것을 약속드립니다.

Typescript에 대해 자세히 알아보기

TypeScript Evolution by Marius Schulz .

리소스를 찾으면 더 많은 리소스를 공유하겠습니다.