Published 2022. 6. 23. 17:40

Typescript

Typescript란?

타입스크립트는 일반적인 JS문법에서 변수의 타입을 미리 선언하고 사용하는 것입니다

JS이외 C/C++, Java 등 Strong Type을 경험해보셨다면 이해하기 쉽다고 생각합니다. 하지만 어느정도의 차이는 있으므로 그런 것들을 정리할 예정입니다

우선 Typescript는 기본적으로 코드가 실행하기 전 검사하고 에러를 띄워주게 됩니다. 따라서 타입스크립트에게 초기에 어떤 것(어떤 타입인지)인지 코드를 작성해줘야 합니다. js에서 any로 표시되는 모든 데이터들에 대해서 선언시에 한번만 지정하면 되지만 원시타입(number, string, boolean) 같은 경우는 타입 추론을 통해 자체적으로 타입을 받을 수 있으니 굳이 지정안해줘도 됩니다. 이외에도 복잡한 타입의 경우 굳이 지정하지 않더라도 실행은 되지만 typescript의 장점을 살리기 어렵습니다.

- 공식문서 https://www.typescriptlang.org/

JavaScript With Syntax For Types.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

www.typescriptlang.org

동작원리

typescript는 마이크로소프트에서 개발, 유지하고 있으며 javascript의 확장 언어라고 이해했습니다. 왜냐하면 typescript를 컴파일시키면 javascript로 컴파일되기 때문이며 그 과정은 bable로부터 이루어진다고 합니다. 또한 어떻게 컴파일 될 것인지는 ts.cofing 설정을 통해 이루어지게 됩니다.

대표적인 컴파일 설정 옵션들은 아래 블로그에서 확인해보았고 target, module, outDIr, rootDir, allowJs sourceMap 같은 옵션들이 대표적이고 이 외 옵션들은 공식문서에서 확인할 수 있습니다.

https://www.samsungsds.com/kr/insights/typescript.html

https://velog.io/@gsh723/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-6-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC

컴파일 과정은 typescript 코드를 tsc(타입스크립트 컴파일러)를 통해 컴파일 과정에서 불필요한 정보들은 제거시킨 뒤 typescript 추상 구문 트리(AST) 구조로 변환하게 되며 TypeChecker가 타입을 검사하게 되며 이 때 타입이 일치하지 않는다면 TypeChecker가 오류를 발생시키게 됩니다

문제가 없다면 AST구조를 javascript로 다시 javascript AST구조로 변경되며 이후 컴퓨터가 이해할 수 있게 byte code형태로 변환되며 실행되게 됩니다

https://blog.lutece.me/2021/12/16/typescript-process/

https://00h0.tistory.com/17

typescript 사용하기

https://create-react-app.dev/docs/getting-started

Getting Started | Create React App

Create React App is an officially supported way to create single-page React

create-react-app.dev

https://create-react-app.dev/docs/adding-typescript

Adding TypeScript | Create React App

Note: this feature is available with react-scripts@2.1.0 and higher.

create-react-app.dev

CRA로 초기 React app을 만들 때 typescript 환경을 추가할 수 있으며 추가 설정이 없이 바로 문법을 사용할 수 있습니다.

타입스크립트 기본 문법

지원하는 타입들이 정말 많기 때문에 하나씩 정리하며 익숙해지는게 좋다고 생각합니다

https://www.samsungsds.com/kr/insights/typescript.html

https://joshua1988.github.io/ts/intro.html

interface PlayerShape {
    name:string;
    age:string;
}

기본적인 interface문법으로 object의 타입을 선언할 때 자주 사용하고 있습니다.

Module

npm에서 install하여 모듈을 추가하게 되면 일반적으로 JS로 만들어진 모듈을 받게 됩니다. 하지만 이 모듈을 typescript에서 불러온다면 에러가 발생하게 되는데 이때 해당 모듈의 type을 직접 선언해야 한다면 일반적으로 잘 사용되지 않을 것입니다. 이런 문제점을 해결하기 위해 많은 사람들이 https://github.com/DefinitelyTyped/DefinitelyTyped에 모여 JS 모듈에 타입을 추가하였고 이러한 활동들 때문에 만약 모듈을 설치했을 때 typescript 선언이 없는 패키지를 사용한다면

npm i --save-dev @types/패키지명을 추가 설치하라고 알려주게 되며 굳이 타입들을 선언하지 않아도 이미 누군가 추가해주었기 때문에 쉽게 사용할 수 있게 되어있습니다.

다양한 타입

이 외에도 typescript를 사용하게 되면 다양한 값들에 대해 타입을 선언해야하는 어려움이 있습니다. 기본적으로 구글링과 공식문서, 질문을 통해 해결하는 것이 빠르지만 vscode를 사용하게 된다면 받아야 하는 변수에 마우스를 가져다대면 타입이 나오는 경우도 있기 때문에 참고해두면 좋을 거라고 생각합니다

Function component라는 정보가 나온다

추가적으로 참고한 문서