[TypeScript] 초기 설정 및 데이터 유형별 타입 지정 방법

 

 

타입스크립트 설치

npm install -g typescript

 

 

컴파일 할 때 옵션 설정: tsconfig.json 파일에 다음과 같이 설정

  사용할 자바스크립트 버전 설정

  module은 파일간 내보내기/가져오기 기능 사용할 때 무슨 문법을 사용할지 정하는 것이다.

commonJS: require 문법

es2015, esnex는 import 문법

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonJS"
    }
}

 

 

자동 컴파일 기능: 터미널에 tsc -w 입력

  ⚠️오류 발생시: 터미널 경로 확인

tsc -w

 

정상출력

 

 

---

 

 

변수에 타입 지정가능

 

string 타입 이외의 타입이 입력될 시 오류 발생

 

 

입력 가능 타입 List

  :string

  :number

  :boolean

  :null

  :undefined

  :bigint

  :[] => 배열

  :{} => 객체

등등

 

 

배열 설정 방법

// string 타입의 배열만 가능
const username :string[] = ['Daniel', 'Chloe']

 

객체 설정 방법

// '?'는 이 프로퍼티가 있을수도, 없을수도 있다는 것을 표현한다.
// 즉, 없어도 오류를 발생시키지 않는다.
const username :{ name? : string } = { name: 'Daniel' }

 

객체의 프로퍼티가 많다면

// [key: string]은 모든 프로퍼티를 string 타입으로 지정, 그리고 값도 string 타입으로 지정
type Member = { 
	[key: string]: string
};

const username: Member = {
	name: 'Daniel',
    department: 'sdasvzxce'
};

 

함수 타입 지정 가능: 파라미터, 리턴값에 지정 가능

  ⚠️ 리턴값이 없게 해달라는 것은 :void (비어있는)를 지정하면 됨.

  그리고 파라미터의 값이 있을 수도, 없을 수도 있다는 표시는 파라미터 뒤에 ? 를 표시해줘야한다.

  아래 예시에서  ?는 (string | undefind)로 설정해 주는 것과 같다. 

// 파라미터: string, 리턴값: string
function sayHello(x? : string) :string {
	const text :string = `${x}님 어서오세요`;
	return text;
};

 

Union type: 다양한 타입 설정

  ⚠️ 유니온 타입은 'string | number' 라는 새로운 타입을 만드는 것이라고 생각해도 좋다.

// string 혹은 number 타입의 값이 들어올 수 있다.
const username : string | number = 'Daniel'

 

any: 모든 타입 가능

  ⚠️ 이 타입이 다른 변수에 할당이 되면 그 변수의 타입에 맞춰줌

  username은 string 이고, userId는 number 타입이어도, 오류가 발생하지 않음.

const username : any = 'Daniel'

// ⚠️의 예시

const userId : number = username; // 오류❌

 

unknown: 모든 타입 가능

  ⚠️ any와는 다르다. 위 예시에서 any 대신 unknown 타입을 사용하면 예시에서 오류를 발생시켜줌

 

 

Type alias: 타입이 길면 type변수에 따로 담아서 사용 가능

  ⚠️ 타입 alias의 변수 이름은 보통 대문자로 시작한다.

type 변수_이름 = string[] | number;

const username :변수_이름 = ['Daniel', 'Chloe'];

 

Tuple Type: array에 사용 가능

// 첫 번째 요소는 string, 두 번째 소요는 boolean
type Member = [string, boolean];
const username :Member = ['Daniel', true];

 

Class: Class에서 타입 지정하기

class User {
	name: string;
    constructor(name: string) {
    	this.name = name;
    }
}