coin FE

현회사에서 무분별하게 사용되는 타입스크립트 스타일을 바꿔보고자 아래와 같이 정리 하였다.

변수 함수 명칭 규칙

변수 명 – camelCase 형식 사용 _ 사용 금지, 첫 글자 대문자 금지

함수 명 - camelCase 형식 사용 _ 사용 금지, 첫 글자 대문자 금지

예시: barFunc() { } , const barConst

class 명칭 규칙

클래스 맨 앞은 대문자로 시작 PascalCase 사용

클래스 멤버와 메소드에는 camelCase 형식 사용

예시

class Foo {

    bar: number;

    baz() { }

}

인터페이스 규칙

인터페이스 명 PascalCase 사용 멤버 camelCase 형식 사용

I를 접두어로 사용 x

예시

Interface Foo { }

타입 규칙

확장성이 있는 경우 사용 x, union이나 intersection이 필수로 필요할 경우에만 사용

이름 PascalCase 사용

멤버 camelCase 형식 사용

Enum 예시

이름 PascalCase 사용

예시

enum Color {

}

Null undefined 규칙

빈 값을 넘길 때 ->? 선택적 연결 사용

또는 무효화 합체 ->?? (null, undefined) 일 때 만 사용

또는 || (null, undefined, false, 0, 빈문자열) 일 때 만 사용

?? 사용 시 에는 ( ) 로 묶어서 순위를 제대로 표현 해줘야 함

Return 규칙

값이 없을 경우 Null 이 아닌 Undefined로 반환

매개변수 빈 값 규칙

빈 값을 넘길 때 Null을 사용 undefined 사용 x

예시 -> cb(null)

If문 null, undefined 체크 규칙

If (err !== null) 사용 금지 x if (err)로 체크

따옴표 규칙

따옴표가 겹치는 상황이 아니라면 작은 따옴표 사용

세미콜론

함수 또는 변수 규칙 등 작성 후 세미콜론을 무조건 사용

파일명 규칙

camelCase 형식 사용

실무에서 추상화 작업을 할때 구현체를 구현할때 사용하는건 type 과 인터페이스를 사용했다.

type 을 사용할떄는 인터페이스의 확장성이 필요없을 경우 사용한다.

타입스크립트에 인터페이스는 일급 클래스 원시타입을 제공한다. 한객체가 다른 객체를 상속할 수 있게 해주는거를 말한다. 

interface WithId {
  id: string
}

interface UserInfo extends WithId {
  name: string
}

const user: UserInfo = {
  id: 'coin',
  name: 'kjy',
  password: 0000, // Error!
}

이런식으로 상속이 가능하게 해준다. 

타입을 사용시에는 새로운 속성을 추가하기 위해서 다시 같은 이름으로 선언을 하지 못한다 const 와 같은 맥락이라고 생각하면된다. 하지만 인터페이스에서는 항상 선언적확장이 가능하다. 그차이에 대해서 아래와 같은 예제가있다.

nterface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

// 같은 interface 명으로 Window를 다시 만든다면, 자동으로 확장이 된다.

const src = 'const a = "Hello World"'
window.ts.transpileModule(src, {})

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

// Error: Duplicate identifier 'Window'.
// 타입은 안된다.

인터페이스에서는 무조건 객체 구현체를 만드는 부분만 가능 이건 상식중에 상식이다.

타입은 컴퓨티드에 value의 사용 

interface FooInterface {
  value: string
}

type FooType = {
  value: string
}

type FooOnlyString = string
type FooTypeNumber = number

// 불가능
interface X extends string {}

type names = 'firstName' | 'lastName'

type NameTypes = {
  [key in names]: string
}

const yc: NameTypes = { firstName: 'hi', lastName: 'yc' }

interface NameInterface {
  // error
  [key in names]: string
}

성능을 위해서는 인터페이스를 사용하는것이 좋다.

결론은 현 프로젝트에서 인터페이스가 적합한지 아니면 타입이 적합한지 통일은 필요하며 객체 타입간의 합성등을 고려해봤을떄는 인터페이스를 쓰는것이 더 좋지 않을까 싶다.