[TypeScript] 타입스크립트 기초

오늘은 타입스크립트란 친구를 배워보려고 합니다.

 

코딩애플님의 강의를 참고했습니다.

 

Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함) - 코딩애플 온라인 강좌 (codingapple.com)

Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함) - 코딩애플 온라인 강좌

 

 

타입스크립트는 자바스크립트 문법에 타입을 더해서 사용을 용이하게 해주는 용도로 쓰입니다.

 

자바스크립트는 Dynamic Typing을 지원하는 언어인데

 

여기서 Dynamic Typing은 5 - '3'과 같이 원래라면 계산이 되지 않는 코드도

 

계산시켜주는 기능을 이야기합니다.

 

작은 프로젝트를 구현할 때는 이 기능이 편리하지만

 

대규모 프로젝트를 진행할 때는 이러한 타입에러들을 바로 잡을 필요가 있습니다.

 

여기서 TypeScript가 에러를 잡아주는 역할을 합니다.

 

 

 

 

여기까지가 이론이었고

 

그럼 타입스크립트를 적용하는 예제를 간단히 실행시켜보겠습니다.

 

npx create-react-app . 

 

먼저 터미널에 명령어를 입력해 리액트 프로젝트를 만들어줍니다.

 

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

그 다음은 위와 같은 명령어를 입력해서 타입 스크립트를 설치해줍니다.

 

타입스크립트는 자바스크립트처럼 .js파일이 아닌

 

.ts파일을 만들어 사용할 수 있습니다.

 

ts파일 예제

 

 

저는 example.ts라는 파일을 만들었습니다.

 

let 이름 :string = 'kim'

 

변수를 선언하고 변수명뒤에 세미콜론과 타입명 ( string, number, boolean, bigint, null, undefined,[], {}) 등을 붙이면

 

타입스크립트 예제가 완성됩니다.

 

이름이라는 변수는 string 타입으로 지정되었기 때문에

 

let 이름 :string = 'kim';

이름 = 123;

 

이렇게 이름에 다른 타입이 들어오면 오류가 발생하게 됩니다.

 

let 이름 :string[] = ['kim', 'park']

let 나이 :{ age : number } = { age : number }

 

위와 같이 Array형식이나 object 타입으로 지정할 수도 있습니다.

 

let 이름 :string | number = 'kim';

 

or 연산자를 사용하면 기존의 연산자처럼 string이나 number타입으로 지정할 수 있습니다.

 

function 함수명(x :number) :number{

    return x * 2

  }

 

함수로도 지정할 수 있습니다.

 

함수의 파라미터 뒤에 타입을 붙이면 파라미터에 타입을 지정할 수 있습니다.

 

type Member = [number, boolean];

let john:Member = [100, false]

 

그리고 튜플 자료형을 이용하면

 

대괄호 안에 들어올 데이터의 타입을 개별로 지정할 수 있다고 합니다.

 

class Person {

    name;

    constructor(name :string){

      this.name = name;

    }

  }

 

class에서도 사용할 수 있는데

 

class에 name을 미리 선언해두고

 

constructor 안에서 name의 타입을 선언해서 사용할 수 있습니다.

 

 

 

오늘은 타입스크립트가 어떻게 사용되는지

 

코딩애플님의 예제를 통해 알아보는 시간을 가져봤습니다.

 

다음 시간에는 좀 더 심화적인 부분을 공부할 것 같네요.

 

읽어주셔서 감사합니다!