은도미
은도미 개발일지
은도미
전체 방문자
오늘
어제
  • 분류 전체보기 (46)
    • DAILY (0)
    • BOOKS (0)
    • STUDY (17)
      • 면접준비 (3)
      • 모던 자바스크립트 Deep Dive (10)
      • Git (1)
    • PROGRAMING (14)
      • HTML (0)
      • CSS (0)
      • JS (0)
      • TYPESCRIPT (7)
      • NODE.JS (2)
      • Express.js (1)
      • React (3)
      • Nextjs (1)
    • ALGORITHM (5)
      • JS (1)
      • PYTHON (3)
      • 백준 (0)
      • 프로그래머스 (0)
      • 기타 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • ㅂ

최근 댓글

최근 글

티스토리

은도미

은도미 개발일지

PROGRAMING/TYPESCRIPT

TypeScript 02 TypeScript의 기본 Type

2021. 11. 24. 14:48

TypeScirpt는 JavaScript코드에 변수나 함수 등을 Type을 정의할 수 있다.

기본자료형 / 참조자료형 / 추가 제공 자료형이 존재한다.

 

사용방법이나, 자세한 설명은 아래에서 계속됩니다 *_*

 

기본 자료형

  • string: 문자열
  • Boolean : 참 / 거짓
  • number : 숫자
  • null : 의도적으로 비어있는 값
  • undefined : 아무 값이 할당되지 않은 상태

참조 자료형

  • object : 기본 자료형 외의 타입
  • array : 배열

추가 자료형*

  • tuple : 길이와 각 요소의 타입이 정해진 배열
  • enum : 특정 값들의 집합
  • any : 모든 타입을 저장 가능
  • void : 결과 값을 반환하지 않는 함수의 타입
  • never : 항상 오류를 발생시키거나 반환이 없는 함수의 타입

 

기본 자료형

(PRIMITIVE TYPE)

object나 reference 형태가 아닌 실제 값을 저장하는 자료형
primitive type 내장함수를 사용 가능 한 것은 자바스크립트 처리 방식 덕분
string/boolean/number/null/undefined/symbol(ES6추가)

1. String(문자열)

문자열을 저장하는 타입이다.

자바스크립트와 동일하게 백틱(``)을 사용하여 표현 가능하다.

let color: string = "blue";
color = "red";

let name: string = `Eundomi`;
let age: `27`;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${age} years old next month.`;
let f_sentence: string = "Hello, my name is " + name + ".\n\n" +
    "I'll be " + (age + 1) + " years old next month.";

2. Boolean(불리언)

boolean은 true/false 값을 나타낸다.

let isDone: boolean = false;

3. Number(숫자)

Number은 보동소수 값을 저장하는 타입이다. 2진수, 8진수, 10진수, 16진수 사용 가능하다

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

4. Null

값이 의도적으로 비어있는 상태를 저장하는 타입이다.

let n: null=null;

5. Undefined

아무 값이 할당되지 않은 상태를 저장하는 타입이다.

let u: undefined=undefined;

참고 )

//typeof로 데이터 타입을 확인가능
typeof null	//'object'
typeof undefined	//'undefined'

null === undefined //false
null == undefined //true
null === null //true
null == null //true
!null //true
isNaN(1+null)	//false
isNaN(1+undefined)	//true

6. symbol

 

참조 자료형

(REFERNCE TYPE)

객체, 배열, 함수 등과같은 Object 형식의 타입
메모리에 값을 주소로 저장하고, 출력 시 메모리 주소와 일치하는 값을 출력
object,/array/fuction

1. object

기본자료형에 해당하지 않는 타입이다.

string/boolean/number/null/undefined을 제외(원시자료형을 제외)한 모든 자료형 타입

function create(o: object): void{}

create({ prop: 0 }) // 성공
create([1, 2, 3]) // 성공
create("string") // error
create(false) // error
create(42) // error
create(null) // error
create(undefined) // error

2. Array

배열은 아래 두가지 방식으로 저장 할 수 있다.

// 배열을 저장하는 타입
let arr: number[] = [1, 2, 3]

// 아래와 같이 제네릭을 사용한 타입 표기 가능
let arr: Array<number> = [1, 2, 3]

3. Function

 

 

추가제공자료형

TypeScript에서 개발자의 편의를 위해 추가로 제공하는 타입
tuple/enum/any/void/never

1. Tuple(튜플)

길이와 각 요소의 타입이 정해진 배열을 저장하는 타입이다.

요소와 타입이 모두 같을 필요는 없으며, 보다 엄격히 배열을 관리하고 싶을 때 사용한다.

let arr: [string, number]; // 튜플 타입으로 선언
x = ["hi", 10];
x = [10, "hello"]; //오류

arr[1].concat("!") // 오류

// 정의하지 않은 index호출 시
arr[3] = "world"; // 오류, property 3이 없음
console.log(arr[5].toString()); // 오류, 5가 없음

2. Enum(열거)

특정 값(상수)들의 집합을 저장하는 타입이다.

기본적으로 0부터 시작하여 번호를 매기며, 수동으로 설정하며 번호를 바꿀 수 있다.

enum Car { BUS, TAXI, SUV };	//0,1,2
enum Car { BUS=1, TAXI, SUV };	//1,2,3
enum Car { BUS = 1, TAXI = 2, SUV = 3 };
let taxi: String = Car[2];
enum Car { BUS = 2, TAXI, SUV };
let taxi: String = Car[3];

let bus: Car = Car.BUS;
let bus: Car = Car[0]; // INDEX 번호로 접근가능
console.log(bus);	//BUS 출력

3. Any

모든 데이터 타입이다. 어떤 값도 타입으로 들어갈 수 있으며, 자바스크립트와 차이가 없으므로 쓰는것을 지양한다.

또한, 컴파일 중 타입검사를 하지 않는다.

let notSure: any = 4;
notSure='maybe a string instead';
notSure=false

4. Void

함수가 리턴값이 없는 경우 타입을 명시할때 쓴다. (any의 반대타입)

변수에는 undefined와 null만 할당하고, 함수에는 반환값을 설정할 수 없는 타입

function warnUser: void {
	console.log("This is my warning message");
}

let unknown: void = undefiend;
unknown = null;

5. Never

절대 발생할 수 없는 타입이다.

함수에서 지정해주면 값을 반환하지 않는 함수를 생성한다.

계속해서 돌아가는 함수를 만들때도 사용한다.

// 종료되지않는 함수
function neverend(): never {
	while(true) {  }
}

//항상 오류를 발생시키는 함수
function error(message: string): never {
	throw new Error(message);
}

// 반환 타입이 never로 추론됨
function fail() {
	return error("Something failed");
}

 

 

 

'PROGRAMING > TYPESCRIPT' 카테고리의 다른 글

TypeScript 06 인터페이스  (0) 2021.11.26
TypeScript 05 클래스와 인터페이스  (0) 2021.11.24
TypeScript 04 함수 사용  (0) 2021.11.24
TypeScript 03 Utility types  (0) 2021.11.24
TypeScript 01 개요  (0) 2021.11.24
    'PROGRAMING/TYPESCRIPT' 카테고리의 다른 글
    • TypeScript 05 클래스와 인터페이스
    • TypeScript 04 함수 사용
    • TypeScript 03 Utility types
    • TypeScript 01 개요
    은도미
    은도미
    아름다움은 매일 있어.
    hELLO. 티스토리 스킨을 소개합니다.
    제일 위로

    티스토리툴바