typescript - type 종류

남자김용준·2022년 10월 15일
0
  1. 타입스크립트의 기본 타입
  • number
  • boolean
  • string
  • object
  1. never type
    절대 반환을 하지 않는 함수
const neverTypeFunc = () => {
	while(true) {
    	console.log('Never Type Function');
    }
}
  1. union type
    하나의 변수에 지정할 수 있는 타입이 여러 개일 때, 유니온 타입을 사용
const a: string | number;
  1. array
let str: Array<string> = ['STRING_ARRAY'];
  1. tuple
let member: [string, number] = ['string',10];

배열은 요소의 개수에 제한이 없고, 특정 타입으로 배열 요소의 타입을 강제할 수 있다.
하지만 튜플은 n개의 요소에 대응하는 타입이다.

let member: [튜플 타입] = [배열]; 구조로 이루어져 있다.

  1. object
    타입을 object로 선언하면 typeof 연산자가 기본적으로 모든 타입을 나타낸다. 최상위 타입이기 때문에 좀 더 명시적으로 타입을 지정해주는 게 좋다

6.1 인덱스 시그니차

const student: { [index: string]: number } = {};
student.id = 220101;  // ok
student.id = 'string' // error

빈 객체를 만들 때 필드의 자료형을 지정하지 않은 채 인덱스를 사용하면 된다.

  1. enums
    비슷한 종류의 아이템들을 함께 묶어서 표현할 수 있는 수단으로 숫자 또는 문자열 값 집합에 이름을 부여할 수 있는 타입
enum Class {
  Rock,
  Scissors,
  Paper
}

enums의 이름은 첫 문자는 대문자로 쓰고 키의 첫 문자도 앞 글자를 대문자로 표시하는 것을 권장한다.

  1. type aliases & interface
  • type aliases
    타입에 대한 별칭을 제공하며, 재사용할 수 있다. 타입에 이름을 지어 주는 것이지, 새로운 타입을 생성하는 것은 아니다.

    type 별칭 = 타입; 으로 정의한다.

type Food = string;
  • interface
    타입 별칭과 비슷하게 새로운 타입을 정의하는 또 다른 방법. 객체, 함수, 함수의 파라미터, 클래스 등에 사용할 수 있으며 상호 간에 정의한 약속 혹은 규칙을 의미한다.

interface 인터페이스이름 {속성: 타입;} 으로 정의한다.

interface User {
  name: string;
  age: number;
}

8.1. readonly
인터페이스를 사용하여 객체를 생성할 때, 값을 할당한 후 변경할 수 없는 속성을 의미

interface User {
	readonly name: string;
}
// 읽기전용 배열
let Users: ReadonlyArray<string> = ['str1', 'str2'];

8.2 클래스 타입
implements로 미리 정의된 인터페이스를 채택하여 클래스를 정의할 수 있다.

interface User {
	name: string;
  	age: number;
  	getAge(age: number): void;
}

class newUser implements User {
	name: string = "str1"
  	age: number = 20;
  	getAge(age: number) {
    	console.log(this.age);
    }
  	constructor() {}
}

8.3 interface 와 type aliases 차이
인터페이스와 타입 별칭의 차이는 타입의 확장 가능, 불가능 여부이다.

interface Human {
	name: string;
}

interface User {
	role: string;
}

interface UserInfo extends User, Human {
	age: number;
}

let person: UserInfo = {
	name: 'str1',
  	role: 'admin',
  	age: 20,`
}

// 반면 type aliases의 경우는 타입을 확장하는 게 아닌 새로 정의

type User = {
	name: string;
}

type UserInfo = User & {
	age: number;
}
  1. 유니온 타입
    9.1 interface union
    모든 타입의 공통 속성에만 접근 가능
interface Ujin {
	name: string;
  	age: number;
}

interface Dabin {
	name: string;
  	character: string;
}

function combine(person: Ujin | Dabin) {
	person.name // ok
  	person.age  // error
  	person.character // error
}
  1. type casting과 type assertion
  • type casting
    java에서 타입 캐스팅이란 형 변환을 의미한다. 타입스크립트에서도 특정 타입임을 단언해야하는 상황이 잇는데 특별한 검사나 데이터 재구성을 하지 않기 때문에 type casting과는 별개의 개념이다.

  • type assertion
    type assertion이란 시스템이 추론한 타입의 내용을 변경하는 것이다. 실행시간에 어떤 동작이 일어날 것인지를 내포하는 type casting보다 type assertion이 더 적합한 표현이기 때문에 헷갈리지 않아야 한다. 타입 어설션은 <> 와 as 연산자를 이용하는 방법이 있다.

  1. 함수
    11.1 함수 오버로드
function sum(a: string, b: string) : string;
function sum(a: number, b: number) : number;

function sum(a: any, b: any): any {
	return a + b;
}
function sum(a: number): number;
function sum(a: number, b: number): number;
function sum(a: number, b: number, c: number): number;

function sum(a: number, b?:number, c?:number): number {
	return a + (b || 0) + (c || 0);
}
interface NicknameMaker {
	name: string,
  	num: number,
  	init(this: NicknameMaker): () => {};
}

function makeNickname(name: string, num: number): NicknameMaker;
function makeNickname(name: string, num: string): string;

function makeNickname(name: string, num: number | string): NicknameMaker | string {
	if (typeof num === 'number') {
    	return {
        	name,
          	num,
          	init: function (this: NicknameMaker) {
            	return () => {
                	return this.name + this.num;
                }
            }
        }
    } else {
    	return 'str1';
    }
}
profile
frontend-react

0개의 댓글