[TypeScript] 타입스크립트 기초 및 설치

1. 타입스크립트란?

타입스크립트란 자바스크립트에서 타입 설정이 추가된 언어라고 보면 된다.

타입스크립트는 자바스크립트의 상위 집합 슈퍼셋으로서 대형 프로젝트를 진행할때

어느정도 약점 오류를 잡는데 좋다.

타입스크립트의 컴파일은 타입스크립트 코드를 자바스크립트 코드로 바꿔주는것이다.

자바스크립트 코드로 바꿔주는 이유는 브라우저가 이해할수 있는게 자바스크립트로 작성된 코드이기 때문이다.

2. 타입스크립트의 장점

객체지향 프로그래밍에 특화된 프로그래밍 패턴을 지원한다.

타입스크립트를 쓰면 자바스크립트로 작업할때보다 개발에서 생기는 에러를 사전에 방지할수 있고 자바스크립트의 코드 품질과 개발 생산성을 높일수 있다.

3. 자바스크립트와 비교

JS : 타입이 정해져 있지 않아서 자동완성이 미리 뜨지 않아 일일히 타이핑 해야함

TS: 타입을 정해놔서 미리 자동완성이 뜨기 때문에 빠르고 정확하게 작업할 수 있다.

 

JS : 에러를 사전에 방지하는데 JS는 코드를 실행시켜야 에러를 확인할수 있다.

TS : 작성한 코드가 문제가 있으면 실행시키기전부터 바로바로 확인해서 문제를 해결할 수 있다.

 

4. 타입스크립트 설치

(1) 설치 명령어

npm i -g typescript

(2) 설치 되었는지 확인

tsc --version

(3) tsconfig.json 생성 명령어

tsc --init

tsconfig.json은 typeScript의 설정파일 typeScript의 설정값을 조절할 수 있다.

ts-node라는 typeScript 실행기를 사용해서 개발 환경에서 typeScript로 작성된 파일을 실행시켜 볼수 있다.

 

(4) 설치 명령어

npm i -D ts-node @types/node

(5) typeScript의 변수 타입지정

변수명 : 타입 = 초기값
const a : number = 1;

5. 여러 타입들

// 숫자 타입
const numberType: number = 100;

//문자 타입
const stringType: string = "HelloWorld";

// bool 타입
const bool: boolean = true;

// 배열은 타입에 [] 붙여주면 된다.
const array: number[] = [1, 2, 3];

// undefined 타입
const undefinedType: undefined = undefined;

// null 타입
const nullType: null = null;

// 객체 타입
const objectType: { str: string } = { str: "안녕" };
// 객체 타입은 속성명? : 타입형태로 지정하면 속성은 있어도 되고 없어도 되는 옵션 값 없어도 오류가 없음

// tuple(튜플) : tuple은 배열을 생성할수 있게 하는데 특정 위치에 특정타입이 있어야 한다.
const tuple: [string, number, boolean] = ["안녕", 100, true];

// any : 타입 제한 없다. typeScript의 검사를 비활성화 시킨다
const any: any = ["안녕", 100, true];

// unknown : 어떤 타입인지 아직 모르는 변수를 사용할때, 데이터를 받아오는 경우 미리 타입을 알지 못할때 사용
//오류코드
const numUnknown: unknown = "100";
console.log(numUnknown.length);

//정상코드
const numUnknown1: unknown = "100";
if (typeof numUnknown1 === "string") {
  console.log(numUnknown1.length);
}

// void : return 값이 없는 함수는 void 타입을 사용하고 있다.
function fun(num: number): void {
  console.log("안녕");
}
// 함수에서 타입을 지정해주지 않으면 default로 void 타입을 가진다

 

6. 별칭 타입

(1) 타입 만들기

type blockHeader = {
  verison: string;
  height: number;
};

(2) 타입 사용하기

const block: blockHeader = {
  verison: "1.0.0",
  height: 0,
};