POB_TIL 6 : typescript, code snippet

이지훈·2022년 5월 9일

typescript

프리온보딩_TIL

목록 보기

6/22

이번에 린터와 함께 타입스크립트도 사용하게 됐다. 아직 익숙하진 않지만 그래도 PropTypes를 쓰는 것보다는 타입스크립트를 쓰는 게 더 좋을 것 같다.

타입스크립트

기존 자바스크립트의 동적 타입은 유연하게 사용할 수 있지만 반대로 여러 오류를 일으킬 수도 있다.

타입스크립트는 js의 상위 집합으로, javascript의 모든 기능에 타입스크립트의 기능이 추가되어있다.
그리고 실행할 때는 타입스크립트가 실행되는것이 아닌 ts -> js로 컴파일되어 js가 실행된다.

타입 추론

변수를 리터럴로 생성하며 할당하는 경우, typescript는 타입을 추론한다.

let hi = "hello world";
// let은 변경될 수 있으므로 타입을 문자열로 생각한다.

const helloWorld = 'hello world!';
// const로 선언한 변수는 변경되지 않기 때문에 문자열이 아닌 'hello world!'로 타입을 정한다.

타입 정의

콜론 :을 이용해 변수명 뒤에 타입을 지정해준다.

let decimal: number = 6;
let hex: number = 0xf00d;
let color: string = "blue";
color = 'red';

배열 : 타입 뒤에 [] 사용

let list: number[] = [1, 2, 3];

만일 고정된 개수와 타입을 담는 배열이라면 미리 지정해줄 수 있다.

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

유니언 타입

or 연산자인 |로 타입을 구분하여 여러 타입 중 하나가 될 수 있음을 나타낸다

let value : number | string | null = 0; // number
value = 'hello'; // string
value = null; // null
value = undefined; // error : 지정된 타입이 아니므로 할당할 수 없다

interface

타입들을 가진 객체의 형태를 나타낸다. 프로퍼티의 순서를 요구하지는 않고 해당 프로퍼티가 존재하는지와 요구 타입을 가졌는지만 확인한다.

interface LabeledValue {
    label: string;
}

function printLabel(labeledObj: LabeledValue) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
// interface에 없던 size가 있지만 label이 존재하고, string 타입인지만 확인.
printLabel(myObj);

값이 반드시 있어야하는 경우가 아니라면 선택적 프로퍼티를 사용할 수 있다.

interface Person {
  name: string;
  age: number; // 해당 값이 없거나 타입이 다르면 에러 발생.
  height ?: number; // 없어도 에러가 발생하지 않는다. 
  // 하지만 해당 프로퍼티에 number가아닌 타입을 사용하면 에러 발생
}

코드 스니펫 만들어보기

타입스크립트와 린터, css module을 적용하면서 함수형 컴포넌트의 형태가 기존에 사용하던 확장프로그램의 자동완성으로 만든 것과 조금 달라졌다. 그래서 기왕 하는거 그냥 하나 만들어보기로 했다.

VSCODE snippet 만들기

VSCODE에선 자체적으로 커스텀 snippet을 만들 수 있다. 참고

우선 ctrl + shift + p를 입력한 후
user snippet 설정을 찾는다.

사용할 파일형태를 찾는다. 이번 경우는 typescript이고 리액트에서 사용할것이니 typescriptreact.json을 선택한다
형식에 맞게 내가 사용할 code snippet을 입력한다. 일반 텍스트는 그냥 배열에 맞게 넣으면 되고 tab을 이용해 자동 선택 인덱스를 정할 수 있다.
prefix가 자동완성이 일어나는 값이니 원하는 값을 정해두고, body에 자동완성될 내용을 채우면 된다.
$TM_FILENAME_BASE를 사용해 파일이름도 가져오도록 만들어봤다.

typescript 함수 컴포넌트 + scss 모듈

"typescript function component with module.scss" : {
    "prefix": "tsc",
    "body": [
      "import styles from './${1:$TM_FILENAME_BASE}.module.scss'\n",
      
      "const ${1:$TM_FILENAME_BASE} = () : JSX.Element => {",
      "  return <div>",
      "    ${2}",
      "  </div>",
      "}\n",

      "export default ${1:$TM_FILENAME_BASE}"
    ],
    "description": "typescript 함수형 컴포넌트와 같은 이름의 scss 모듈을 사용"
  },

typescript 함수 컴포넌트 + Props 인터페이스 + scss 모듈

"typescript function component with module.scss / Props" : {
    "prefix": "tscp",
    "body": [
      "import styles from './${1:$TM_FILENAME_BASE}.module.scss'\n",
      
      "interface Props {",
      "  ${3}",
      "}\n",
      
      "const ${1:$TM_FILENAME_BASE} = ({${4}} : Props) : JSX.Element => {",
      "  return <div>",
      "    ${2}",
      "  </div>",
      "}\n",

      "export default ${1:$TM_FILENAME_BASE}"
    ],
    "description": "typescript 함수형 컴포넌트와 같은 이름의 scss 모듈을 사용"
  },

사용하면 이렇게 된다