TypeScript 팁과 요령 > 시티즌 인사이트

본문 바로가기

IT&개발 정보 TypeScript 팁과 요령

페이지 정보

작성자 GrapeCity 작성일 22-01-03 10:51 조회 1,421회 댓글 0건

본문

TypeScript는 JavaScript의 상위 집합입니다. JavaScript와 비슷하지만 훨씬 뛰어난 기능을 갖추고 있습니다.


Vanilla JavaScript는 동적 유형 언어입니다. 예를 들어 숫자 유형을 변수에 할당한 다음 나중에 코드에서 동일한 변수에 문자열을 할당하면 JavaScript가 그대로 컴파일합니다. 프로덕션 중에 뭔가가 손상되면 오류가 발생합니다.


TypeScript와 같은 정적 입력 도구 사용에 반대하는 경우에는 몇 가지 유형 검사를 제공하는 JavaScript 린터를 사용할 수 있습니다. 린터는 예제에서 오류를 포착하는 데 도움을 주었을 것입니다. 하지만 린터에는 나름의 한계가 있습니다. 예를 들어 린터는 합집합 유형을 지원하지 않으며(이 점에 대해서는 뒷부분 참조) 복잡한 개체 구조를 정리하지 못합니다.


TypeScript는 더 많은 유형 기능을 JavaScript에 제공하여 코드베이스를 보다 잘 구조화할 수 있도록 합니다. TypeScript는 컴파일 타임 중에 코드베이스의 유형 검사를 수행하고 프로덕션 단계에서 발생할 수 있는 오류를 방지하도록 도웁을 줍니다.


TypeScript는 여러 가지 방법으로 JavaScript 개발을 개선합니다. 그러나 이 문서에서는 유용한 TypeScript 사용 팁과 요령을 포함하여 여섯 가지 영역을 집중적으로 살펴보겠습니다. 이러한 팁 중 일부는 TypeScript가 함수 프로그래밍을 지원하는 방식과 관련되어 있습니다.


읽기 전용 유형


함수 프로그래밍은 일반적으로 변경할 수 없는 변수를 요구하며, 확장명의 경우에는 변경할 수 없는 개체를 요구합니다. 4개의 속성을 가진 개체는 그 수명 전체에서 동일한 속성을 가져야 하며, 이러한 속성의 값은 어떤 지점에서도 변경될 수 없습니다.


TypeScript는 Readonly 유틸리티 유형을 통해 이를 가능하게 합니다. 다음은 이러한 속성이 없는 유형입니다.

...  
type Product = {  
name: string  
price: number  
}
​
const products: Product[] = [  
{  
name: "Apple Watch",  
price: 400,  
},  
{  
name: "Macbook",  
price: 1000,  
},  
]
​
products.forEach(product => {  
// mutating here  
product.price = 500  
})  
...


이 코드에서는 가격 속성을 변형시켰습니다. 새 값은 숫자 데이터 유형이므로 TypeScript는 오류를 발생하지 않습니다. 그러나 Readonly를 사용하면 코드는 다음과 같이 됩니다.

...  
const products: Readonly<Product>[] = [  
{  
name: "Apple Watch",  
price: 400,  
},  
{  
name: "Macbook",  
price: 1000,  
},  
]
​
products.forEach(product => {  
// mutating here  
product.price = 500  
})  
...


코드


이 스크린샷에서 볼 수 있듯이 가격 속성은 읽기 전용이며 다른 값이 할당될 수 없습니다. 이 개체의 값을 변경하려고 시도하면 오류가 발생합니다.



합집합 유형


TypeScript를 사용하면 흥미로운 방법으로 유형을 조합할 수 있습니다. 두 가지 이상의 유형을 조합하는 것을 합집합 유형이라고 합니다. 합집합 유형을 만들려면 “|” 기호를 사용합니다. 몇 가지 예를 들어보겠습니다.


숫자 및 문자열 합집합 유형


숫자인 변수가 필요할 때도 있고 동일한 변수가 문자열이어야 할 때도 있습니다.

TypeScript를 사용하면 간단한 방법으로 목적을 달성할 수 있습니다.

function(id: number | string) {  
...  
}


여기서 선언한 합집합 유형의 문제점은 id.toUpperCase를 호출할 수 없다는 점입니다. 이는 함수 선언 중에 문자열 또는 숫자를 전달하려고 하는지 여부를 TypeScript가 모르기 때문입니다. 따라서 toUpperCase 메서드를 사용하려면 id가 typeof === "string"을 사용하는 문자열인지 확인해야 합니다.


그러나 특정 합집합을 만드는 모든 멤버에 표준 메서드를 적용할 수 없는 경우에는 TypeScript를 문제없이 사용할 수 있습니다.


허용되는 유형 제한


합집합을 사용하여 변수의 허용 가능한 데이터 유형 값을 제한할 수도 있습니다. 리터럴 유형을 사용하면 가능합니다. 예는 다음과 같습니다.

function(type: "picture" | "video") {  
...  
}


이 합집합 유형은 그림과 동영상의 문자열 리터럴 유형으로 이루어집니다. 이 코드를 사용하면 다른 문자열 값이 오류를 일으킵니다.



차별적 합집합


합집합의 또 다른 긍정적인 면은 공통된 구분 속성을 가진 서로 다른 구조의 개체 유형을 지정할 수 있다는 점입니다. 예는 다음과 같습니다.

...  
type AppleFruit = {  
color: string;  
size: "small" | "large"  
}
​
type OrangeFruit = {  
isRipe: boolean;  
count: number;  
}
​
function describeFruit(fruit: AppleFruit | OrangeFruit) {  
...  
}  
...


이 코드에는 서로 다른 두 가지 개체 유형 AppleFruit 및 OrangeFruit로 이루어진 합집합 유형인 fruit가 있습니다. 두 fruit 유형에는 공통 속성이 없습니다. 이러한 차이로 인해 다음 코드와 스크린샷에서 알 수 있듯이 TypeScript는 우리가 fruit를 사용할 때 어떤 fruit을 의미하는지 알지 못합니다.

...  
function describeFruit(fruit: AppleFruit | OrangeFruit) {  
if (fruit.color) {  
// throw error...see Figure B.  
}  
}  
...


코드


이 스크린샷의 오류는 오렌지 유형에 색이 존재하지 않음을 보여줍니다. 해결 방법은 두 가지입니다.


첫 번째 방법은 색 속성이 있는지 여부를 보다 허용 가능한 방법으로 확인하는 것입니다. 그 방법은 다음과 같습니다.

...  
function describeFruit(fruit: AppleFruit | OrangeFruit) {  
if ("color" in fruit) {  
// now typescript knows fruit is of the apple type  
}  
}  
...


색 속성이 fruit 개체에 있는지 확인합니다. 이 확인을 통해 TypeScript는 이 스크린샷처럼 유형을 정확히 추론할 수 있습니다.


코드


두 번째 방법은 차별 합집합을 사용하는 것입니다. 이 방법은 두 개체를 명확히 구분하는 속성을 사용하는 것입니다. TypeScript는 해당 속성을 사용하여 특정 시점에 어떤 유형이 사용되는지 확인합니다. 그 방법은 다음과 같습니다.


...  
type AppleFruit = {  
name: "apple";  
color: string;  
size: "small" | "large";  
}
​
type OrangeFruit = {  
name: "orange";  
isRipe: boolean;  
count: number;  
}
​
function describeFruit(fruit: AppleFruit | OrangeFruit) {  
if (fruit.name === "apple") {  
// apple type detected  
}  
}  
...


두 가지 유형 모두 이름 속성을 갖고 있으므로 fruit.name은 오류를 발생하지 않습니다. 그리고 TypeScript는 이름 속성 값을 사용하여 fruit 유형을 결정할 수 있습니다.



교집합 유형


type1, type2 또는 type3이 포함되는 합집합 유형과 달리 교집합 유형은 type1, type2 type3입니다.


이러한 유형의 또 다른 중대한 차이점은 합집합 유형이 문자열 또는 숫자일 수 있지만 교집합 유형은 문자열이자 숫자가 될 수 없다는 것입니다. 데이터는 문자열인 동시에 숫자가 될 수 없습니다. 따라서 교집합 유형에는 개체가 포함됩니다.


합집합과 교집합 유형의 차이에 대해 설명했으니 이제는 교차를 수행하는 몇 가지 방법을 알아보겠습니다.

...  
interface Profile {  
name: string;  
phone: string;  
}
​
interface AuthCreds {  
email: string;  
password: string;  
}
​
interface User: Profile & AuthCreds  
...


Profile과 AuthCreds는 서로 독립적으로 존재하는 인터페이스 유형입니다. 이러한 독립성 때문에 Profile이라는 개체 유형과 AuthCreds라는 다른 개체 유형을 만들 수 있으며, 이러한 개체는 서로 관련되지 않을 것입니다. 그러나 두 유형을 교차시켜 더 큰 유형인 User 유형을 만들 수 있습니다. 이 유형의 구조는 이름, 전화번호, 이메일, 암호 등 모두 문자열 유형인 네 가지 속성으로 이루어진 하나의 개체입니다.


이제 다음과 같은 User 개체를 만들 수 있습니다.

...  
const user:User = {  
name: "user";  
phone: "222222",  
email: "user@user.com"  
password: "***"  
}  
...



TypeScript 총칭 함수


함수를 만들 때 함수의 반환 유형을 알고 있는 경우가 있을 것입니다.

예는 다음과 같습니다.

...  
interface AppleFruit {  
size: number  
}
​
interface FruitDescription {  
description: string;  
}
​
function describeFruit(fruit: AppleFruit): AppleFruit & FruitDescription {  
return {  
...fruit,  
description: "A fruit",  
}  
}
​
const fruit: AppleFruit = {  
size: 50  
}
​
describeFruit(fruit)  
...


이 예제에서 describeFruit 함수는 AppleFruit 유형의 fruit 매개 변수를 사용합니다. 이 함수는 AppleFruit 및 FruitDescription 유형으로 구성된 교집합 유형을 반환합니다.


그러나 이 함수가 다른 fruit 유형에 대한 설명을 반환하도록 하려면 어떻게 할까요? 총칭 함수를 사용하면 됩니다. 예는 다음과 같습니다.

...  
interface AppleFruit {  
size: number  
}
​
interface OrangeFruit {  
isOrangeColor: boolean;  
}
​
interface FruitDescription {  
description: string;  
}
​
function describeFruit<T>(fruit: T): T & FruitDescription {  
return {  
...fruit,  
description: "A fruit",  
}  
}
​
const appleFruit: AppleFruit = {  
size: 50  
}
​
describeFruit(appleFruit)
​
const orangeFruit: OrangeFruit = {  
isOrangeColor: true  
}
​
describeFruit<OrangeFruit>(orangeFruit)  
...


총칭 함수인 describeFruit는 다양한 유형을 허용합니다. 코드는 함수를 호출할 때 전달할 fruit 유형을 결정합니다.


describeFruit를 처음 호출하면 TypeScript는 자동으로 T를 AppleFruit로 추론합니다. appleFruit가 해당 유형이기 때문입니다.


다음에는 함수를 호출하기 전에 “OrangeFruit”를 사용하여 T의 유형을 OrangeFruit로 지정합니다.


이 행은 동일한 연산을 수행하지만 때로는 자동 추론이 정확하지 않을 수도 있습니다.

예제에서 다양한 유형을 이 함수에 전달하여 FruitDescription과 전달한 유형의 교집합을 반환하도록 할 수 있습니다.


다음은 총칭 함수를 사용하여 함수에 유형을 전달하는 예입니다.


코드


describeFruit 함수는 원래 OrangeFruit로 정의했기 때문에 유형을 갖고 있습니다.



TypeScript의 경로 별칭

다음과 같이 가져오기를 수행할 수 있습니다.

...  
import Button from "../../../../components/Button"  
...


이 가져오기 명령은 이 컴포넌트를 필요로 하는 다른 파일에도 있을 수 있습니다. “Button” 파일의 위치를 변경하면 이 가져오기 행을 사용하는 여러 파일에서도 변경해야 합니다. 이러한 조정으로 인해 버전 컨트롤에서 추적할 파일 변경도 더 많아집니다.


별칭 경로를 사용하여 가져오기 방법을 개선할 수 있습니다.


TypeScript는 “tsconfig.json” 파일을 사용해 구성을 저장하여 원하는 대로 작동하도록 만듭니다. 내부에는 paths 속성이 있습니다. 이 속성을 사용하면 응용 프로그램의 디렉토리마다 서로 다른 경로 별칭을 설정할 수 있습니다. 다음은 compilerOptions, baseUrlpaths를 사용하는 경우의 모양입니다.


...  
{  
"compilerOptions": {  
"baseUrl": ".", // required if "paths" is specified.  
"paths": {  
"components/*": ["./src/components/*"] // path is relative to the baseUrl  
}  
}  
}  
...


컴포넌트 별칭을 사용하면 다음과 같이 가져오기를 수행할 수 있습니다.

...  
import Button from "components/Button"  
...


디렉토리의 어떤 위치에 있든 관계없이 이 명령을 사용하여 “Button” 파일을 정확히 분석할 수 있습니다.


컴포넌트 위치를 변경한 후에는 paths 속성을 적절히 업데이트해야 합니다. 이 방법은 버전 관리를 위해 일관된 파일을 더 많이 수용하고 파일 변경을 줄이는 것을 의미합니다.


TypeScript가 기본 지원되는 라이브러리 사용


TypeScript가 지원되지 않는 라이브러리를 사용하면 TypeScript의 이점을 누릴 수 없습니다. 인수 또는 개체 속성에 잘못된 데이터 유형을 사용하는 등의 사소한 실수조차도 TypeScript에서 제공하는 경고가 없다면 골칫거리가 될 수 있습니다. 이러한 경고가 없으면 앱에 충돌이 발생할 수 있습니다. 앱은 문자열을 예상했지만 사용자는 숫자를 전달했기 때문입니다.


모든 라이브러리에 TypeScript가 지원되는 것은 아닙니다. TypeScript를 지원하는 라이브러리를 설치하면 배포된 코드가 TypeScript 선언 파일과 함께 설치됩니다.


이러한 라이브러리 유형의 예로는 데이터 관리 및 시각화를 위한 UI 컴포넌트인 Wijmo(위즈모) 그리고 Excel에 전혀 의존하지 않고도 진정한 Excel 같은 스프레드시트 경험을 제공할 수 있는 SpreadJS(스프레드JS), 웹 응용 프로그램을 위한 최고의 보고 솔루션인 ActiveReportsJS가 있습니다.


이러한 라이브러리에는 TypeScript의 정적 타이핑을 이용할 수 있도록 하는 완벽한 TypeScript 정의 집합이 제공됩니다.



결론


이 문서에서는 TypeScript가 JavaScript 코딩을 어떻게 개선하는지에 대해 알아보았습니다. 또한 TypeScript가 함수 프로그래밍 기법을 어떻게 지원하는지도 설명했습니다. 이 기능 덕분에 TypeScript는 OOP(개체 지향적 프로그래밍) 개발자와 함수 프로그래머에게 적합합니다.


다음 단계로 TypeScript의 구성 옵션에 대해 자세히 알아볼 수 있습니다. TypeScript는 다음 앱을 쉽게 구축할 수 있도록 이와 같이 상세한 리소스를 제공합니다.


TypeScript를 좋아하고 개발자용 솔루션을 구축하기 위한 완벽한 개발자 JavaScript 제품군을 찾는다면 GrapeCity가 올바른 선택이 될 것입니다.


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.