[ TypeScript ] - 필수 문법

JP·2023년 3월 13일

* [ TypeScript ] *

목록 보기
1/10

TypesScript 란 ?

타입스크립트 (TypeScript) 는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. (자바스크립트 대용품 같은 언어)
마이크로소프트에서 개발, 유지하고 있으며 "엄격"한 문법을 지원한다.
자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계되었다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작 한다.

자바스크립트에서 타입 부분을 조금 업그레이드 해서 쓸 수 있는 자바스크립트 업그레이드 버전이라고 생각 하면 된다.

TypeScript 를 쓰는 이유

자바스크립트는 다이나믹 타이핑을 제공하는 언어이기 때문에 숫자와 문자가 만났을때 숫자로 바꿔서 연산을 하게 된다.
다이나믹 타이핑은 편리하지만 프로젝트 사이즈가 커지게 되면 오히려 단점으로 적용이 될 수 있다.

코드가 길어지면 길어질수록 자유도 & 유연성은 오히려 우리에게 좋지 않다.

그래서 TypeScript 를 쓰게 되면 이러한 것들을 에러로 잡아주게 된다.

타입스크립트는 타입 부분을 엄격하게 짚어주기 때문에 에러 메세지도 보다 더 정확하다.
(Ex. 숫자가 들어와야 할 자리인데 문자가 들어온다 등..)

TypeScript 설치

  1. nodejs 설치 ( 최신 버전 )

  2. 에디터 준비

  3. 터미널 오픈

    	npm install -g typescript

    터미널에서 명령어까지 입력을 하고 나면 설치가 되는데 여기서 설치가 바로 되지 않고 에러가 난다면, 어떤 에러인지 찾아보고 해결하면 되지만 90 프로 nodejs 미 설치로 인한 에러일 확률이 높다.

  4. 코드 짤 폴더만들고 에디터로 폴더 오픈

  5. .ts 파일 생성 후 코드 작업

  6. tsconfig.json 파일 생성 후 내용 작성

  1. 브라우저는 .ts 파일을 읽지 못하고 무조건 자바스크립트 파일만 읽을 수 있기 때문에 ts 파일을 js 로 변환해야 사용가능 하다.

  2. 터미널 오픈 후

    	tsc -w

    명령어 입력하고 끄지만 않으면 js 파일로 자동 변환된다.
    .ts 파일에서 코드 짜고 저장할때 마다 생성된 .js 파일이 갱신이 된다.

간단한 변수 타입 지정

이름 이라는 변수를 만들 건데 이름이라는 변수에는 string 만 들어 올 수 있다는 타입스크립트 문법
이름 이라는 변수에 string 이 아닌 number 가 들어오게 되면 에러가 생기게 된다. (어떤 에러인지도 알려주게 된다. )

이런 타입 명칭에 들어갈 코드들에는 여러가지가 있다.

//

array 안에 무조건 string이 들어와야 한다는 엄격한 타입이다.

이름 이라는 변수에 name: string 으로만 들어 올수 있다.

	{name?: string} = {}

물음표를 넣어줌으로써 있을수도 있고 없을 수 도 있다고 하는것이다 일종에 옵션 이다.

or 기호를 쓰면 숫자 또는 문자가 들어올거라고 선언 하는 것이다. (유니온 타입)
여러가지 응용 들이 가능 하다.

만약 타입 지정 하는 문법이 많이 길어지게 되면 이런 것들을 변수에 담아서 사용 할 수 있다.

마음대로 앞으로 변수에 담아서 언제든지 가져다 쓸수 있게 된다.

타입명을 작명 할때 보통 대문자로 작명을 많이 한다 그래야 일반 변수 와 차별화를 둘 수 있다.

함수에서의 타입 지정

파라미터에는 무조건 number 가 들어가줘야 하고 무조건 number 를 return 해 주어야 한다.

john 이라는 변수에는 무조건 [number, boolean] 이러한 타입이 들어가야만 한다.
array의 첫번재는 number 두번째는 boolean 이 들어가야 한다.

profile
🐰와 🐢에 🐢

0개의 댓글