타입스크립트의 타입

 

 

 

참고문헌 :

typescriptlangHandbook - The TypeScript Handbook​

Handbook - The TypeScript Handbook

typescriptlangHandbook - The TypeScript Handbook​

https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html

Documentation - The Basics

 

검색 : 타입스크립트의 타입 계층 구조 - 이미지 검색

 

★ 기본 타입

 

1. 원시 타입(Primitive Type)

      a. 통시에 한 개의 값만(숫자만 숫자, 문자열 이면 문자열만,..) 저장할 수 있는 타입틀

      b. number, sring, boolean

      1-1.number 타입

let num1:number = 123;     // 타입 주석 사용
let num2:number = -123;
let num3:number = 0.123;
let num4:number = -0.123;
let num5:number = Infinity;
let num6:number = -Infinity;
let num7:number = NaN;

num1.toFixed(2);  //소수이하 2자리
num1.toFixed(); //소수 없이, 정수만
num1 = "hi";  //에러 발생
num2.toLowerCase(); //에러 발생

● 타입 주석 또는 타입어노테이션 : 변수 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는

 

1-2.string 타입

      문자열 타입, "",",백틱,템플릿 리터럴로 만든 모든 문자열을 포함

//string
let str1 : string ="hello";
let str2 : string ='hello';
let str3 : string =`hello`;
let str4 : string =`hello ${num1}`;

 

1-3. boolean 타입

//boolean
let bool1 :boolean = true;
let bool2 :boolean = false;

 

1-4. null 타입

//null
let nullable : null = null;

//let numA : number = null;  //타입스크립트는 null 타입이 따로 있어 오류
              // 이를 해결하기 위해 tsconfig.json에  "strictNullChecks": false 추가
              // strictNullChecks 는 strict의 하위 옵션으로  strict 가 true로
              // 설정되어 있으면 이것도 true가 되며 false 로 설정되어 있으면 
              // 자동 false가 됨
              // 현재는 strict 모두를 true로 해 놓았기에 strictNullChecks 도  true 임

 

● strictNullChecks 는 strict의 하위 옵션으로 strict 가 true로 설정되어 있으면 이것도 true가 되며 false 로 설정되어 있으면 자동     false가 됨, 현재는 strict 모두를 true로 해 놓았기에 strictNullChecks 도 true 임

● strict 를 활성화 해 놓으면 strict~~ 모든 플래그를 동시에 활성화하게

 

1-5. undefined 타입

//undifined
let undefinded_test : undefined = undefined;

 

2. 리터럴 타입

    ● 하나의 값만 포함하도록 값 자체로 만들어진 타입

    ● 값 그 자체로 정의

    ● 해당 값 이외에는 담을 수 없

//리터럴 타입 : 값 그 자체로 정의
let numA :10 = 10;
//numA = 20;  // 10외는 넣을 수 없음

let strA :"hello" = "hello";

let boolA : true = true;

 

 

※ 배열과 튜플

1. 배열(Array)

      ● 변수 : 배열 요소 타입[] = [값,...];

      ● Array<배열_요소_타입> : 제레닉

      ● 다양한 타입을 갖는 배열 요소 => 변수:(타입1|타입2|..) = [타입1값,타입2값,....)

          ○ 유니온 타입 : 바(|), 여러 요소 중 하나를 만족하는 타입을 의미

      ● 다차원 배열

          ○ 변수:타입[][] = [[요소1,요소2,.. ],[ 요소1,요소2,....]];

//배열
let numArr: number[]=[1,2,3];
let strArr: string[]=["사과","딸기","복숭아"];

let boolArr:Array<boolean> =[true,false,true]; //제레닉

//배열에 들어가는 요소들의 타입이 다양할 경우  - 유니온(Union) 타입
let multiArr:(number | string)[] = [1, "hello"];

//다차원 배열의 타입을 정의하는 방법
let doubleArr:number[][] =[
  [1,2,3],
  [4,5]
];

//--------------------
let numArr : number[] = [1,2,3,4];
console.log(numArr[2]);

let num_str:(number | string)[ ] = [1, "사과"];
num_str.push(3);
num_str.push(5);
num_str.push("딸기");
num_str.push("복숭아");
console.log(num_str);

- tsx src/파일명. ts

- tsc src/파일명.ts -> node src/파일명.js

 

2. 튜플(Tuple) 타입

      ● 타입스크립트에서 만 제공

      ● 길이와 타입이 고정된 배열

      ● 다만 js로 변경되면 튜플도 일반 배열로 변환되어 처리됨

      ● 따라서 배열 메서드인 push나 pop을 이용해서 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있음에 주의 필요

      ● 튜플을 사용하면 실수로 배열의 위치를 변경해서 저장하는 에러를 막을 수 있음

//튜플 타입 - 타입스크립트에서만 제공
//튜플 - 길이와 타입이 고정된 배열
let tup1:[number,number] =[1,2];
let tup2:[number,string] =[1,'hello'];

tup1 = [3, 4];
// tup1=[3,4,5]; //에러, 튜플
// tup1 = ["가나","다라"]; //에러

// tup2 = [3, 4]; //에러
// tup2 = ["가", 3]; //에러
tup2 = [5, "대한"];

let tup3:[number,string,boolean] = [1, "사과", true];
tup1.push(4);  //가능,  주의) 자바스크립트로 변환할 때 그냥 배열로 처리하기 때문에 가능
tup1.pop();
tup1.pop();
tup1.pop();

//튜플 상황-인덱스에 넣어야 할 타입이 정해져 있을 때
const user:[string,number][]=[
  ["홍길동",1],
  ["이가",2],
  ["홍동",3],
  ["박박",4],
  // [6, "최최"] //오류
];

 

 

 

※ 객체

1. object로 정의하기

      a. object 타입은 단순 값이 객체임을 표현하는 것 외에는 아무런 정보도 제공하지 않는 타임

      b. 이 타입은 객체의 프로퍼티(Property)에 대한 정보를 전혀 가지고 있지 않음

      c. 따라서 프로퍼티(Property)에 접근하려고 하면 오류 발생

let user:object={
  id:1,
  name:"홍길동",
};

user.id;  //에러 발생, 단지 object는 객체임을 표현할 뿐
        // 객체의 프로퍼티에 대한 정보가 없음음

 

2. 객체 리터럴 타입

      a. 중괄호({})를 열고 객체가 갖는 프로퍼티(Property)를 직접 나열해 만드는 타입

      b. 변수의 타입을 객체의 리터럴 타입으로 정의하면 타입 내에 정의되어 있는 프로퍼티(Property)에 이상 없이 접근할 수 있음

      c. 프로퍼티에 마우스 올려 놓으면 타입이 보임

      d. 객체의 타입을 정의할 때 프로퍼티를 기준으로 객체의 구조를 정의하듯이 타입을 정의(구조적 타입 시스템)

let user: {   //객체 리터럴 타입, 구조적 타입 객체
  id:number; 
  name:string;
}={
  id:1,
  name:"홍길동",

};
console.log(user.id);
console.log(user.name);

user ={
  id : 2,
  name: "김자바",
}

console.log(user.id);
console.log(user.name);

 

3. 선택적 프로퍼티(Optional Property)

      ● 프로퍼티가 있어도 되고 없어도 되는 선택적 상황에서 사용

      ● 프로퍼티 이름 뒤에 ?를 붙여서 나타냄

let user: {   //객체 리터럴 타입, 구조적 타입 객체체
  id?:number; //? 있어도 되고 없어도 되는 프로퍼티, 옵셔널 프로퍼티
            // id를 지정할 것이면 숫자값이어야 함함
  name:string;
}
={
  id:1,
  name:"홍길동",

};
user.id;

user={
  name:"홍홍홍",
};

 

4. 읽기 전용 프로퍼티(Readonly Property)

      ● 프로퍼티 이름 앞에 'readonly' 키워드를 붙여 줌

      ● 의도치 않은 프로퍼티의 값 수정을 방지하기 위해 사용

let config:{
  readonly apiKey : string;
} ={
  apiKey : "My Test Api Key",
};

// config.apiKey ="aaaa "; //에러, 읽기 전용이므로

 

 

▶ 타입 별칭 및 인덱스 시그니처

 

1. 타입 별칭

      ● 타입 별칭을 이용하면 변수를 선언하듯 타입을 별도로 정의할 수 있음

      ● 형시) type 타입명 = { 타입선언};

type User={  //객체 타입 정의, type 타입명 ={ };
  id: number;   //프로퍼티:number
  name:string;
  nickname:string;
  birth:string;
  bio:string;
  location:string;
};

let user:User={ // 타입 별칭 사용  let 객체명:타입별칭={ }
  id: 1,
  name:"이바다",
  nickname:"바다신",
  birth: "1999-01-02",
  bio:"Hello",
  location:"서울 강남"
};

let user2:User={
  id: 2,
  name:"이하늘",
  nickname:"sky",
  birth: "1999-03-01",
  bio:"ㅋㅋㅋㅋㅋ",
  location:"역삼"
};

● 동일한 스코프 내에서는 중복된 이름으로 타입 별칭 선언하면 에러 변수 선언과 유사

● 그러나 함수 내에 정의된 별칭과 함수 외부에 정의된 타입 별칭 처럼 스코프가 다르면 동일해도 됨

 

2. 인덱스 시그니처

    객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법

    형식) [key:type] : value_type;

    ex) [key:string]:number ; ⇒ key는 string 타입이고 value는 number 타입인 모든 프로퍼티를 포함

type ContryCodes={
  [key : string] : string;
};

let countryCodes:ContryCodes={
  Korea : "ko",
  UnitedState:"us",
  Japan : "jp",
};

//아래와 같이 
// 인덱스 시그니처 타입은 규칙을 위반하지만 않으면 에러 안 생김
let countryNmberCodes :CountryNumberCodes ={};

let countryNmberCodes :CountryNumberCodes ={
  Korea:410,
  UnitedState: 840,
  Japan : 392,
};

 

만약 반드시 포함해야 할 프로퍼티가 있다면 다음과 같이 직접 명시해도 됨

type CountryNumberCodes={
  [key:string]:number;
  Korea:number;
};

let countryNmberCodes :CountryNumberCodes ={
  Korea:410,
};


// 그러나 위의 Korea:type과 value타입은 반드시 같아야 함
type CountryNumberCodes={
  [key:string]:number;
  //Korea:string; //에러, value 타입이 number이므로 여기도
  // number 타입이거나 호환되는 타입이어야 함
  Korea:number;
};

let countryNmberCodes :CountryNumberCodes ={
  //Korea:"ko" , //에러, number 타입이어야 함
  Korea:1;
};

 

 

☎  열거형 타입

 

      ● 자바스크립트에는 존재하지 않고 오직 타입스크립트에서만 사용할 수 있는 특별한 타입

      ● enum은 컴파일될 때 다른 타입들 처럼 사라지지 않고 자바스크립트 객체로 변환됨

      ● enum 타입에 값을 직접할당 하지 않으면 0부터 시작하고 1씩 증가함

 

// 숫자형 열거 타입
enum Role {
  ADMIN,  // 0 할당
  USER,  //1 할당
  GEUEST, //2 할당
};

//
// enum Role {
//   ADMIN=0,
//   USER=1,
//   GEUEST=2,
// };

//
// enum Role {
//   ADMIN=10, // 10 
//   USER,    // 11
//   GEUEST,   // 12
// };


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

let user1 = {
  name:"홍길동",
  role:Role.ADMIN,

};

let user2 = {
  name:"김하늘",
  role:Role.USER,
  language : Language.korean,
};

let user3 = {
  name:"이바다",
  role:Role.GEUEST,
  language : Language.english,
};

 

● 위 코드를 js 파일로 변환 ( tsc src/test.ts )

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
})(Language || (Language = {}));
;
var user1 = {
    name: "홍길동",
    role: Role.ADMIN,
};
var user2 = {
    name: "김하늘",
    role: Role.USER,
    language: Language.korean,
};
var user3 = {
    name: "이바다",
    role: Role.GUEST,
    language: Language.english,
};

 

 

★ Any와 Unknown 타입

1. Any 타입

      ● 타입스크립트에서만 제공되는 특별한 타입으로 타입 검사를 받지 않는 특수한 치트키 타입

      ● any 타입은 어떠한 타입 검사도 받지 않기 때문에 아무 타입의 값이나 범용적으로 담아 사용할 수 있고, 다양한 타입의 메서             드도 마음대로 호출해서 사용해도 문제가 되지 않음

      ● any 타입의 값은 어떤 타입으로 정의된 변수던 문제 없이 다 할당할 수 있음

      ● any는 되도록 사용하지 않은 것이 좋음, 상당히 위험한 타입임, 타입 검사는 하지 않지만 runtime에 오류를 발생시킴

//any
// 특정 변수의 타입을 확실히 모를 때 사용
let anyVar:any=10;
anyVar = "hello";

anyVar = true;
anyVar ={};
anyVar=() => { };

anyVar.toUpperCase();
anyVar.toFixed();

let num :number = 10;
num = anyVar;

 

2. Unknown 타입

      ● any 타입과 비슷하지만 보다 안전한 타입

      ● unknown 타입의 변수는 어떤 타입의 값이든 다 저장할 수 있음

      ● 그러나 unknown 타입의 값은 어떤 타입의 변수에도 저장할 수 없음

      ● unknown 타입의 값은 어떤 연산에도 참여할 수 없으며, 어떤 메서드로 사용할 수 없음

      ● 모든 값을 할당 받을 수 있지만, 어떤 타입의 변수에도 할당할 수 없고, 모든 연산에 참가할 수 없게 됨

      ● 즉 모든 값을 저장만 할 수 있음

//unknown
let unknownVar:unknown;
unknownVar = "";
unknownVar = 11;
unknownVar = () => {};

// num = unknownVar;
// unknownVar.toUpperCase();

if(typeof unknownVar === "number"){
  //타입 정제 = 타입 좁히기 시는 사용 가능
  num=unknownVar;
}

 

 

▶ Void 타입과 Never 타입

 

1. void 타입

      a. 아무런 값도 없음을 의미하는 타입

      b. 아무런 값도 반환하지 않는 함수의 반환값 타입을 정의할 때 사용

      c. void타입의 변수에는 undefiend 이외의 다른 타입의 값은 담을 수 없음, void 타입이 undefiend 타입을 포함하는 타입이기              때문

 

//void

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

function func2():void{
  console.log("hello");
};

let a:void;
// a=1;
// a="hello";
// a={};
a=undefined;
//a=null;  //tsconfig.json에 엄격한 null 검사 옵션을 false로 설정하면 가능
        // "strictNullChecks":false

 

2. never 타입

      a. 불가능을 의미하는 타입

      b. 함수가 어떠한 값도 반환할 수 없는 상황일 때 해당 함수의 반환값 타입을 정의할 때 사용

      c. 무한 루프 이외에 의도적으로 오류를 발생시키는 함수도 never 타입으로 반환값 타입을 정의할 수 있음

      d. 변수의 타입을 never로 정의하면 any를 포함해 그 어떠한 타입의 값도 이 변수에 담을 수 없게 됨

 

//never 
//존재하지 않는 불가능한 타입
// 함수에 반환값 자체가 모순이라고 생각할 수 있는 상황에도 never타입 사용
function func3():never{
  while(true){ }
}

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

let anyVar:any;
let a1 : never;
// a1=1;
// a1={};
// a1="";
// a1=undefined;
// a1=null;  //tsconfig.json에 엄격한 null 검사 옵션을 false로 설정해도
//         //null을 담을 수 없음
// // "strictNullChecks":false
// a1=anyVar;