[ 3D Web : Front&Back_Type Script ] 타입스크립트의 타입 선언

 

 

 

[ 3D Web : Front&Back_Type Script ] 

타입스크립트의 타입 선언 

 

 

---

 

∇ 타입스크립트 : 타입 선언.

목  차

1. 타입의 기본
2. 타입 선언법.

 

 

---

Ⅰ. 타입의 기본.

---

 

      Ⅰ - 1. 타입 지정.

              : "타입스크립트"는 일반 변수, 매개변수, 객체 속성 등에    "   : TYPE   "  과 같은 형태로 타입 지정 가능합니다.

let a: string = 'text'; // 문자열
let b: number = 0; // 숫자형
let c: boolean = true; // 논리형
let d: any = true; // 어떤 타입이 올지 모를 때
let e: string | number = '0'; // 문자열이나 숫자가 올 때

 

 

      Ⅰ - 2. 타입 에러.

              : 타입을 선언한 후에,  선언된 타입과 다른 타입의 값을 대입하거나 

                값이 선언된 후에 다른 타입의 값이 대입되면 에러가 발생하게 됩니다.

 

// 문자열로 선언하고 숫자를 대입하면 에러 발생
let a: string = 0; // error

// 문자열 값이 들어가고 이후에 숫자가 대입하면 에러 발생
let b: string = 'text';
b = 1; // error Type '1' is not assignable to type 'string'.  TS2322

 

 

---

Ⅱ. 타입 선언법.

---

    ☆ 타입스크립트는 ES5, ES6의 상위 확장인 언어이므로 자바스크립트의 타입을 그대로 사용하며,

         이외에도 타입스크립트 고유의 타입이 추가로 활용됩니다.

 

---

 

        ◇ 논리형 ( Boolean )

let bool01: boolean = true;
let bool02: boolean = false;

                    

---

        ◇ 숫자형( Number )

let num01: number = 5;
let num02: number = 3.14;
let num03: number = NaN;

 

---

 

        ◇ 문자열( String )

               : ES6의 템플릿 문자열도 지원합니다.

let str01: string = 'text';
let str02: string = `my name is ${val}`;

 

---

 

        ◇ 배열( Array )

               : "배열"은 아래와 같은 두가지 방법으로 타입을 선언 가능합니다.

 

// 문자열만 가지는 배열
let arr01: string[] = ['a', 'b', 'c'];
let arr02: Array<string> = ['a', 'b', 'c'];

// 숫자형만 가지는 배열
let arr03: number[] = [1, 2, 3];
let arr04: Array<number> = [1, 2, 3];

// Union 타입(다중 타입)의 문자열과 숫자를 동시에 가지는 배열
let arr05: (string | number)[] = [1, 'a', 2, 'b', 'c', 3];
let arr06: Array<string | number> = [1, 'a', 2, 'b', 'c', 3];

// 배열이 가지는 값의 타입을 추측할 수 없을 때 any를 사용할 수 있다.
let arr07: (any)[] = [1, 'a', 2, 'b', 'c', 3];
let arr08: Array<any> = [1, 'a', 2, 'b', 'c', 3];

 

 

---

 

        ◇ 함수( Function )

               : 함수는 파라미터에 각각 타입을 선언해 주며, 

                 파라미터 우측에는 해당 함수의 리턴값 타입도 선언해주면 됩니다.

                    -->  함수명 ( 변수 : 타입, 변수 : 타입 ) : 반환타입 {}

function sum(a: number, b: number): number {
  return a + b;
}
console.log(sum(2, 3)); // 5

 

              + 함수타입지정 역시,   리턴값을 숫자형으로 타입 선언했는데, 다른 값이 리턴된다면 역시 에러가 발생합니다.

function sum(a: number, b: number): number {
  return null; // error
}

 

---

 

 

        ◇ 객체( Object )

               : 기본적으로,   typeof 연산자가  "object" 로 반환하는 모든 타입을 나타냅니다.

                      여러 타입의 상위 타입이기 때문에 그다지 유용하지가 않습니다.

 

let obj: object = {};
let arr: object = [];
let func: object = function() {};
let date: object = new Date();

 

           ☞ 보다 정확하게 타입 지정을 하기 위해서,   객체 속성들에 대한 타입을 개별적으로 지정 가능합니다.

let user: { name: string, age: number } = {
  name: 'a',
  age: 20
};
console.log(user); // {name: "a", age: 20}

 

---

 

 

        ◇ 튜플( Tuple )

               :  배열과 유사합니다.

                    + 차이점은 정해진 타입의 요소 개수 만큼의 타입을 미리 선언한 후 배열을 표현합니다.

let tuple: [string, number];
tuple = ['a', 0];
console.log(tuple); // ["a", 0]

 

                  ++ 정해진 요소의 순서 및 개수가 다르면, 오류를 출력합니다.

let tuple: [string, number];
tuple = [0, 'a']; // error
tuple = ['a', 0, 1]; // error

 

                 ++ 데이터를 개별 변수로 지정하지 않고,  단일 튜플 타입으로 지정해 사용할 수도 있습니다.

// 기존 변수
let name: string = 'a';
let age: number = 20;

// 튜플
let user: [string, number] = ['a', 20];
console.log(user); // ["a", 20]

 

              ++ 값으로 타입을 대신할 수도 있습니다. 처음 선언할 때의 값과 다른 값이 할당 되면 에러가 출력됩니다.

let user: ['a', number];
user = ['a', 20]; // ["a", 20]
user = ['a', 30]; // ["a", 30]
user = ['b', 30]; // error

 

              ++ 튜플은 정해진 타입과 고정된 길이의 배열이지만, 값을 할당할 때만 해당됩니다.

                         == push  혹은 splice 같은 메소드를 통해 값을 넣는건 가능합니다.

let user: [string, number];
user = ['a', 20]
console.log(user); // ["a", 20]
user.push(30);
console.log(user); // ["a", 20, 30]

 

---

 

        ◇ 열거형( Enum )

               :  숫자 혹은 문자열 값 집합에, 

                  이름을 부여할 수 있는 타입으로 값의 종류가 일정한 범위로 정해져 있는 경우에 유용합니다.

 

                    + 기본적으로 0부터 시작하며,  값은 1씩 증가합니다.

enum obj {
  a,
  b,
  c,
  d,
  e
}
console.log(obj);
// 0: "a"
// 1: "b"
// 2: "c"
// 3: "d"
// 4: "e"
// a: 0
// b: 1
// c: 2
// d: 3
// e: 4

 

 

       ++ 수동으로 값을 변경할 수 있으며,  변경한 부분부터 다시 1씩 증가합니다.

enum obj {
  a,
  b = 10,
  c,
  d,
  e
}
console.log(obj.b); // 10
console.log(obj.c); // 11

 

 

---

        ◇ 모든 타입( Any )

               :  Any는 모든 타입을 의미하며, 기존의 JS 변수와 마찬가지로 어떠한 타입의 값도 할당 가능합니다.

                    -> 불가피하게 타입을 선언할 수 없는 경우, 유용합니다.

let any:any = 'String';
any = 0;
console.log(any); // 0
any = true;
console.log(any); // true

 

---

        ◇ 빈 타입( Void)

               :  빈 타입인 Void는 리턴값이 없는 함수에서 사용됩니다. 리턴값의 타입을 명시하는 곳에 작성하며,

                       리턴값이 없는 함수는 'undefined'를 반환합니다.

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

 

 

---

        ◇ never

               :  Never 타입은 절대 발생할 수 없는 타입을 나타냅니다.

function errorMsg() {
  throw new Error("오류 발생!");
}
console.log(errorMsg()); // Uncaught Error: 오류 발생!

 

           - errorMsg 함수는 오류를 발생시키기 때문에 null, undefined를 포함한 어떠한 값도 반환하지 않습니다.

               이럴 경우에 never 타입을 사용하면 됩니다.