본문 바로가기
개발 일지/TIL

[ TypeScript ] 타입 표기 (Type Anotation)

by CODESIGN 2023. 1. 16.

String


let str: string = 'TypeScript'; //str 변수 선언

str = 123 // Error
str = true // Error
str = undefined // Error

 

 

Number


let num: number = 6; //num 변수 선언
let hex: number = 0x288; // 0x는 16진수로 만들어준다
let binary: number = 0b1010; // 0b는 2진수로 만들어준다.
let octal: number = 0o288 // 0ㅐdms 8진수로 만들어준다.

 

 

Boolean


let isTrue: boolean = true;

 

 

Array (배열)


let arrNum : number[] = [1,2,3];
let arrStr : string[] = ['1','2','3'];
let arrBool : boolean[] = [true, false, true];

 

 

Tuple


let x: [string, number]; // 첫번째는 string이 두번째는 number이 와야한다.
x = ['hi', 1];

 

 

Any


let str: any = 'hi'; // 어떤값이 들어가도 에러가 나지 않는다.

str = 13;
str = true; 

let num: any = 10;
let arr: any = ['a',2, true];

 

 

Void


함수에서 리턴값이 없을 경우 반환되는 타입

function noReturn(): void {
	console.log('noReturn');
}

 

 

Null & undefined


let a: null = null;
let b: undefined = undefined;

// number와 null을 둘다 할당이 가능하다. 
let unionType: number | null = null;

 

 

Never


함수가 비정삭적으로 종료되거나 끝까지 실행되지 않았을 때를 의미하는 타입이다.

function infinite(): never{
	while (true) {}
}

function test():never {
	throw new Error('Error');
}

 

 

함수 타입


두개의 파라미터를 받아 두 수의 합을 리턴하는 함수이다.

function add (n1: number, n2: number): number {
	return n1 + n2;
}

 

위와 같이 적어줄 수 있지만 리턴문을 보고 반환 타입을 알 수 있어서  반환 타입을 생략해도 된다.

function add (n1: number, n2: number) {
	return n1 + n2;
}


//화살표 함수
const add = (n1: number, n2: number) => {
	return n1 + n2;
}

 

 

두 번째 인자가 없을 경우


Optional Parameter, '?' 사용


function add1 (n1: number, n2: number): number {
	return n1 + n2;
}

const num1 = add1(1,2); // 3
const num2 = add1(1); // Error


// n2에 '?'를 붙여준다.
function add2 (n1: number, n2?: number): number {
	return n1 + n2;
}

const num3 = add2(1,2); // 3
const num4 = add2(1); // 1

 

 

Default Parameter, '='사용


function add1 (n1: number, n2: number = 0) {
	return n1 + n2;
}

const num1 = add1(1,2); // 3
const num2 = add1(1); // 1 => 두번째 값이 없을 경우 0으로 세팅한다.

 

Rest Parameter


나머지 역할을 한다.

function add4(n1: number, ...nums: number[]): number {
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return n1 + totalOfNums;
}

const result = add4(10, 20, 30, 40);
// n1은 10이고 나머지 수들은 nums에 할당이 된다.

 

 

 

Enum (= enumeration)


enum은 특정 값들의 집합을 의미하는 자료형이다.

Javascript에 없고 TypeScript에만 있는 타입이다.

 

 

숫자형 이넘


Direction에 열거된 자료

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

console.log( Direction.Up, Direction.Down, Direction.Left );
// 0, 1, 2

const up: Direction = Direction.Up;
// Direction = Direction.UP | Direction.Down | Direction.Left | Direction.Right

const leftOrRight: Direction.Left | Direction.Right = Direction.Left;

 

enum Direction {
  Up,
  Down = 200, // 200을 설정해주면 여기서부터 다음 숫자에는 1이 더해서 201이 출력된다.
  Left,
  Right,
}

console.log( Direction.Up, Direction.Down, Direction.Left );
// 0, 200, 201

 

 

문자형 이넘


enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

 

 

복합형 이넘


유지보수성에 혼란이 생길 수 있어 잘 사용하지 않는다. 

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}
// 권고하지 않음

 

 

댓글