🔵 [React/TypeScript] 타입 별 예제 2

 

4. 타입 별칭

// 타입 별칭

type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

// 같은 타입이 중복되면 에러 발생
// type User = {};

// 함수 스코프 단위에서의 타입 중복은 에러 발생하지 않음
function func(){
  type User = {};
}

let user: User = {
  id: 1,
  name: "홍길동",
  nickname: "gildong",
  birth: "1997.01.31",
  bio: "안녕하세요",
  location: "부천시"
};

let user2: User = {
  id: 2,
  name: "김길동",
  nickname: "kim_gildong",
  birth: "2000.01.31",
  bio: "안녕하세요~~~",
  location: "수원시"
}

// 인덱스 시그니처
type CountryCodes = {
  Korea: string,
  UnitedState: string,
  UnitedKingdom: string,
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk"
}

// 값이 키-값 쌍이 이후에 추가될 때
type CountryNumberCodes = {
  [key: string]: number;

  // 필수 속성 => 무조건 있어야 하는 값 (없으면 에러)
  // 인덱스 시그니처와 명시적으로 지정한 필수 속성의 타입을 일치 시켜야 함
  Korea: number;
}

// let countryNumberCodes: CountryNumberCodes = {
//   Korea: 410,
//   UnitedState: 840,
//   UnitedKingdom: 826
// };

// let countryNumberCodes: CountryNumberCodes = {} // 에러

let countryNumberCodes: CountryNumberCodes = {
  Korea: 0
}

// **js로 컴파일 하면 타입 속성은 js파일에서 사라짐

 

 

5. enum 타입

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

// enum 의 기본 특징: 0 부터 시작해서 +1 씩 됨
// ex) USER = 10을 지정하면, ADMIN = 0, USER = 10, GUEST = 11 이 자동 부여됨
enum Role {
  ADMIN,
  USER,
  GUEST
}

// 문자형 enum
enum Language{
  korean = "ko",
  english = "en"
}

const user1 = {
  name: "홍길동",
  // role: 0 // 관리자라고 가정 // 협업시 헷갈릴 수 있기 때문에
  role: Role.ADMIN,
  language: Language.korean
}

const user2 = {
  name: "아무개",
  // role: 1 // 일반유저로 가정
  role: Role.USER,
  language: Language.english
}

const user3 = {
  name: "게스트",
  // role: 2 // 게스트로 가정
  role: Role.GUEST
}

console.log(user1, user2, user3)

// ** enum은 tsc 명령으로 js로 컴파일 해도 enum 타입은 사라지지 않고 js로 변환 됨

 

 

6. any 타입 // 치트키 타입!

=> 특정 변수의 타입을 우리가 확실히 모를 때

=> 원래는 상위집합에서 하위집합으로 불가능인데 any만 가능해서 치트키라고 함

=> 자바스크립트랑 사용성이 비슷 (타입을 지정해도 대부분의 값이 올 수 있기 때문에)
=> 타입스크립트에서는 잘 쓰지 않길 바람

 

// any

let anyVar: any = 10;
anyVar = "hello";
anyVar = true;
anyVar = {};
anyVar = () => {};
anyVar.toUpperCase();
anyVar.toFixed();

let num: number = 10;
num = anyVar; // 오류 발생하지 않음

let unknownVar: unknown;

unknownVar = "";
unknownVar = 1;
unknownVar = () => {};

num = unknownVar; // 오류 발생

 

// 타입을 정제하였을 경우에는 unknown 값을 할당 가능
if(typeof unknownVar === "number"){
  num = unknownVar;
}

 

7. void 타입

=> 공허, 아무것도 없음을 의미

=> 타입스크립트에서 등장

// void 타입
// void => 공허 => 아무것도 없음을 의미하는 타입

function func1(): string {
  return "hello";
}

// 반환(return)하는 것이 없을 때 = 실행만을 위한 함수
function func2(): void {
  console.log("hi")
}

// return을 그냥 끝내줄 때 = undefined 반환
function func3(): undefined {
  console.log("hey");
  return; // void가 undefined를 포합하고 있기 때문에 생략해도 됨
}

// null 타입은 retrun null 필수, 없으면 에러
function func4(): null {
  console.log("hey");
  return null;
}


let a : void;
// 에러
// a = 1;
// a = "hello"
// a = {};

// 가능
a = undefined; //하위라서 가능
a = null; // tsconfing.json에서 오류 발생을 삭제했기 때문에 가능

 

 

8. never 타입

// never
// never => 존재하지 않는 불가능한 타입
function func5(): never {
  while(true){}
}

function func6(): never {
  throw new Error();
}


let anyVar: any;
let b: never;
// 어떤 값도 할당 할 수 없음
// b = 1;
// b = {};
// b = "";
// b = null;
// b = undefined;
// b = any;