[typescript] 타입스크립트 기본 타입 정리

1. 변수 선언 시 타입 지정하기

타입스크립트는 변수를 만들 때 변수의 타입을 지정할 수 있다. 배열과 객체 자료형의 경우, 안에 들어갈 데이터들도
전부 타입을 지정할 수 있다.

1.1 string/number/[]/boolean

let name :string = 'hoho';
let age : number = 20;
const arr :number[] = [1,2,3];
let isLogin : boolean = true;

• 타입이 결정된 변수에 다른 타입의 데이터로 재할당하게되면 오류가 발생한다.
• 배열 자료형 안에 들어갈 타입은 타입명[]으로 지정한다.

만약 배열 안에 숫자 또는 문자열 타입 모두 가능하게 하고 싶다면 유니언 타입을 통해 이용할 수 있다.

const arr2:(string|number)[] = [12,'안녕'];

💡 모든 변수에 타입을 지정하지 않아도 변수를 생성하면 타입스크립트는 타입을 자동으로 부여해주기 때문에 복잡하게 타입을 명시할 필요가 없다!
간단한 변수들은 타입을 생략해도 된다.

1.2 Union Type

2개 이상 합친 타입을 지정할 때 유니언 타입을 이용한다.
유니언 타입에 해당되는 데이터로 재할당해도
오류가 발생하지 않는다.

let userName : string | number = '안녕';
// let userName : (string | number) = '안녕';
userName = 12;

배열 또는 객체 자료형을 선언하는 방식도 살펴보자.
숫자 배열 또는 문자 배열을 선언할 때는 ()를 이용한다.
만약 number | string[] 으로 선언한 경우,
숫자 또는 문자 배열 타입으로 지정된다.

let arr : (number|string)[] = [1,'2',3];
let obj : {a:number|string} = {a:'a'};

1.3 any

any 타입은 모든 자료형이 가능한 타입이다.
any 타입을 남발하면 타입 관련 버그가 생길 경우,
추적하기 어려워 비상 시에만 변수 타입 체크를 해제하는 것이 좋다.

let data : any = 12;
data = {data:12};
data = [12];
data = '12';

1.4 unknown

요즘은 any 타입보다 unknown 타입을 사용하는 편이다.
any와 동일하게 모든 타입을 넣을 수 있다.

let data : unknown = 12;
data = {data:12};
data = [12];
data = '12';

👉 어떤 타입이 들어올지 모르는 경우 혹은 다양한 타입을 적용할 경우 사용한다.

unknown 타입의 특징
1. unknown 타입에 모든 자료형 가능
2. 데이터가 있어도 타입은 unknown으로 유지

또한 unknown 타입은 이미 타입이 지정된 변수에
넣으면 오류가 발생한다.
➡️ 타입 지정된 변수에서 타입 비교를 하기 때문!
any 타입인 경우는 오류없이 모두 가능하다.

let data : unknown = 12;
let num :number = data; // Type 'unknown' is not assignable to type 'number'.
let result = data-1; //'data' is of type 'unknown'
let str:string = data; //Type 'unknown' is not assignable to type 'string'.

타입스크립트는 연산을 할 때도 무조건 숫자 타입만 가능하며 인덱스 또는 키로 접근할 때도 배열 타입 혹은 객체 타입이어야 한다.

유니언 타입일 때 연산 시,오류가 발생할 수 있다.
아래의 경우는 num,num2 변수에 값을 할당해주었기 때문에
타입이 확실하게 설정되어 있다.

자바스크립트에서 + 연산은 아래와 같은 경우 가능하다.

• 숫자 타입 + 1 (가능)
• 문자 타입 + 1 (가능)

let num = number|string = 10;
num +=1; //11
let num2 : number|string = '10';
num2+=1;  //101

타입스크립트는 타입이 확실한 것을 선호하기 때문에
number|string 타입은 number 타입이 아닌 새로운 타입으로 인식한다.
따라서 연산할 때 연산하고자 하는 변수의 타입이 확실해야 연산을 실행할 수 있다.

let num : number|string ;
num +=1; // Operator '+=' cannot be applied to types 'string | number' and 'number'.

1.5 object

object 타입은 다양한 데이터 타입들을 담을 수 있다.
또한 배열도 가능하다.

let obj:object = [1,2,3];
obj = {"id":1,"person":"emily"}

2. 함수 선언하기

타입스크립트에서 함수를 선언할 때 파라미터와 반환하는 값의 타입을 지정할 수 있다.

function add(x :number) :number { 
  return x * 2;
} 
add(2);
add(); //An argument for 'x' was not provided.

1. 파라미터 타입 지정은 함수 파라미터 안에 작성한다.
2. 함수 반환(return)값의 타입명은 함수명() 우측에 작성한다.
3. 타입스크립트는 파라미터에 값이 존재하면 필수 파라미터가 되기 때문에 함수를 호출할 때 무조건 인자를 포함해서 호출해야 한다.

🤔 그러면 함수 파라미터를 같이 선언했을 때, 파라미터 없이 함수를 호출할 경우는 어떻게 해야할까??

➡️파라미터는 옵션이라는 의미로 ?를 이용한다.

x? :number는 x의 값이 존재하면 숫자 타입을, 그렇지 않다면 undefined 타입으로 결정된다.

function add(x? :number) :number { 
  return x * 5; //'x' is possibly 'undefined'.
} 

파라미터 옵션 ?는
즉, union type으로 만들어주는 문법이다.
따라서 union type인 데이터를 반환할 때 type narrow를 통해 지정된 타입 범위를 좁혀 로직을 설정할 수 있다.

function multiply(num?:number):number|void{
    if(typeof(num) === 'number') return num*5;
}
console.log(multiply(5)); //25
console.log(multiply()); //undefined

• 인자로 전달받은 타입이 숫자일 때만 연산을 반환한다.
• 인자가 없는 경우는 반환하는 값이 없다는 의미로 void 타입을 설정한다.

2.1 void

void : 빈 공간, 무효의, 공허감

타입스크립트는 함수를 선언할 때 void 타입을 사용할 수 있다. void는 '아무것도 없다'는 뜻으로 return할
데이터가 없을 때 쓴다. 함수 선언 시에만 사용된다.

function add(x) :void { 
  console.log(x*2);
} 
add(2);  //4

const num:void; // 변수에 선언 ❌

만약 리턴하는 함수에서 void 타입을 표기하면 오류가 발생한다.

function add(x):void {
    return x * 2; //Type 'number' is not assignable to type 'void'.
}