본문 바로가기

Study/TypeScript

[TypeScript] Type alias 타입 변수같이 저장하고 사용할수 있음

#0. Type alias

- 타입이 너무 길거나 복잡한 경우에, 타입을 변수마냥 저장하고, 꺼내 쓸수도 있다. 

 

 

#1. 사용법

1.기본사용법

- 다음과 같은 형태로 정의하고, 

type 타입변수명 = 타입

- 다음과 같은 형태로 사용하면 된다.

let 변수명:타입변수명 = 값;

 

- 사용 예시 

type PersonNameType = string;
let personName: PersonNameType = '김태희';


// union 타입도 가능
type PersonNameType2 = string | number;
let personName2: PersonNameType2 = 123;

 

 

2. array

- 타입명[] 형태로 짜주면 된다.

type ArrayType = string[];
let arr:ArrayType = ['안녕', '반가워'];

 

 

3. object

- {키: 타입} 형태로 짜주면 된다.

type ObjType = {name: string, age: number};
let obj:objType = {name: '김태희', age: 20};

 

1) readonly

- js에서 object의 경우, const 로 정의했다하더라도, object안의 요소(예제에서 name, age) 는 바꿀수있다.

- 이러한 것까지 막고싶으면 readonly 사용하면 막을수 있다. 

type ObjType = {
    name: string, 
    readonly age: number
};
let obj:objType = {name: '김태희', age: 20};
obj.age = 30; // 에러남. readonly라 못바꿈

 

2) 선택적인 속성

- 키?: 타입 형태로 넣어주면 선택적인 속성으로 만들어준다.  

-  ? 표는 | nudefined 를 의미한다. 

- 아래 age의 경우, number | undefined 타입을 가져서, 작성하지 않아도 오류가 안나는 거임

- number | undefined 타입 이라는 것 꼭 기억하기!!!

type ObjType = {
    name: string, 
    age?: number
};
let obj:objType = {name: '김태희'}; // age 쓰지 않아도 에러 안남

 

 

4. 함수

- 함수의 타입은 화살표 함수 모양으로 정의한다.

type 타입명 = (파라미터타입) => 리턴값타입;
// 리턴이 없으면 void를 넣으면 되겠지?

 

- 대입할때는 함수 선언식으로 선언한 뒤, 변수 뒤에 타입을 붙여준다. 

const 함수명:함수타입명 = function(a){
	return a;
}

 

- 사용예시

type FuncType = (x: number) => number;
// 파라미터가 1개라면 x: 생략가능, 아래 주석처럼 써도 됨
// type FuncType = (x) => number;

const func: FuncType = function(x){
	return x;
}
func(1)

 

1) 파라미터, 리턴값이 없으면?

- 파라미터는 걍 비우고, 리턴은 void

type FuncType = () => void;

const func: FuncType = function(){
	console.log(1)
}
func()

 

2) 파라미터, 리턴값 선택적인 값이면?

type FuncType = (x:number, y?:number) => void;

const func: FuncType = function(x, y){
	console.log(x);
    console.log(y);
}
func(1) // y값없어도 에러는 안남. 
// 출력결과 >> 
// 1
// undefined

 

3) object 속에 함수는?

- 함수 타입도 함수타입 지정 방식처럼 지정해주면 된다.

type ObjType = {
    name: string, 
    plus: (number) => number;
};
let obj:objType = {
	name: '김태희',
    plus(x){
    	return x + 1;
    }
};

 

'Study > TypeScript' 카테고리의 다른 글

[TypeScript] 기본타입 지정하기  (0) 2023.07.04
[TypeScript] TS 시작하기  (0) 2023.07.04