[TypeScript] 타입스크립트 기본 자료형 타입 선언(TS basic data type)

TypeScript

 

 

 

[TypeScript] 타입스크립트 기본 자료형 타입 선언(TS basic data type)

 

타입스크립트 기본 타입 설정

 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.

 

1. 문자형(String)

const str: string = 'hello'; //문자형 선언

 

 

 

2. 숫자형(Number)

const num: number = 10; //숫자형 선언

 

 

 

3. 배열(Array)

let arr1: Array<String> = ['일','이','삼'] //문자 자료형 배열 선언(제네릭 방식)

let arr2: Array<number> = [1,2,4] //숫자 자료형 배열 선언(제네릭 방식)

let numbers: number[] = [1,2,3] //숫자 자료형 배열 (리터럴 방식)

 

 

 

 

4.튜플(Tuple)

 

튜플이란?

튜플은 배열의 서브타입으로 인덱스의 타입이 알려져 있지만, 동일할 필요는 없으며 요소의 수가 고정된 배열을 표현하는 경우 사용한다.

 

let address: [string, number] = ['강남', 123456]

 

 

 

 

5. 객체(Object)

let person: object = {
  name: 'heeming',
  age: 100
}

//또는

let person: { name: string, age: number } = {
  name: 'heeming',
  age: 100
}

 

 

 

 

6. 진위값(Boolean)

const show: boolean = true
//중요❗️ TS에선 진위값을 1 or 0 으로 사용하는 것 보다 true / false로 지정해서 사용해주어야한다.

 

 

 

 

7. 함수(Function) with 옵셔널 파라미터(optional parameter), 디폴트 파라미터(default parameter), 레스트 파라미터(rest parameter)

function sum(a: number, b: number) { //함수의 파라미터 타입 정의 
  return a + b;
}
sum(10, 20);

function add(): number { //함수의 리턴값 타입 지정
  return 10;
}


function tsFunc(a: number, b: number): number { //파라미터 타입과 리턴값 타입 모두 지정
  return a + b;
}
tsFunc(10,20)
tsFunc(10,20,30,40) // TS는 지정된 파라미터 길이 외 불필요한 파라미터를 제한하기 때문에 문법 오류가 뜸
tsFunc(10) //함수의 길이보다 짧게 파라미터가 넘어오기 때문에 문법 오류가 뜸


/* 함수의 옵셔널 파라미터(선택적 파라미터) */
function log(a: string, b?: string) {
  ...
}
log('파라미터 a는 필수');
log('파라미터 a는 필수', '파라미터 b는 필수가 아니죠');
log('파라미터 a는 필수', '파라미터 b는 필수가 아니죠', '이러면 문법 오류가 뜨죠~');


/* 함수의 디폴트 파라미터(기본값 파라미터) */
function getName(firstName: string, lastName: string = "gates") {
  return `${firstName} ${lastName}`;
}
const onlyFirstName = getName('bill');
const fullName = getName('steven', 'jobs');
console.log(onlyFirstName); // bill gates 출력 
console.log(fullName); // steven jobs 출력


/* 함수의 레스트 파라미터 */
function restFunc(...rest: number[]) {
  return rest
}
const zero = restFunc();
const fiveArr = restFunc(1,2,3,4,5);
console.log(zero); //빈 배열 출력
console.log(fiveArr); // [1,2,3,4,5]가 출력

옵셔널 파라미터(optional parameter)
1. ? 를 입력해주면 입력을 받아도 되고, 받지 않아도 된다. 라는 의미이다.
2. 정의한 파라미터 개수와 옵션만 허용하고, 그 이상의 갯수로 파라미터를 입력하는 경우 오류 발생.


디폴트 파라미터(default parameter)
1. 매개변수에 기본값을 설정함으로써, 인자를 넣지 않아도 함수 호출이 가능하게 할 수 있다.
2. 단, 기본값을 설정한 매개변수들은 맨 뒤쪽에 위치해야 한다.


레스트 파라미터(rest parameter)
1.  ...를 이용하여 매개변수의 함수의 파라미터 개수를 가변적으로 전달 받을 수 있게 한다.
2. rest 파라미터도 디폴트 파라미터 처럼 맨 뒤쪽에 위치해야 한다.
3. rest 파라미터는 배열과 자료형 타입을 동시에 지정해주어야 한다.

 

 

 

 

---

 

 

 

 

🔗 타입스크립트 공식 홈페이지(한국어 일부 지원)

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

 

 

 

🔗 타입스크립트 라이브 코딩 및 JS 문법 비교 / 에러 체크해볼 수 있는 사이트

- 타입스크립트 플레이그라운드

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

 

 

 

🔗 캡틴판교님이 만드신 타입스크립트 핸드북

https://joshua1988.github.io/ts/

타입스크립트 핸드북