Kimsora✨
article thumbnail
Published 2023. 3. 30. 07:12
타입스트립트 기본타입 2 TypeScript
320x100
반응형

타입 별칭 (Type Aliases)

  • type키워드를 사용하여 설정하는 방법이다
    ⇒타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 개발자가 쉽게 관찰하도록 이름을 부여
  • 인터페이스와 유사하게 동작하며 유니온타입,인터섹션 타입등의 고급 타입에 대해서도 정의 할 수있다
  • 코드의 가독성을 높여 코드의 유지보수성을 향샹시킬수 있다
type Developer = {
  name: string;
  skill: string;
};

타입 별칭을 사용하여 타입을 직접 “생성”할 수 있다

유니온 타입을 저장하는 것만 가능한 것이 아니고 복잡할 수 있는 객체 타입에도 별칭을 붙일 수 있다

 type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 };

 

 

타입 별칭을 사용하면 불필요한 반복을 피하고 타입을 중심에서 관리할 수 있고 단순화 할 수 있다

 function greet(user: { name: string; age: number }) {
   console.log('Hi, I am ' + user.name);
 }

 function isOlder(user: { name: string; age: number }, checkAge: number) {
   return checkAge > user.age;
 }

단순화 후:

type User = { name: string; age: number };
 
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

 

 

함수 반환 타입 및 무효 void

void는 자바스크립트에는 없는 키워드로 void가 지정된 함수는 undefined를 반환하게 된다

함수에 타입을 지정할 때 처럼 타입스크립트 스스로 아무것도 반환하지 않는 함수에 void타입을 지정해준다

//TODO return 타입 설정
function add(n1: number, n2: number): number {
  return n1 + n2;
}

//TODO return 타입 : void / 아무런 return이 없을 때
// functin에서 아무런 return이 없을 때 undefied 타입이 불가능하다
// undefined 대신 void를 사용한다
function printResult(num: number): void {
  console.log('result' + num);
}

function printResult2(num: number): void {
  console.log('result' + num);
  return;
}

// undefined를 return할 때 undefined 타입을 사용할 수는 있지만,
// 거의 사용하지 않는다.
function printResult3(num: number): undefined {
  console.log('result' + num);
  return;
}

printResult(add(5, 12));

// undefined 타입은 존재한다
let someValue: undefined;

undefined는 TypeScript의 타입 중 하나로, void와 다르다.

 

둘의 차이첨

  • undefined는 타입을 반환하기 위해서는 함수 내에서 return undefined;와 같이 작성해야 한다
  • void는 타입스크립트에서 타입의 일종으로, 함수의 반환값이 없을 때 명시적으로 반환 타입으로 사용한다

 

함수 타입

매개변수와 반환값의 타입을 포함해서 함수로 정의한다

변수: (매개변수의 타입) => 반환값의 타입 어떤 타입을 가진 매개변수 를 받아 어떤 타입의 값을 반환 하는지

let combineValues: (a:number, b:number) => number;

 

잘못된 예시

function add(n1: number, n2: number) {
	return n1 + n2;
}

let combineValues;

combineValues = add;
combineValues = 5;

combineValues 라는 변수에 처음에 함수가 할당이 되었고, 이후 숫자가 할당이 되었는데도 컴파일 할 때는 에러가 발생하지 않는다.

let combineValues라고만 명시하면 combineValues의 타입은 any가 되기 때문

 

function add(n1: number, n2: number) {
	return n1 + n2;
}

function printResult(num: number): void {
	console.log('Result is: ' + num);
}

//  함수타입 지정
let combineValues: (a: number, b: number) => number;

// 변수에 함수를 할당해서 해당 함수를 가리킬 수 있다.
combineValues = add; // ⭕️ 작동: 함수 add는 숫자타입을 가진 매개변수 2개를 받아 숫자타입의 값을 리턴하는 함수이기 때문에 combineValues의 조건과 일치한다.

combineValues = printResult; // ❌ 에러: printResult는 함수이긴 하지만 숫자 타입의 매개변수가 1개 뿐인데다, 반환값이 없으므로(void) combineValues의 조건과 맞지 않는다.

combineValues = 5; // ❌ 에러: combineValues는 함수 타입이여야 한다.

 

unknown type

선언된 변수의 값으로는 모든 타입이 올 수 있다. (any 타입과 비슷하지만 다르다)

  • unknown에는 메서드를 호출할 수 없다.어떤 타입인지 확실하지 않기 때문에 타입스크립트는 어떠한 연산이든 실행하지 않는다.
let userInput: unknown;
console.log(userInput.length); // ❌ 에러
  • any를 제외하고 다른 타입을 가진 변수에 할당할 수 없다.
  • 고정된 값에 할당할 수 있다

⇒고정된 타입을 가지고 있는 변수에 unknown 타입을 가진 변수를 할당할 수 없다.

let userInput: unknown;
let userName: string;

userInput = 5; // ⭕️ 작동
userInput = 'Harry'; // ⭕️ 작동
userName = userInput; // ❌ 에러

 

 

타입을 가진 변수를 다른 변수에 할당하기 위해서는 타입 체크를 해주면 된다

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = 'Harry';
if (typeof userInput === 'string') { 
  userName = userInput; // ⭕️ 작동
}

⇒any는 타입스크립트가 넘겨버리지만 unknown은 짚고 넘어가도록 tsc가 작동한다.

 

 

never 타입

  • 절대 발생할 수 없는 타입을 나타낸다.
  • 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.
  • 모든 타입에 할당 가능한 하위 타입이다.
  • 함수의 마지막에 도달할 수 없다.
let foo: never;
let goo: any = 123;

foo = goo; // Error

never타입은 any 타입 조차 할당될 수 없다

⇒never를 반환하는 함수를 사용하면 불가능한 위치에 추가적인 코드를 사용하게끔 해 준다. 이는 더 나은 에러 메시지를 보여주거나 파일 또는 반복문과 같은 자원을 닫는 데 유용하다.

728x90
반응형

'TypeScript' 카테고리의 다른 글

타입스트립트 기본타입 1  (6) 2023.03.28
profile

Kimsora✨

@sorarar

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

WH