Typescript의 기본 타입 정리

이번 글에서는 Typescript의 기본 타입을 정리해보려합니다.

우선 타입을 지정하는 방식부터 알아보겠습니다.

1. 변수 만들 때 타입 지정하기

let Name:string = 'kim'

변수명 뒤에 :타입 이런식으로 지정할 수 있습니다.

이제 변수 Name의 타입은 string이며 string이외의 타입을 할당하면 에러가 발생합니다.

자주 사용되는 타입으로는 string, number, boolean이 있으며 null 과 undefined도 사용 가능합니다.

2. array 또는 object 자료 안에 타입 지정하기

let people :string[] = ['kim', 'park']

// array 자료형 타입 지정
let myInfo :{ age : numer } = { age:28 }

// object 자료형 타입 지정

array는 [] object는 {}으로 지정할 수 있습니다.

tip 변수 생성 시 Typescript가 Type을 자동으로 부여해주기에 모든 변수에 타입 지정할 필요는 없다.

(간단한 변수를 만들때는 생략 가능)

Union Type

만약 Type을 지정하려하는데 변수에 들어올 값이 string인지 number인지 애매할때는 Union Type을 사용할 수 있습니다.

Union Type이란 OR 연산자와 비슷한 느낌으로 type을 지정할 변수에 string 또는 number가 들어올 수 있다고 알려주는 것이다.

let name : string | number = 'kim';
let age : (string | number) = 100;

// 괄호를 쳐도 가능하다.

이런식으로 type 지정 후 들어오는 값에 따라 type이 둘 중 하나로 변합니다.

아래는 array, object 자료를 만들때 사용하는 방법이다.

const array : (number | string)[] = [1, '2', 3]
const object: {data : (number | string)} = {data : '123'}

Union Type의 특징으로는 변수에 정의된 Union 타입은 할당과 동시에 OR역할이 사라집니다.

하지만 array, object에 정의된 Union 타입은 OR 연산자가 유지됩니다.

Any Type과 unknown Type

Any Type이란 아무 자료나 집어 넣을 수 있는 타입입니다.

또한 Any타입은 타입을 제거한다고 볼 수도 있습니다.

단점으로는 타입 에러가 발생하지 않습니다.

let name: any = 'kim';

name = 123;
name = undefined;
name = [];

unknown Type이란 any type과 동일하게 모든 타입이 들어갈 수 있지만 any type과는 다른 점이 있다.

let name :any;
name = 123;
name = {};

let test1 :string = name

// any는 에러가 발생하지 않는다.

let name :unknown;
name = 123;
name = {};

let test1 :string = name

// test1이 타입 에러를 발생한다.

아직 어떤 type을 지정할지 모르겠는데 안정성을 생각한다면 unknown type을 사용할 수 있습니다.

Union Type과 unknown Type의 에러

let age: string | number;

age + 1;

// Union type error

let age: unknown = 1;
age + 1;

// unknown type error

Typescript는 확실한 type을 좋아합니다.

string | number는 number 타입이 아니라 string이나 number 타입 중 하나가 올 수 있다라고 알려주는 것일뿐입니다.

union type이라는 새로운 타입을 만든 것입니다.

(union type !== string(number, boolean등등) )

unknown은 number 타입(다른 타입 또한)이 아닙니다.

참고한 곳 : https://codingapple.com/course/typescript-crash-course/