TypeScript/기초

타입스크립트[기초] 타입 종류 | 타입 별칭 | 타입 표기

뿌비 2022. 5. 22. 20:24
728x90

String

  • 문자열을 나타내는 타입이다.
  • ES6 템플릿 리터럴 (``) 도 string 타입의 값이다.
// :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.
let str: string = 'hi';
let name: string = '홍길동';
let day: string = `오늘이 금요일이었으면 좋겠다`;

Number

  • 숫자를 나타내는 타입이다.
  • 자바스크립트에서는 정수, 부동 소수점 등의 구분이 따로 없고 모든 수가 IEEE754 표준을 따르는 부동소수점인데 타입 스크립트의 number 타입도 마찬가지이다.
let num: number = 10;
let num1: number = 100;
let num2: number = 0.1 + 0.2; // 0.30000000000000004

Boolean

  • 참 또는 거짓을 나타내는 타입이다.
let tr: boolean = true;
let fa: boolean = false;

Object(객체)

[참고] https://harrydony.tistory.com/501
  •  typeof 연산자가 object로 반환하는 모든 타입을 나타낸다
Object 타입을 지정하는 방법
Type  interface
중복선언이 불가능하다. 중복선언이 가능하다.
&을 이용해서 interface의 extends 와 비슷한 기능을 구현할 수 있다. extends 를 이용해서 상위 타입을 상속받을 수 있다.
중복으로 속성을 선언하는 것이 가능하다. 중복속성이 발생하면 에러가 발생한다.

Array

  • 배열을 나타내는 타입이다.
  • 제네릭을 사용할 수 있다.
let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];

Tuple

  • 서로 다른 타입을 함께 가질 수 있는 배열이다
  • 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열을 표현할 수 있다
// 인덱스의 타입이 동일할 필요는 없다 
let arr: [string, number] = ['hi', 10];
let arrTest: [string, number, number, boolean, string] = ['hi', 10, 20, true,'bye'];

// 만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.
arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

Enum

[참고] https://medium.com/@seungha_kim_IT/typescript-enum%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3b3ccd8e5552
  •  enumerated type(열거형)을 의미한다.
  • enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능이다
  • 특정 값(상수)들의 집합을 의미한다.
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

// 인덱스 번호로도 접근할 수 있다
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];

// enum 의 인덱스를 사용자 편의로 변경하여 사용할 수도 있다.
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

Any

  • any 타입은 모든 타입과 호환 가능하다. 즉, 모든 값의 타입을 any로 any 타입의 변수에는 모든 값을 할당할 수 있다.
  •  any 타입 값의 메서드를 호출할 시에도 타입 검사가 아예 수행되지 않는다. 이때 해당 실제로 존재하지 않는다면 타입 검사는 통과하되 런타임 에러가 발생할 것이다.
  • any 타입은 타입 스크립트 타입 시스템의 비상 탈출구(escape hatch)이다. any는 타입 정의를 제공하지 않는 라이브러리, 일단 무시하고 넘어가고 이후에 정확히 적고 싶은 부분 또는 코드 작성 시점에 형태를 알 수 없는 값 등의 타입 표기에 유용하다. 하지만 any를 남용하면 타입 안정성에 구멍이 뚫린 코드가 되어 타입 스크립트를 사용하는 의의가 사라지므로 꼭 필요한 경우에만 사용해야 한다.
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

let bool: any = true;
bool = 3;
bool = 'whatever';
bool = {};
bool.nonExistingMethod();
bool.whatever(false);

Union 

  • 하나의 변수에 제한된 몇 가지 타입들을 동시에 지정하고 싶을 때 사용한다
  • 여러 타입을 지정하고 싶은 경우에는 | 을 사용한다
  • 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다
// test는 string 과 number의 타입을 가질수 있는 union의 타입을 가진 변수 이고 이 변수에 hi를 할당 해주었다
let test: string | number  = 'hi';

// test 에 재할당
test = 10;
test = 'hello';

// 에러: Type 'true' is not assignable to type 'string | number'.
// test는 boolean 타입은 가질 수 없기 때문에 타입 에러가 나타나게 된다.
test = true;

Type Aliases (타입 별칭) 

☆  union 타입을 쓸 때 변수는 다르지만 안에 타입은 같은 상황을 반복해야 할 때는 Type Aliases (타입 별칭)을 사용해서 중복되는 코드를 줄여준다

  • 코드가 계속 중복되는 상황이라면  type 키워드를 사용해 타입에 별칭을 붙여준다 
  • 코드를 재사용 함으로써 불필요한 코드를 줄여 보다 더 간결하게 해준다
// 별칭 사용 전
let a = number | string;
let add = (b: number|string , c:number|string ):void => {}

// 별칭 사용 후
// numOrStr 변수에 타입을 지정 해준다 
type numOrStr = number | string;
let a = numOrStr;
let add = (b:numOrStr, c:numOrStr ):void => {}

Void

  • 변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.
  • 아무런 값도 반환하지 않는 함수의 반환 타입을 표시할 때 사용한다.
let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

Never

  • 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다.
  • 아무런 값도 가질 수 없는 타입이며 never 타입의 변수에는 null, undefined를 포함해 어떤 값도 할당할 수 없다
  • 절대 발생할 수 없는 타입을 나타낸다. 일반적으로 함수의 리턴 타입으로 사용된다.
// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

// 이 함수는 항상 에러를 throw 하는 함수로 어떤 값도 반환하지 않는다.
// 이 때,이런 함수의 반환 타입을 never 타입을 사용해 나타낼 수 있다.
// never 타입의 함수는 항상 오류를 출력하거나 리턴값을 절대 반환하지 않음을 의미한다.
function alwaysThrow(): never {
  throw new Error(`I'm a wicked function!`);
}

null  /  undefined

  • Null : 아무것도 없다.
  • Undefined : 아직 정의되어 있지 않다.
  • null 타입과 undefined 타입은 각각 null과 undefined라는 하나의 값만을 갖는다.
  • 이 두 값을 자기 자신의 타입, void 타입 이외의 타입에 할당하려 하면 타입 에러(TS2322: Type 'null' is not assignable to type 'number' 등)가 발생한다.
  • 타입 스크립트에서, 원래 null과 undefined는 기본적으로 모든 타입의 서브타입이다. 즉 아무런 설정이 없다면 아래와 같은 식의 할당이 허용된다.
let a: number = null;

☆ 하지만 이런 동작은 버그를 양산하기 쉽기 때문에 타입 스크립트 2.0에서는 null과 undefined 값을 다른 타입에 할당하는 것을 막는 --strictNullChecks 플래그가 추가되었다.

let nullTest: null = null;
let undTest: undefined = undefined;
let numTest: number = null; // TS2322: Type 'null' is not assignable to type 'number'

[참고] https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/primitive-types

[참고] https://joshua1988.github.io/ts/guide/basic-types.html

728x90
저작자표시 비영리 변경금지