TypeScript 기본 타입 정리(primitive types)

TypeScript 대표이미지

 

728x90

 

🖥️ 타입 선언

타입스크립트는 변수를 만들 때 변수의 타입을 지정가능하다.

let a: string = 'text'; // 문자열
let b: number = 0; // 숫자형
let c: boolean = true; // 논리형
let d: any = true; // 어떤 타입이 올지 모를 때
let e: string | number = '0'; // 문자열이나 숫자가 올 때

 

위 코드와 같이 변수명:타입 이렇게 정하면 된다.  타입스크립트는 일반 변수, 매개 변수, 객체 속성 등에 : type과 같은 형태로 지정한다.

 

또 array 또는 object 자료 안에도 타입이 지정이 가능하다.

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

 

⌨️ 논리형(Boolean)

let a: boolean = true;
let b: boolean = false;

 

⌨️ 숫자형(Number)

let a: number = 125;
let b: number = 3.24;
let c: number = NaN;

 

⌨️ 문자열(String)

let a: string = "문자열";
let b: string = `user name ${name}`;

 

⌨️ 배열(Array)

// 문자열만 가지는 배열
let a: string[] = ['a', 'b', 'c'];
let b: Array<string> = ['a', 'b', 'c'];

// 숫자형만 가지는 배열
let a: number[] = [1, 2, 3];
let b: Array<number> = [1, 2, 3];

// Union 타입(다중 타입)의 문자열과 숫자를 동시에 가지는 배열
let a (string | number)[] = [1, 'a', 2, 'b', 'c', 3];
let b: Array<string | number> = [1, 'a', 2, 'b', 'c', 3];

// 배열이 가지는 값의 타입을 추측할 수 없을 때 any를 사용할 수 있다.
let a: (any)[] = [1, 'a', 2, 'b', 'c', 3];
let b: Array<any> = [1, 'a', 2, 'b', 'c', 3];

 

⌨️ 함수(Function)

함수는 파라미터에 각각 타입을 선언해 준다. 또, 파라미터 우측에 함수의 리턴값 타입도 선언해 준다.

function sum(a: number, b: number): number {
  return a - b;
}
console.log(sum(5, 3)); // 2

 

리턴값에 지정한 타입이 다르면 에러가 난다.

function sum(a: number, b: number): number {
  return null; //error
}

 

⌨️ 객체(Object)

기본적으로 typeof 연산자가 object로 반환하는 모든 타입을 나타낸다.

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

 

객체 속성들에 대한 타입을 개별적으로 지정할 수 있다.

let user: { name: string, age: number } = {
  name: 'evan',
  age: 30
};
console.log(user); // {name: "evan", age: 30}

 

⌨️ 튜플(Tuple)

배열과 유사하지만 튜플은 정해진 타입의 요소 개수 만큼의 타입을 미리 선언후 배열을 표현한다.

let tuple: [string, number];
tuple = ['a', 0];
console.log(tuple); // ["a", 0]

 

// 기존 변수
let name: string = 'evan';
let age: number = 30;

// 튜플
let user: [string, number] = ['evan', 30];
console.log(user); // ["evan", 30]

 

튜플은 값으로 타입을 대신 할 수 있다. 처음 선언할 때의 값과 다른 값이 할당 되면 에러가 출력된다.

let user: ['a', number];
user = ['a', 20]; // ["a", 20]
user = ['a', 30]; // ["a", 30]
user = ['b', 30]; // error

 

하지만 이런 경우가 있다. push나 splice 같은 메소드를 통해 값을 넣는 것은 막을 수 없다.

 

let user: [string, number];
user = ['a', 20]
console.log(user); // ["a", 20]
user.push(30);
console.log(user); // ["a", 20, 30]

 

⌨️ 열거형

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

enum obj {
  a,
  b,
  c,
  d,
  e
}
console.log(obj);
// 0: "a"
// 1: "b"
// 2: "c"
// 3: "d"
// 4: "e"
// a: 0
// b: 1
// c: 2
// d: 3
// e: 4

 

또한 수동으로 값을 변경할 수 있고, 변경한 부분부터 1씩 증가한다.

enum obj {
  a,
  b = 10,
  c,
  d,
  e
}
console.log(obj.b); // 10
console.log(obj.c); // 11

 

⌨️ 모든 타입(Any)

자바스크립트 변수와 동일하며 어떠한 타입의 값도 할당할 수 있다.

let any:any = 'String';
any = 0;
console.log(any); // 0
any = true;
console.log(any); // true

 

⌨️ 빈 타임(void)

리턴값의 타입을 명시하는 곳에 작성하며, 리턴 값이 없는 함수는 undefiend를 반환한다.

function hello(): void {
  console.log("hello");
}
console.log(hello()); // undefined

 

 

🖥️ 타입도 import export 가능

일반변수를 import, export 하려면 import, export 문법을 사용하면 된다. 자바스크립에서는 

• user.ts

export var 이름 = 'kim';
export var 나이 = 30;

 

• test.ts

import {이름, 나이} from './user'
console.log(이름)

 

위 코드와 같이 사용하면 된다.

 

타입을 import, export 하는 방법도 동일하다.

 

• user.ts

export type Name = string | boolean;
export type Age = (a :number) => number;

 

• test.ts

import {Name, Age} from './user'
let 이름 :Name = 'kim';
let 함수 :Age = (a) => { return a + 10 }