[TypeScript] 타입 지정(선언)하기

 

TypeScript에서는 변수에 타입을 사전에 지정하는 것이 가능하다.

또한 변수 뿐만 아니라 array, object, class 에도 타입지정이 가능하며 함수에도 지정이 가능합니다.

 

변수 선언시 기본적인 문법은 다음과 같다. 

let 변수명 : 기본타입 = 데이터;

 

• 기본타입(Primitive types) 변수 지정

//string 타입의 자료만 들어올 수 있다. 
let chicken :string = 'soy';

//만약 다른자료가 들어온다면 에러가 발생한다. 
let chicken1 :string = 8282; //error

//Boolean 타입의 자료만 들어올 수 있다. 
let Is_it_chicken :boolean = true;
let Is_it_chicken :boolean = flase;

//숫자(number) 타입의 자료만 들어올 수 있다.
let chicken :number = 8282;

 

• 타입을 여러개 지정하는 방법인 Union type도 제공한다.

//union 타입 숫자 또는 문자열
let union_type :string|number = 123;

• 추가로 타입지정을 변수에 담아서 사용하는 방법인 type alias 방식도 가능하다.

//타입 지정은 변수에 담아서 사용도 가능함 type alias 라고함
type iamUniontype = string | number;

let alias_test :iamUniontype = 123;
let alias_test2 :iamUniontype = '당연히 문자열도 들어갈 수 있음';

 

• 배열(Array) 타입 지정

//Array String 타입 지정 
//string만 가지는 배열이 된다. 
let chicken :string[] = ['soy','spice','fried'];
let chicken1 :Array<string> = ['soy','spice','fried'];

//똑같이 다른타입을 넣으면 에러가 발생한다.
let chicken2 :string[] = [8282,'spice','fried'];

//Union type을 쓰면 이런형식도 가능 
 let err_array : (number|string)[]
 
 let Alltype :(string|number|undefined|boolean)[] = ['chicken', 10000, false];

 

• 튜플(Tuple)에서 타입 지정
• 튜플은 array에 붙일 수 있는 타입으로 자료의 위치까지 정확히 지정할 수 있는 타입이다.
• 배열과 유사하지만 차이점은 정해진 타입의 요소 만큼 미리 타입을 선언 한 후 배열을 작성해야한다.
• 튜플을 이용하면 자료별로 구체적으로 타입이 지정가능하다. (자료1 string , 자료2 number[] ....)

let chicken: [string, number];
chicken = ['soy', 10000];

• 튜플을 이용해서 rest parameter에 들어올 파라미터에도 미리 타입을 지정해 엄격한 규칙으로 사용이 가능하다.

function Tuple_data(...x :[string,number,boolean]){
  console.log(x)
}
//string, number, boolean가 아닌 데이터가 들어오면 오류가 발생한다.
Tuple_data(1,'1',true);

• 튜플에도 옵션(?)이 사용가능하다. 

let Animal : [string, boolean?, number] = ['dog', 123]
//위 데이터는 논리적으로 오류가 있음 어레이 타입인데 중간데이터를 옵션으로 뺀다는건 불가능
//따라서 ? 기호는 뒤에만 붙여줘야 한다. 

let Animal : [string, boolean, number?] = ['dog', true]

• array 두 개를 spread로 합치는 경우 튜플에서 타입 지정은 다음과 같다.

// ...를 붙이기
let arr = [1,2,3]
let arr2 :[number, number, ...number[]] = [4,5, ...arr]

//rest parameter 같은 느낌으로다가 활용가능함 ( 자료를 맘껏 집어넣을 수 있음 
let arr2 :[number, number, ...number[]] = [4,5,6,7,8,9,10]

 

 

• 함수(Function)에서 타입 지정
• 함수에서는 각 파라미티에 타입을 선언할 수 있으며, 리턴값도 타입 지정이 가능하다.

//함수에 타입 지정 문법 
function 함수명 (변수 :입력값 형식) : 리턴값_형식{
    return 변수;
}

//예시 number 대입값/리턴값 타입 지정 
function chicken_count(count :number) :number{
    return count +=1;
}
chicken_count(1);
// 2 출력

//Union 타입 (타입을 다중으로 지정) 하는 형식도 사용이 가능하다.
//number와 string을 동시에 리턴하는 함수
function chicken_count1(count :number, kind : string ): number | string {
    return  kind + ':' + count;
}
chicken_count1(1,'soy);
//soy:1 출력

 

• 객체(Object) 에서 타입 지정

//기본적인 object 타입 지정
let iamObject :{x : string } = {x : 'object_data'}

//Union type object
let iamUnionObject :{x : string | number} = {x : 777}

//type alias object 
type chicken = {
    name : string
}
//타입을 미리 변수에 생성한 후 objec 자료에 적용 
let delicious_store : chicken = {name : 'soy'}

 

• Any type (모든 타입) 
• 말 그대로 모든 타입을 의미한다.  자바스크립트 변수와 마찬가지로 어떤 타입 값도 할당 가능하다.

//문자열도 들어가고
let anydata : any ='String';
//숫자도 들어가고
anydata = 0;
//true false도 들어간다.
anydata = true;

 

• void type (빈 타입) 
• 리턴 값이 없는 함수에 사용되며, 리턴 값이 없는 함수는 undefined를 반환하게 된다.

function chicken(): void {
  console.log("치킨 다 먹어서 없다.");
}
console.log(chicken()); // 콘솔창을 통해 출력하면 undefined 값이 나오게 된다.

 

• Unknow 타입
• any와 비슷하지만 차이점은 Unknow은 그 형식과 다르면 오류를 발생시킨다는 점이다.

let unknownChic :unknown;
/*
any 타입이라면 타입이 달라도 무시하고 들어가겠지만 
unknown 타입를 다른 변수에 대입하면 형식이 다르기에 오류가 발생하게 된다. 
*/
let chicken:string = unknownChic;

 

• never (절대 발생할 수 없는 타입)

function fall_Cook() {
  throw new Error("요리를 잘 못했습니다.");
}
//console.log(fall_Cook()); // Uncaught Error: 요리를 잘 못했습니다.
// null, undefined 어떤 값도 반환하지 않고 오류를 발생시킨다.

• never 사용 조건
• 특정 함수가 절대 return하지 않고 함수의 실행의 endpoint가 없어야 한다.
• never 타입은 잘못된 형식으로 지정한 경우, 위에서 말한 경우 등에 발생한다.