기본 타입 정리(primitive types), 한 변수에 여러 타입 지정(union), array 전용 타입(tuple), 선택적 타입(optional), 함수 타입(기본, void, never), class 타입

 

1. 기본 타입 지정

let name : type = 내용

 

기본적으로 타입을 지정할때는 변수 옆에 : 을 찍은 후 type을 적어준다.

let str: string = 'hi';
let num: number = 10;
let isLoggedIn: boolean = false;

 

배열 타입은 타입을 적은 후 [] 로 배열을 표기한다.

//배열안에 무조건 string만 가능
let 팀: string[] = ["수지", "철수"];

let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3]; //제네릭표기

 

객체 타입은 객체를 만들어 key는 그대로, value에 타입을 적어주면 된다.

//객체 타입 지정
let 내정보 : { age : number } = { age : 20 }

 

undefined나 null도 타입 지정이 가능하다.

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

 

우리가 알고있는 타입들 외에도 타입스크립트에는 any라는 타입이 존재한다.

const a : any[] = [1,2,3,4]
const b : any = true
a + b // 오류 출력 x
//기본값. 타입스크립트의 보호장치에서 빠져나오고 싶을때 사용

 

다만 any는 말 그대로 모든 타입이 들어갈 수 있다를 의미하므로, any보다는 unknown (어떤 타입인지 알수없음) 을 사용하자!

let 이름: unknown = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

//여기까지는 any와 동일하다

let 이름: unknown;

let 변수1: string = 이름; //에러, any는 에러 없음
//아직 뭘 집어넣을지 모르겠는데 약간의 안정성을 도모하고 싶으면 unknown 타입

 

타입스크립트를 사용할때는 타입 지정은 굳이 할 필요가 없다.

let 이름 = 'kim'; //알아서 string으로 지정
//타입스크립트가 추론 가능하도록 하고 명시적 표현은 최소화 하도록

 

2. 한 변수에 여러 타입 지정(union)

만약 문자도 될 수 있고, 숫자도 될 수 있는 경우, 유니온 타입으로 작성한다.

기존의 타입을 지정하는 대로 작성하되 | 를 사이에 넣어주면 된다 || < = or 과 비슷한 느낌

let 구별: string | number = 11;
구별 = "문자열도 된다";

let arr: (string | number)[] = [1, "2", 3];
let 오브젝트: {data : (number | string) } = { data : '123' }

//타입을 특정 값으로 고정할 수도 있다.
let e : 1 | 2 | 3 | 4 = 

type Name = string;
type Age = number;
type NewOne = Name | Age;

 

3. array 전용 타입 (tuple)

배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식의 경우, 튜플 타입을 사용할 수 있다.

let arr: [string, number] = ['hi', 10];
let arr: any = ['a', 2, true]; //모든 타입을 허용

type TMember = [string, number];
const 팀원: TMember = ["네모", 12];

 

 

4. 선택적 타입(optional)

객체에서 타입을 지정할때, 그 값이 들어있을 수도 있고, 아닐수도 있다면 옵셔널 체이닝 문법처럼 ? 를 붙여 선택적으로 표시할 수 있다.

선택적 타입을 지정했을 경우 그 값이 있을때만 접근 가능하도록 코드에 명시해주어야 한다.

const player: {
  name: string, //name은 필수로 가지지만, age는 선택적
  age?: number, //?를 붙여 선택적 변수 지정
} = {
  name: "nemo",
};

if (player.age >10) {} //'player.age' is possibly 'undefined'
//옵셔널 체이닝 player?.age를 해도 동일하게 오류 발생

if (player.age && player.age >10) {} //허용

 

5. 함수 타입 지정

- 기본 함수 타입 지정

//함수인자 타입 설정, : 어떤 타입을 리턴할지 설정
function sum(a: number, b?: number): number {
  return a + b;
}
//?로 옵션을 부여하는건 number | undefined 와 같다.

sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

function 내함수(x: number | string): number {
//유니언 타입일 경우, 타입체크를 해야 연산 가능
  if (typeof x === "number") {
    return x * 2;
  }
}

function 결혼가능하냐(
  월소득: number,
  집보유여부: boolean,
  매력점수: "상" | "중" | "하"
) : string | void {
  let 점수 = 0;
  점수 += 월소득;
  if (집보유여부) {
    점수 += 500;
  }
  if (매력점수 === "상") {
    점수 += 100;
  }
  if (점수 >= 600) {
    return "결혼 가능";
  }
}
console.log(결혼가능하냐(700, false, "중"));

 

- void : 아무것도 리턴하지 않는 함수

let unuseful: void = undefined; //변수에는 undefined와 null만 할당

//아무것도 리턴하지 않는 함수를 대상으로 사용
//비어있다는 의미

function hello() { //hello() :void
	console.log("x")
} 
//따로 지정할 필요는 없음

 

- never : 절대 실행되지 않는 함수

//이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미

//리턴하지 않고 오류를 발생시킬때 사용
//타입이 두 가지일때도 사용

function neverEnd(): never {
  while (true) {

  }
}

function hello():never { //함수가 작동하지 않음 
	return "x" //오류
} 

function hello():never { 
	throw new Error("xxx") //정상
} 

function hello(name: string|number) { 
	//name +1 은 불가능
	if(typeof name === "string") {
		 //여기 name은 string
	} else if (typeof name === "number"){
		//여기 name은 number
	} else {
		 name //여기 name은 never
			//절대 실행되지 않는 코드 
	} 
}

6. class 타입

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