Skip to content

Latest commit

 

History

History
264 lines (243 loc) · 7.51 KB

01.타입기본(Types).md

File metadata and controls

264 lines (243 loc) · 7.51 KB
Raw

01. 타입 기본(Types)

타입 지정

타입 스크립트는 일반 변수, 매개 변수(Parameter), 객체 속성(Property) 등에 :TYPE 과 같은 형태로 타입을 지정할 수 있습니다.

function someFunc(a: TYPE_A, b: TYPE_B) : TYPE_RETURN {
    return a+b;
}
let some: TYPE_SOME = someFunc(1,2);

add함수와 매개변수 a, b, c 를 number타입으로 지정함

function add(a: number, b:number){
    return a+b;
}
const sum: number = add(1,2);
console.log(sum); // 3

타입 선언

불린: Boolean

단순한 참(true) / 거짓(false) 값을 나타냅니다.

let isBoolean: boolean;
let isDone: boolean = false;

숫자: Number

모든 부동 소수점 값을 사용할 수 있다.

let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let infinity: number = Infinity;
let nan: number = NaN;

문자열 : String

문자열을 나타낸다. 작은 따옴표 (''), 큰 따옴표(" ") 지원한다.

let str: string;
let red: string = 'Red';
let green: string = "Green";
let myColor: string = 'My color is ${red}.';
let yourColor: string = 'Your color is' + green;

배열 : Array

순차적으로 값을 가지는 일반 배열을 나타낸다. 두 가지 방법으로 타입 선언 가능

// 문자열만 가지는 배열
let fruits: string[] = ['Apple','Banana','Mango'];
// Or
let fruits: Array<string> = ['Apple','Banana','Mango'];

// 숫자만 가지는 배열 
let oneToSeven: number[] = [1,2,3,4,5,6,7];
// Or
let oneToSeven: Array<number> = [1,2,3,4,5,6,7];

문자열과 숫자를 동시에 가지는 배열도 선언할 수 있다.

let array: (string|number)[] = ['Apple', 1, 2, 'Banana', 'Mango',3];
//Or
let array: Array<string | number> = ['Apple',1,2,'Banana','Mango',3];

배열이 가지는 항목의 값을 단언하 ㄹ수 없다면 any를 사용할 수 있다.

let someArr: any[] = [0, 1, {}, [], 'str', false];

인터페이스(Interface)나 커스텀 타입(Type)을 사용할 수도 있다.

interface IUser {
    name: string,
    age: number,
    isValid: boolean
}
let userArr: IUser[] = [
    {}
        name: 'Neo',
        age: 85,
        isValid: true
    },
    {
        name: 'Lewis',
        age: 85
        isValid: false
    },
    {
        name: 'Evan',
        age: 36,
        isValid: true
    }
];

읽기 전용 배열을 생성할 수도 있다. readonly 키워드나 ReadonlyArray 타입을 사용하면 된다.

//push 하거나 값을 재할당 할 수 없다. 
let arrA: readonly number[] = [1,2,3,4];
let arrB: ReadonlyArray<number> = [0,9,8,7];

튜플 : Tuple

tuple 타입은 배열과 매우 유사하다. 차이점이라면 정해진 타입의 고정된 길이 배열을 표현한다.

// Variables
let userId: number = 1234;
let userName: string = 'HEROPY';
let isValid: boolean = true;

//Tuple
let user: [number, string, boolean] = [1234,'HEROPY', true];

Tuple은 정해진 타입의 고정된 길이 배열을 표현하지만, 이는 할당(Assign)에 국한된다. .push()나 .splice()등을 통해 값을 넣는 행위는 막을 수 없다.

let tuple: [string, number];
tuple = ['a',1];
tuple = ['b',2];
tuple.push(3);

배열에서 사용한 것과 같이 readonly 키워드를 사용해 읽기 전용 튜플을 생성할 수도 있다.

열거형: Enum

Enum은 숫자 혹은 문자열 값 집합에 이름(Member)을 부여할 수 있는 타입으로, 값의 종류가 일정한 범위로 정해져 있는 경우 유용하다. 기본적으로 0부터 시작하며 값은 1씩 증가한다.

모든 타입 : Any

Any는 모든 타입을 의미한다. 따라서 일반적인 자바스크립트 변수와 동일하게 어떤 타입의 값도 할당할 수 있다. 외부 자원을 활용해 개발할 때 불가피하게 타입을 단언하 ㄹ수 없는 경우, 유용할 수 잇다.

let any: any = 123;
any = 'Hello world';
any = {};
any = null;

다양한 값을 포함하는 배열을 나타낼 때 사용할 수도 있습니다.

const list: any[] = [1, true, 'Anything!'];

컴파일 옵션 "noImplicitAny": true 을 통해 any 사용 시 에러를 발생시킬 수도 있다.

알 수 없는 타입 : UnKnown

Any와 같이 최상ㅇ위 타입인 Unknown은 알 수 없는 타입을 의미한다. Any와 같이 Unknown에는 어떤 타입의 값도 할당할 수 있지만, Unknown을 다른 타입에는 할당할 수 없다.

일반적인 경우 Unknown은 타입 단언(Assertions)이나 타입 가드(Guards)를 필요로 한다.

let a : any = 123;
let u : unknown = 123;

let v1: boolean = a; // 모든 타입(any)은 어디든 할당할 수 있다.
let v2: number = u; // 알 수 없는 타입 (unknown)은 모든 타입 (any)을 제외한 다른 타입에 할당할 수 없다. 
let v3: any = u;
let v4: number = u as number; // 타입을 단언하면 할당할 수 있다.

다양한 타입을 반환할 수 있는 API에서 유용할 수 있다.

Unknown 보단 좀 더 명확한 타입을 사용하는 것이 좋다.

type Result = {
    success: true,
    value: unknown
} | {
    success: false,
    error: Error
}

export default function getItems(user: IUser): Result {
    //some logic..
    if (id.isValid){
        return {
            success: true,
            value: ['Apple','Banana']
        };
    } else {
        return {
            success : false,
            error: new Error('Invalid user.')
        }
    }
}

객체: Object

기본적으로 typeof 연산자가 object로 변환하는 모든 타입을 나타낸다.
여러 타입의 상위타입이다.

let obj: object = {};
let arr: object = [];
let func: object = function() {};
let nullValue: object = null;
let date: object = new Date();

보다 정확하게 타입 지정을 하기 위해 다음과 같이 객체 속성(Properties)들에 대한 타입을 개별적으로 지정할 수 있다.

let userA: {name: string, age: number} = {
    name: 'HEROPY',
    age:123
};

let userB: {name: string, age: number} = {
    name: 'HEROPY',
    age: false,
    email: 'dus7653@gmail.com' //Error
}

반복적인 사용을 원한다면, interfase나 type을 사용하는 것이 좋다.

interface IUser{
    name: string,
    age: number
}

let userA : IUser = {
    name: 'HEROPY',
    age: 123
};

let userB : IUser = {
    name: 'HEROPY',
    age: false, //error
    email: 'dke@gmail.com' //Error
}

Null과 Undefined

Null과 Undefined는 모든 타입의 하위 타입으로, 다음과 같이 각 타입에 할당할 수 있다. 서로 다른 타입에도 할당 가능하다.

let num: number = undefined;
let str: string = null;
let obj: {a:1, b:false} = undefined;
let arr: any[] = null;
let und: undefined = null;
let nul: null = undefined;
let voi: void = null;

Void

void는 일반적으로 값을 반환하지 않는 함수에서 사용한다. : void 위치는 함수가 반환 타입을 명시하는 곳이다.

함수 (Function)

화살표 함수를 이용해 타입을 지정할 수 있다. 인수의 타입과 반환 값의 타입을 입력한다.

let myFunc: (arg1: number, arg2: number) => number;
myFunc = function (x,y){
    return x+y;
};
//인수가 없고, 반환도 없는 경우
let yourFunc: () => void;
yourFunc = function() {
    console.log('Hello world~');
};