타입스크립트에서 조건 논리에 대한 모범 사례
이 글에서는 타입스크립트에서 조건 논리에 대한 모범 사례를 설명합니다.
YouTube Video
타입스크립트에서 조건 논리에 대한 모범 사례
타입 가드를 사용한 타입 좁히기
타입스크립트의 타입 시스템을 활용하고 if 문 내에서 타입 가드를 사용하면 타입 안정성과 가독성을 향상시킬 수 있습니다.
1function processInput(input: string | number) {
2 if (typeof input === "string") {
3 console.log(`String input: ${input.toUpperCase()}`);
4 } else {
5 console.log(`Number input: ${input.toFixed(2)}`);
6 }
7}typeof 및 기타 타입 가드를 사용하면 각 블록 내의 코드가 타입 안전하고 문맥에 적합하다는 것을 보장합니다.
중첩된 if 문을 피하기
깊이 중첩된 if 문은 코드의 가독성과 유지보수성을 저하시킵니다. 대신에 초기에 return 문을 사용하거나 논리 연산자 또는 추출된 함수를 사용하세요.
잘못된 예시:
1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2 if (user.age) {
3 if (user.age > 18) {
4 if (user.isAdmin) {
5 console.log("User is an adult admin.");
6 }
7 }
8 }
9}개선된 예시:
1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2 if (!user.age || user.age <= 18 || !user.isAdmin) {
3 return;
4 }
5 console.log("User is an adult admin.");
6}이 접근 방식은 코드를 평탄하게 만들어 논리를 더 이해하기 쉽게 만듭니다.
Optional Chaining 사용하기
중첩된 속성을 확인할 때, 필요 없는 if 조건을 피하기 위해 Optional Chaining (?.)을 사용하세요.
Optional Chaining 없이:
1if (user && user.profile && user.profile.email) {
2 console.log(user.profile.email);
3}Optional Chaining 사용하기:
1if (user?.profile?.email) {
2 console.log(user.profile.email);
3}이 방법은 불필요한 반복 코드를 줄이고 가독성을 향상시킵니다. 여기서 반복 코드는 특정 프로그래밍 작업을 수행하기 위해 자주 요구되는 반복적이고 표준화된 코드를 의미합니다.
엄격한 동등 연산자 사용하기
타입스크립트는 엄격한 타입을 지원하며, 엄격한 동등 (===) 또는 엄격한 비동등 연산자 (!==)를 사용하면 예상치 못한 타입 강제를 방지할 수 있습니다.
잘못된 예시:
1if (value == "123") {
2 console.log("Value is 123.");
3}개선된 예시:
1if (value === "123") {
2 console.log("Value is 123.");
3}명확한 조건을 위해 Enums 또는 리터럴 타입 사용하기
Enums 또는 리터럴 타입을 사용하면 조건을 명확히 하고 오류 가능성을 줄일 수 있습니다.
1type Status = "success" | "error" | "loading";
2
3function displayMessage(status: Status) {
4 if (status === "success") {
5 console.log("Operation succeeded.");
6 } else if (status === "error") {
7 console.log("Operation failed.");
8 } else {
9 console.log("Loading...");
10 }
11}예상 값을 정의함으로써 타입스크립트는 타입을 감지하고 정확성을 보장할 수 있습니다.
유사한 조건을 결합하세요
여러 조건이 같은 로직을 공유할 경우, 논리 연산자나 switch 문을 사용하여 결합하세요.
잘못된 예시:
1if (role === "admin") {
2 grantAccess();
3}
4if (role === "superadmin") {
5 grantAccess();
6}개선된 예시:
1if (role === "admin" || role === "superadmin") {
2 grantAccess();
3}또는, 명확한 여러 분기를 처리하기 위해 switch 문을 사용하세요:
1switch (role) {
2 case "admin":
3 case "superadmin":
4 grantAccess();
5 break;
6 case "user":
7 console.log("Limited access.");
8 break;
9 default:
10 console.log("No access.");
11}조건식을 복잡하게 만들지 마세요
if 문에서 복잡한 조건식은 가독성을 떨어뜨립니다. 의미 있는 변수나 함수로 이를 추출하세요.
잘못된 예시:
1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2 console.log("User can write.");
3}개선된 예시:
1const isAdultAdminWithWriteAccess = user.age > 18 && user.isAdmin && user.permissions.includes("write");
2if (isAdultAdminWithWriteAccess) {
3 console.log("User can write.");
4}조건에 이름을 지정하면 명확성을 높이고 코드가 자체적으로 설명될 수 있게 만듭니다.
간단한 조건에는 삼항 연산자를 사용하세요
간단한 조건에 삼항 연산자를 사용하면 코드를 간결하게 만들 수 있습니다.
예제:
1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);하지만, 복잡한 조건에서는 삼항 연산자를 사용하지 마세요. 이는 가독성을 떨어뜨립니다.
결론
이러한 모범 사례를 따르면 TypeScript의 if 문을 명확하고 효율적이며 관리하기 쉽게 만들 수 있습니다. TypeScript의 타입 가드, 옵셔널 체이닝, 열거형과 같은 기능을 활용하여 코드의 가독성과 견고함을 향상시키세요. 조건을 간결하고 명확하게 유지하며, 항상 이해하기 쉽고 유지보수가 용이한 코드를 목표로 하세요.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.