TypeScript Bast practices 2021

BackEnd_Ash.log·2021년 12월 31일
0

typescript

목록 보기
17/17

참고자료
https://medium.com/@warkiringoda/typescript-best-practices-2021-a58aee199661

✅ 1.올바른 데이터 타입 지정

const name: string = “Hello”;
const value: number = 50;
const isCorrect: boolean = false;

타입은 TS에서 코딩할 때 갖는 장점 중 하나이다.

TS에서 데이터 유형을 정의하면 실수로 발생할 수 있는 이상한 런타임 오류를 방지할 수 있습니다.

✅ 2.'strict' 사용

ES5의 JavaScript에 ES5 에서 '엄격한 사용' 기능이 추가되었습니다.
TS 코드의 tsconfig 파일에서 'strict' 구성을 찾을 수 있습니다.

✅ 3.'var' 대신 'let' 사용

아마 이제 더이상 var 를 쓸일이 잘 없을것 같다.
상수 처리할땐 const 를 사용하면 되고 변수선언을 하고싶을땐 let 을 사용하면 된다.

letconst는 TS가 var 에 대해 가지고 있던 몇 가지 단점을 줄이기 위해 도입되었습니다.

const의 목적은 값도 업데이트할 수 없다는 기능과 함께 제공됩니다(let으로 업데이트할 수 있음). 따라서 상수를 선언할 때는 항상 const를 사용하십시오

✅ 4.고정 array에는 튜플 사용

고정 길이 배열에 튜플 사용

let marks: number[] = [1, 2, 3];
marks = []; // success
marks = [1]; // success
marks = [1, 2, 3, 4, 5]; // success
console.log(marks);

이렇게 설정하게되면 , 고정길이 없이 배열 길이를 자유롭게 변경이 가능하다.
만약 let 이 아니라 const 로 하게되면 에러가 발생하게 된다.

let marks:[number, number] = [1, 2]; // tuple of 2 number values
marks = [10, 20]; // success
marks = [1]; // syntax error
marks = [1, 2, 3, 4, 5] // syntax error

튜플을 적용하게 되면 let 을 사용해도 , 배열의 길이가 정해진다.

✅ 5.반복 데이터 유형에서 유형 별칭 사용

동일한 데이터 유형 구조를 따르는 스크립트에 여러 변수/객체가 있다고 가정합니다

let man: {name: string, age: number} = {name = "john", age=30};
let woman: {name: string, age: number} = {name = "Anne", age=32};

이 중복된 형식 선언 청크를 방지하고 형식을 재사용하려면 형식 별칭을 사용할 수 있습니다.

type Details = {name: string, age: number}; // defining type alias
let man: Details = {name = "john", age=30}; // using type alias
let woman: Details = {name = "Anne", age=32};

✅ 6.클래스 멤버에 대한 액세스 수정자 사용

TS는 클래스 속성에 대한 액세스 수정자와 함께 제공되지만 클래스는 항상 공개됩니다. 공개, 보호 또는 비공개 속성을 만들 수 있습니다.

  • private: 클래스 내에서만 접근 가능

  • protected: 클래스 내부와 하위 클래스를 통해서만 액세스 가능

  • public: 어디서나 접근 가능

class Employee {
  protected name: string;
  private salary: number;
  
  constructor(name: string, salary: number) {
    this.name = name;
    this.salary = salary
  }

  public getSalary(){
    return salary
  }

여기서 getSalary 메서드를 사용하지 않으면 급여에 액세스할 수 없습니다.

class Developer extends Employee{
  viewDetails(){
    console.log(this.salary); // error: property 'name' is private
    console.log(this.getSalary()); // success
  }
}

그러나 하위 클래스를 통해 이름에 액세스할 수 있습니다.

class Developer extends Employee{
  viewDetails(){
    console.log(this.name);
  }
}
profile
꾸준함이란 ... ?

0개의 댓글