typeScript - typeScript 개괄1(환경설정, 타입 명시, interface)

타입스크립트는 저도 최근에 공부하고 있어서, 잘은 모르지만 정리 목적으로 타입스크립트를 다루어 보겠습니다.

 

1. 타입스크립트 개발환경 설정

일반적으로 js파일 확장자를 ts로 바꾸거나, ts 확장자로 파일을 생성하면 자동으로 타입스크립트 컴파일러가 생성됩니다.

만약 자동으로 생성되지 않는다면, $npm install -g typescript 를 통해서 설치해주시면 됩니다.

브라우저가 타입스크립트를 인식하지 못하기 때문에 자바스크립트로 변환해주기 위한 컴파일러가 필요하며, tsconfig.json을 통해 컴파일러를 설정할 수 있습니다. 

 

tsconfig.json 파일에서 타입스크립트와 자바스크립트 간의 컴파일 설정을 하시면 됩니다.

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "target": "ES5",
    "module": "CommonJS",
    "alwaysStrict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "sourceMap": true,
    "downlevelIteration": true
  },
  "include":  [
    "static/js/**"
  ]
}

tsconfig.json 컴파일러 설정은 자세히 모르지만 차차 알아가면서 후에 자세히 다루어보겠습니다.

일단은 include 경로 설정을 해야합니다.

개발환경에 따라 include 경로 설정없이 알아서 타입스크립트 파일을 찾아서 자동으로 컴파일하는 경우도 있지만, 그렇지 않은 경우는 include를 통해서 수동으로 설정해야합니다.

 

 

2. TypeScript 타입 명시(type annotations)와 인터페이스(interface)

자바스크립트는 고정된 변수타입없이 자유롭게 변수타입을 변경가능합니다.

이러한 자바스크립트의 자유성은 자바나 다른 언어들과 같이 쓰게 될 때는 문제가 발생합니다. 

자바스크립트 변수의 타입이 시도때도 없이 바뀌는 문제점을 보완하기 위해 타입스크립트에서는 변수 타입을 명시하여, 변수 타입을 변경 불가능하게 할 수 있습니다.

 

자바스크립트의 변수 타입은 다음과 같습니다.

프리미티어 타입 - String, Number, Boolean, Null, Undefinded, Symbol(ES6에 추가됨)

오브잭트 타입 - { }, function 등 

 

이러한 변수 타입을 자바스크립트 뒤에 ':타입' 형식으로 입력만 하면 자바스크립트 타입이 고정됩니다.

let memberNo: number		// 숫자 타입
let name: string		// 문자열 타입
let phoneNm: string		// 문자열 타입
let isAuthenticated: true	// boolean 타입

function getInfo(memberNo: number): string {
	...
	return name;
}

일반 변수의 경우 변수 뒤에 ':타입' 형식으로 입력만 하면 자바스크립트 타입이 고정됩니다.

반면, 함수의 경우 함수 뒤에 ':타입'을 지정하면 return 타입이 지정한 타입이 됩니다.

function getInfo(memberNo: number): {
 	name: string;
    phone: number;
    isAuthenticated: boolean;
} {
	...
	return {name: '홍길동', phoneNm: '010', isAuthenticated: true};
}

함수의 return 타입이 객체인 경우 return 타입들을 병렬식으로 나열해서 지정할 수 있습니다. 

하지만 이 방법은 다소 비효울 적이기 때문에 interface를 활용하는 것을 추천합니다.

 

// 인터페이스
interface member {
   memberNo: number;
   name: string;		
   phoneNm: string;		// 문자열 타입
   isAuthenticated: boolean;	// boolean 타입
}

function getInfo(): member {
	return {memberNo: 1001, name: '홍길동', phoneNm: '010', isAuthenticated: true};
}

console.log(getInfo());

interface는 변수들을 모아둔 틀이라고 생각하시면 될 것 같습니다. 

사용 용도는 메소드의 인자 파라미터 타입으로 사용할 수 있고 위의 예처럼 메소드가 반환하는 타입으로 사용가능합니다. 각각 매개변수 반환타입, 함수 반환타입이라고 합니다.

interface는 상속이 가능하여 확장에도 용의합니다.

 

// 인터페이스
interface member {
   memberNo: number;
   name: string;		
   phoneNm: string;		// 문자열 타입
   isAuthenticated: boolean;	// boolean 타입
}

// 인터페이스 상속
interface customer extends member {
  point: number;
  address: string;
}

let customerInfo: customer = {
  memberNo: 1001,
  name: '홍길동',
  phoneNm: '010',
  isAuthenticated: false,
  point: 0,
  address: '주소'
};

console.log(customerInfo);

interface customer가 interface member를 상속한 예제입니다. extends 지시어를 사용하면 부모 interface의 프로퍼티와 메소드를 상속할 수 있습니다. 

 

중요!! interface는 접근제어자를 지원하지 않습니다. interface의 속성은 모두 public입니다.

 

 

3. 변수 미필수(optional)와 읽기전용(readonly)

타입스크립트 인터페이스에 명시적으로 선언한 변수들이 객체나 반환 타입에서 하나라도 빠졌을 경우 오류 메세지가 출력될 것입니다. 하지만 필수값이 아니기에 불필요하게 변수를 주고 받은 필요가 없을 때 optional 처리하는 지시어가 있습니다.

// 인터페이스
interface member {
   memberNo: number;
   name: string;		
   phoneNm?: string;		// optional
   isAuthenticated?: boolean;	// optional
}

파라미터 명시적 타입 선언부에 '?'만 붙여주면 optional 변수로 사용 가능합니다.

 

그럼 프론트나 화면서 값을 수정하지 못하게 하려면 어떻게 해야할까요?

타입스크립트에서는 해당 기능을 손쉽게 제공하고 있습니다. 

사용자나 프론트개발자가 변수를 수정하지 못하도록 변수에 readonly 처리할 수 있습니다.

// 인터페이스
interface member {
   readonly memberNo: number;
   readonly name: string;		
   phoneNm?: string;		// optional
   isAuthenticated?: boolean;	// optional
}

변수명 앞에 readonly 지시어만 붙여주면 손쉽게 수정불가능하게 만들 수 있습니다.

이상으로 타입스크립트 기본 기능들을 살펴봤습니다.

 

4. any Type

타입스크립트에 

 

https://typescript-kr.github.io/

TypeScript 한글 문서

 

https://velog.io/@kysung95/TS-TypeScript-%EA%B0%9C%EB%A1%A0-2

[TS] TypeScript 개론 (2)

 

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

타입스크립트 핸드북