TypeScript 코딩 컨벤션

🌊·2023년 5월 4일
typescript
2

JS&TS

목록 보기
5/6
post-thumbnail
post-custom-banner

자바스크립트 및 타입스크립트에 대한 코딩 컨벤션을 주도적으로 다루게 될 기회가 생겨서 자료를 정리해보았습니다.

다른 자료들을 찾아보시면 훨씬 더 많은 컨벤션 내용을 확인하실 수 있습니다.
저는 TypeScript 컨벤션으로 분류될 수 있을만한 내용만 간단하게 추려보았습니다.
대부분의 내용은 JavaScript 코딩 컨벤션과 관련된 내용이 많았습니다. 📚

인터페이스 (Interface)

PascalCase를 사용합니다.
I를 접두어로 사용하지 않습니다.

  • 이전에는 인터페이스 변수 앞에 I를 붙이는 경우가 많았는데 현재는 비관습적인 이유로 사용하지 않습니다.
// Bad
interface IFoo {
}

// Good
interface Foo {
}

타입 (Type)

PascalCase를 사용합니다.
멤버는 camelCase를 사용합니다.

// Bad
type car {
	ModelInfo: string;
}

// Good
type Car {
	modelInfo: string;
}

Type vs Interface

Union이나 Intersection이 필요할 때 Type을 사용합니다.

type Foo = number | { someProperty: number }

extends 또는 implements를 사용하고 싶을 때는 Interface를 사용합니다.

interface Foo {
	foo: string;
}

interface FooBar extends Foo {
  bar: string;
}

class X implements FooBar {
	foo: string;
	bar: string;
}

네임스페이스 (namespace)

PascalCase를 사용합니다.

  • 타입스크립트 팀에서 정한 약속입니다.
  • 네임스페이스들은 정적멤버를 갖는 클래스, 클래스 이름도 PascalCase를 사용하기 때문에 동일하게 사용합니다.
// Bad
namespace foo {
}

// Good
namespace Foo {
}

enum

PascalCase를 사용합니다.
enum의 멤버에는 PascalCase를 사용합니다.

  • 타입스크립트 팀에서 정한 약속입니다.
// Bad
enum color {
	red
}

// Good
enum Color {
	Red
}

any vs unknown

  • unknown 타입을 사용합니다.
  • any, unknown 타입 모두 아무때나 사용할 수 있지만 unknown 타입은 사용하는 쪽에서 방어처리를 해서 안전하게 사용이 가능합니다.
  • any 타입은 타입스크립트를 쓰는 의미가 없게 되버릴 수 있습니다.
function prettyPrint(x: unknown): string {
  if (Array.isArray(x)) {
    return "[" + x.map(prettyPrint).join(", ") + "]"
  }
  if (typeof x === "string") {
    return `"${x}"`
  }
  if (typeof x === "number") {
    return String(x)
  } 
  return "etc."
}

x를 any로 했을 경우 map(), join()을 사용할 수 있는데 unknown일 때 x가 배열인 경우에만 map(), join()을 사용할 수 있도록 강제해줍니다.

null vs undefined

  • 명백히 값이 없을 때에도 사용하지 않도록 합니다.
  • 타입스크립트에서 type으로 구조를 암시할 수 있도록 합니다.
// Bad
let foo = { x: 123, y: undefined }

// Good
let foo = { x: number, y?: number } = { x: 123 }

일반적으로 undefined를 사용합니다.

return undefined

null이나 undefined 값을 갖는 객체는 truthy하게 검사합니다.

// Bad
if (error === null)

// Good
if (error)

null이나 undefined를 체크할 때 === 혹은 !==를 사용하지 않고 == 혹은 !=를 사용합니다.

  • null이나 undefined에는 작동하지만 다른 fasly 값들 ('', 0, false)에는 작동하지 않습니다.
// Bad
if (error !== null)

// Good
if (error != null)

출처

profile
🌊
이전 포스트

TypeScript enum에 대해서

다음 포스트

Promise에 대해서

post-custom-banner

0개의 댓글