1. Union Type

function combine(input1 : number|string,input2 : number|string){
    // union type으로 했을시, 타입스크립트에서는 여러개의 타입이 있는 사실만 알지,
  // 그안에 무슨 타입이 있는지 몰라서 경고 문구가 나온다.
    //const result = input1 + input2;
    let result;
    if ( typeof input1 === 'number' && typeof input2 === 'number'){
        result = input1 + input2;
    } else {
            result = input1.toString() + input2.toString();
  }
    return result
}
const combineAges = combine(20,36);
  • 서로 다른 종류의 값을 사용할 때 사용하는 타입
  • union type으로 했을시, 타입스크립트에서는 여러개의 타입이 있는 사실만 알지,
    그안에 무슨 타입이 있는지 모른다.
  • 그러므로 union 타입을 썼을 때, 다른 타입의 메소드를 쓸려면 타입가드로 타입스크립트에 무슨 타입인지 알려줘야한다.

2. Literal type

  • literal의 사전적 정의는 정확한이다. number string같이 넓은 범위의 타입을 지정하는 것이 아닌 특정 데이터 변하지 않는 데이터를 지정하는 것이 Literal type이다.
  • 추가적인 공부 : Template Literal https://toss.tech/article/template-literal-types

3. Type aliases

  • 사용자가 지정한 타입을 만들어준다.
  • 자주 쓰이는 union type들을 타입 별칭으로 동일한 유형을 설정 해줄수 있다.
type 타입별칭 = 타입1 | 타입2 | 타입3 ... | 타입N

4. function type

  • 함수에 매개변수에 type을 설정하는 것 뿐만 아니라, return되는 반환값에도 설정이 가능하다.
function add(n1 : number, n2: number) : number {
        return n1+n2
}
  • 타입스크립트가 추론이 가능한 반환 타입이면, 반환 타입을 명시하는 것보다. 타입스크립트가 타입을 추론하는게 좋다.
  • 아무것도 반환하지 않을때에는 void 로 한다.
  • undefined 라는 타입이 타입스크립트에는 존재하지만, 함수에서 반환문이 없으면, 기술적으로는 undefined 가 되지만 반환타입에는 void를 써야한다.
  • 만약 함수에서 return 으로 아무 반환값을 주지 않는 것을 반환할때에는 undefined 를 함수타입으로 쓸순 있지만, 이때에도 void 도 적용이 가능은하다.

5. functions as type

// Bad situation
function add(a : number, b: number) : number{
    return a+b;
}
let combine;
combine = add;
console.log(combine(5,3)); // 8
//cursor on combine : combine type is any;
combine = 5;
// therefore combine can insert any type
  • 위와 같은 상황에서 함수를 할당했을때, 변수에는 별다른 타입을 병기하지 않았기 때문에 any 타입이 되고, 우리가 원치 않는 타입으로 변화할수가 있다.
let combine : Function;

let combine : (a:number,b:number)=> number;
  • 해결방법은 2가지 이다.
  • 첫번째는 Function 타입이라고 명시하는것이다.
  • 하지만 이 방법은, 어느 함수가 와도 되므로, 좋지 않은 방법이다.
  • 두번째는 함수형태의 타입을 지정해주는 것이다.
  • 화살표 함수와 비슷하게, 인수로 들어오는 타입과 return 되는 타입을 명시해주면 된다.
  • 매개변수는, 실제 함수의 매개변수 이름과 동일할 필요가 없다.
  • 위와 같은 구조의 함수 모양일때에만 할당할수 있게 된다.

6. callback

function addAndHandle(n1 : number, n2 : number, cb : (num :number)=>void){
        const result = n1 + n2;
      const notUsed = cb(result);
}

addAndHandle(10,20,(result)=>{
    console.log(result) 
    return result})
  • 콜백함수 의 타입을 결정지어, 미리 콜백함수의 인자값으로 무엇으로 들어오고, 반환되는지 알수 있는 이점이 있다.
  • 그리고 반환하는 타입에 void가 있는데, return 되는 값이 있는데 괜찮다.
  • 그 이유는 return 타입을 void로 함으로서, 이 함수의 반환값을 쓰지 말라고 명시적으로 되어있고
  • 반환된 값 또한 void 타입이기 때문에, 다른거와 쓸 수 없게 된다.

7. unknown Type

  • any와 다르게 어떤 값이 들어올지 모를때 사용할수 있다.
  • any는 어떤 값이여도 상관이 없는거고,
  • undefined는 어떤 값이 들어올지 모르고, 나중에 타입을 정할때 사용이된다.
  • 그러므로 undefined를 할당한 변수는 메소드나 변수등에 아예 접근이 안된다.
  • 이 undefined를 해결을 할려면, typeof와 같은걸로 타입가드를 통과해야지만 사용을 할 수 있다.

8. never Type

function generateError(message : string, code : number) : never{
      throw {message : message, errorCode : code }
}

generateError('An error occurred',500)
  • 절대 리턴값을 절대로 내보내지 않거나 항상 오류를 출력하는 타입일때 never Type을 쓴다.
  • error를 thorw 하거나 무한반복문이 걸렸을때와 같이 아무값이 절대 반환이 안될때 사용한다.

'프로그래밍언어 > Typescript' 카테고리의 다른 글

타입스크립트 타입  (0) 2022.07.10
타입스크립트 타입 vs 자바스크립트 타입  (0) 2022.07.04
TS 공부  (0) 2022.05.12

+ Recent posts