타입스크립트의 타입

변수 타입 선언

1. 기본타입

• string : 문자열
• boolean : true/ false
• number : 숫자
• symbol :
  • symbol 생성자를 호출해 생성된 고유값
  • ES6 에 추가된 변경 불가능한 타입으로 객체 프로퍼티를 만들 수 있다.
  • ex. const sym1 = Symbol(’orderId’); const sym2 = Symbol(’orderid’); ⇒ 두 Symbol 은 동일하지 않다.
  • 새로운 Symbol를 추가시 new 키워드는 생략됨,즉 symbol은 객체 프로퍼티의 고유값을 가진 키를 생성할떄 사용한다.
• any : 모든 타입을 허용하는 타입, 코드를 쓰는 동안 정해지지 않는 변수를 지정할 수 있음
  • 숫자, 텍스트, 부울 또는 커스텀 타입 값을 할당 할 수 있음
  • 사용할경우 타입 체크의 장점을 잃고 가독성이 떨어지므로 추천하지 않음
• unknown : any와 비슷하나 먼저 타입을 지정하거나 좁혀지지 않으면 허용되지 않음
• never : 도달할 수 없는 코드를 나타냄
  • 절대 반환하지 않는 함수에 사용함
  • 절대로 실행 종료되지 않는 함수나 오류를 발생시키기 위해서만 존재하는 함수에서 사용
  • 대표적 예시 : while (true){...} → 함수가 종료되지 않고 계속 실행됨
  • function throwError(message : String ) : never {...}
• void : 값이 없음
  • 실행을 완료하지만 값을 반환하지 않음
  • 런타임 중에 함수 본문에 return 문이 없는 경우 undefined를 반환한다. 그러나 void 타입을 사용하면 이와 같은 실수를 방지 할 수 있다.
• string literal : 문자열로 타입 선언
  • let name3 : ‘John Smith’;
• object
  • 어떤 타입의 데이터를 담을 수 있음
  • 권장하지 않음
  • 배열도 담을 수 있음
  • 예시 : function acceptObject(obj : object){...}

타입스크립트내 타입 표기는 선택사항 이다.
일부 변수에 타입 표기가 없는 경우, 타입스크립트의 타입 검사기가 해당 타입을 유추할 수 있다.

 

2. 함수 본문 내 타입 선언

• 타입 스크립트 함수표현식은 자바스크립트와 유사하지만 파라미터 타입과 반환 갑을 명시적으로 선언한다.
• 타입스크립트로 생성한 함수 예시
• ⇒ 3가지 인자값이 type을 선언함으로서 다른 type으로 인자값을 받아 발생하는 오류를 방지한다. 반환값은 number 타입으로 결과가 숫자가 아니라면 오류를 발생시켜 타입의 실수를 방지한다.

function calcTax(state: string, income : number, dependents : number) : number{...}

3. 유니온 타입 선언

• 유니온은 or 연산자 처럼 변수에 지정할 수 있는 타입이 여러개일 경우에 사용한다.
• let padding : string | number; → padding 에는 string 혹은 number 타입만 허용
• function padLeft(value: string, padding : string | number) : string{...} → 두번째 인자는 string 혹은 number만 허용한다
• 활용도가 높은 타입!!!

type Direction = ‘left’ | ‘right’ | ‘up’ | ‘down’;

function move ( direction : Direction){
console.log( direction );
}
move (‘left’);
move (‘right)’;
move (‘up’);
move (‘down’) ;

---

커스텀 타입 정의

1. 타입 키워드 사용

• 새로운 타입을 선언하거나 타입 별칭을 이용하여 존재하는 타입에 다른 이름을 붙여 사용할 수 있다
• 타입 별칭은 자바스크립트 코드로 컴파일 되지 않음

2. 클래스 내 커스텀 타입

class Person{
    firstName: string;
    lastname: string;
    age: number;
}

const p = new Person();
p.firstName = 'John';
p.lastName = 'Smith';
p.age = 25;

• 타입스크립트는 클래스를 인스턴스하고 프로퍼티를 초기화 할 수 있다.
• 생성자의 파라미터 등에 타입을 표기 가능
• 타입스크립트도 접근제어자가 있고  private, protected, public  키워드가 있다.
• CLASS로 선언하면 NEW 키워드 처럼 여러번 사용이 가능하다.

3. 인터페이스를 사용한 커스텀 타입

interface Person {
    firstName: string;
    lastName: string;
    age: number;
}

const p:Person = {
    firstName: 'John',
    lastName: 'Smith',
    age: 25
};

function savePerson (person: Person): void{
    console.log('Saving ' , person);
}
savePerson(p);

• 인터페이스는 객체프로퍼티 또는 메소드구현을 위해 사용

4. 타입가드 in

• IN 키워드는 타입 범위를 축소하는 표현
• 유니온 타입 인자를 가진 함수는 호출동안 실제 값을 체크할 수 있다.

interface A { a: number };
interface B { b: string };

function foo(x: A|B){
    if('a'in x){
        return x.a;
    }
    return x.b;
}

---

any, unknown

• any
  • 모든 타입의 값을 가질 수 있다
  • 존재하지 않는 프러퍼티에 접근하면 런타임 중에 오류가 발생할 수 있다.
• unknown
  • 컴파일러는 프로퍼티에 접근하기 전에 unknown 타입의 변수에 타입 범위를 줄이라고 경고한다. 그러므로 런타임 오류를 방지한다
  • 컴파일시 오류 발생 !!

---

타입표기는 선택사항이다. 그렇다면 언제 타입을 표기하는가?

⇒ 별도로 타입을 지정하지 않으면, 타입 추론이 잘 되지 않는 경우에 표기한다.

const regex: RegExp = new RegExp(/pattern/);

// 위와 같은 상황에서 : RegExp 라는 코드는 불필요한 선언으로 간주하고 지운다.
// 하지만 다음처럼 변수 생성과 동시에 값을 할당하지 않는 경우,

let regex2 = null;
regex2 = new RegExp(/pattern/);

// 이런 상황에서는 regex 변수의 타입 추론이 제대로 되지 않으므로 타입을 같이 선언해준다.