TIL 09

Typescript

let test= 123;
test = 'abc'

기존의 JS에서는 위와 같은 형태로 코드를 작성해도 문제가 없었다.
그러나 이런식으로 코드를 짜게 되면 코드의 양이 방대해졌을 경우 예기치 못한 에러가 발생하게 되고 상황에 따라 여러 문제를 불러올 수 있다.

TS는 이런 문제들을 방지하고 보완하기 위해 사용하는 것으로 JS의 타입을 강제시키는 언어이다.

let test: number = 123;

이런 식으로 선언을 할 때 타입을 지정해주고 -C와 비슷한듯- 지정된 타입 외의 값이 입력되면 오류가 발생한다. 즉, 잘못된 타입의 데이터 삽입으로 인한 오류를 원천적으로 방지할 수 있게 해주는 것이다.

설치 및 설정

package.json이 위치한 폴더에서 터미널을 사용해 설치를 진행하자.

yarn add typescript --dev

TS 홈페이지/DOCS 탭에서 본인이 사용중인 환경에 맞게 복사하여 터미널에서 설치를 진행해주면 되고 설치가 됐다면 같은 디렉토리에 'tsconfig.json'라는 이름의 설정을 위한 파일을 하나 만들어 세부 설정을 진행할 수 있다.

세부 설정 방법 또한 docs에 나와있지만 터미널에서 'yarn dev' 등을 통해 실행을 해주면 next.js에서 해당 config 파일을 감지하고 자동으로 필요한 설정을 채워주니 설정에 대해 잘 아는게 아니면 그냥 dev로 실행하는게 좋겠다.

.js를 typescript로 바꿔보자

확장자는 .tsx로 할 것.
.ts로만 지정하면 JSX 파트를 인식하지 못해서 어마어마한 오류가 잡힐 것이다.

의문1) '.js도 JSX를 포함하는 문서인데 왜 .jsx를 사용하지 않았나요?'
원래는 .jsx를 사용해줘야 하지만 .js와 .jsx가 통합되어 인식되기 때문에 .js만 해줘도 JSX를 인식해 출력하기 때문이다.

물론 이때 본인이 .js에서 선언한 변수 등에 대해 타입을 새로 선언해줘야 한다.

type 선언 방식

  let aaa ="안녕"
  aaa=3
  aaa='하세요'

  let bbb:string;
  bbb='12345'

  let ccc:number=5
  ccc=21    

  let ddd:boolean;
  ddd= true

    let eee:number[] = [1,2,3,4,5];
    eee.push(9)

    let fff:string[]=['a','b','c','d']
    fff.push('e')

    let ggg=['a','b','c',1,2,3,4,5]
    let hhh:(number|string)[];
    hhh=[1,2,'3','c']

    let iii: string[] | number[] = [1,2,3]
    iii=['가나']

    //객체 타입 생성
    interface IProfile {
        name: string,
        age: number|string,
        school:string
    }

    const profile:IProfile = {
        name: '철수',
        age: 8,
        school: '다람쥐초'
    }
    profile.age='여덟살'

변수명에 콜론을 통해 타입을 지정할 수 있고 '&' 혹은 '|'를 통해 중복 설정도 가능하다.
단, 객체에서는 객체의 키값을 하나하나 지정해줘야하며 이때는 따로 객체의 타입을 미리 설정하고(위 코드의 주석) 선언하려는 객체에 붙여주면 된다.
++ 위 코드에서 객체 profile에 들어갈 타입을 지정하기 위해 생성할 때 'IProfile'인 이유는 객체를 생성하는 명령어 'interface'의 'i'를 붙여준 것.

의문2) '타입 선언을 깜빡했는데 왜 정상 작동이 되나요?'
tsx에서는 '타입추론' 이라는 기능이 추가되었기 때문이다. 변수 등을 생성하고 데이터를 넣을 경우 해당 데이터의 타입을 '추론'하여 해당 변수에 임의로 타입을 할당하는 기능.
다만 협업을 위해 명시 해주는게 좋을듯 하다. 또한 여러 데이터가 들어와야 하는 경우는 |, & 등을 통해 선언을 해줘야 한다. 즉, 타입추론은 타입의 중복 설정이 불가능.

++ .JSON

package.json 파일에 들어가보면 내가 설치한 라이브러리 등이 dependencies 혹은 devdependencies 태그 안에 들어가 있는 것을 확인할 수 있다. -이 목록은 설치된 목록만을 보여주며 실제 구동을 위한 소스코드는 node_modules에 들어가있다-

어떤 차이가 있나?
dependencies: 페이지를 구현하고 브라우저에서 실행하는 경우 필요한 것들의 목록.

devdependencies: 개발 단계에서 VScode에서 사용하는 것들의 목록.