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

1. Number Type

  • 숫자
  • All numbers, no differentiation between integers or floats

2. String Type

  • 백틱, 작은따옴표, 큰 따옴표
  • All text values

3. boolean Type

  • true of false
  • Just these two, no “truthy” or “falsy”

4. Object

  • 객체 타입 (컴파일 단계에서 명시적으로 선언을 해주거나, 기본적으로 할당되었을때 타입스크립트가 인식한다)
  • 중첩 객체 또한, 객체 안에 객체에 대한 타입을 명시해주면 가능하다.
  • Any Javascript object, more specific types are possible

5. Array

  • [1,2, 3]
  • Any javascript array type can be flexible or strict
  • 가변적인 길이를 가질 수 있으면 유연한 특성을 가지고 있다.

6. tuple

  • [1, 2]
  • Added by Typesciprt : Fixed-length array
  • 타입스크립트에서 추가된 타입으로, 길이와 타입이 고정된 배열이다.
const person : {
name : string;
age : number;
hobbies : string[];
role : [number, string];
} = {
name : 'mmm',
age : 30,
hobbies : ['Sports', 'Cooking'],
role : [2, 'author']
// role : string|number[]
// union type으로 추론을 한다.
}
  • 하지만 튜플로서 값을 잘못된거 넣거나, 재할당은 막아주지만, 배열의 메소드인 push pop은 막지 못한다.

7. Enum

  • enum {NEW, OLD}
  • Added Typescirpt : Automatically enumerated global constant identifiers
  • 매직 넘버로 숫자로 할 시, 이게 무엇인지 알기 어려워진다. 그러므로, 이걸 관리하기 위한 방법으로 Enum을 사용한다.
// 사용자가 만든 타입이므로 대문자로 시작
enum Role {
 ADMIN,READ_ONLY,AUTHOR
};
// 위와 같이 할시 앞에서부터 0
// 기본값은 0 으로 시작
// 초기값을 다른 숫자로 할시 그 숫자를 기준으로 값이 증가
// 별도로 추가적인 값을 할당할수도 있다.

8. Any

  • *
  • Any kind of value ,no specific type assignment
  • 와일드카드 같은..
  • any는 쓰지말자

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

[TS] Advanced Type  (0) 2022.07.13
타입스크립트 타입 vs 자바스크립트 타입  (0) 2022.07.04
TS 공부  (0) 2022.05.12

자바스크립트 typeof는 런타임 중에 에러를 체크한다.

 

타입스크립트는 타입을 컴파일 중에 체크를 해 에러를 미리 방지해준다.

 

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

[TS] Advanced Type  (0) 2022.07.13
타입스크립트 타입  (0) 2022.07.10
TS 공부  (0) 2022.05.12

1. ts에 대한 타입은 type이나 interface를 통해 지정이 가능하다.

2. 만약 객체의 프로퍼티가 나중에 존재하거나 그럴때에는 선택적 프로퍼티인 ?을 넣어서 선언을 해준다.

3. 배열은 타입[] 으로 선언을 해준다.

4. Element의 subset이 HTMLElement이다.

5. 함수의 리턴값이 여러종류일 때 제너릭을 이용해서, 문제를 해결할 수 있다.

6. Map의 get은 선언한 타입이거나 undefined가 올 수있다. 그러니 널병합연산자로 undefined를 제거해줄수 있다.(부정확)

7. interface는 extends을 통해 확장이 가능하고, 이것은 type일때에는 &와 비슷하다.

8. interface는 여러번 정의가 가능하고, 그럴때마다 프로퍼티가 병합이 된다.

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

[TS] Advanced Type  (0) 2022.07.13
타입스크립트 타입  (0) 2022.07.10
타입스크립트 타입 vs 자바스크립트 타입  (0) 2022.07.04

+ Recent posts