타입스크립트 기초 - 변수와 함수 타입 정의하기

📖 타입스크립트 기초 - 변수와 함수 타입 정의하기

기본 타입 - 문자열, 숫자, 배열

문자열

• const 변수: 변수타입 = 값의 형태

const str:  string = 'hello'

숫자

const num:  number = 10

배열

• 타입 선언시 대문자, 배열안의 타입도 설정
• arr배열과 items는 같은 형태

const arr:  Array<number> = [1,2,3];
const heroes:  Array<string> = ['Capt','Thor','Hulk',10]

// 배열 리터럴 형식
const items:  number[] = [1,2,3]

기본 타입 - 튜플, 객체, 진위값

튜플

배열 특정 인덱스의 타입까지 정하는 것

const address:  [string,number] = ['gangnam',100]

객체

• 일반적인 객체 선언

const personEx:  object = {
	name:'capt',
	age:100
}

• 구체적으로 객체안 속성들의 타입을 정의해줄 수 있다.

const person: {name:string, age:number} = {
	name:'thor',
	age:100
}

진위값

const show:boolean = true;

함수 타입 - 파라미터, 반환값

함수의 파라미터에 타입을 정의하는 방식

function sum(a:number,b:number) {
	return a + b
}

• 리턴값을 정해주지 않아도 파라미터의 타입을 보고 반환값을 정의해준다. 이것을 타입추론이라고 한다.
• 타입추론
  - 함수의 파라미터 타입에 따라 반환값을 타입스크립트에서 추론해주는 것

함수의 반환 값에 타입을 정의하는 방식

function  add():  number {
	return  10;
}

함수의 타입을 정의하는 기본적인 방식 (파라미터 + 반환값)

function  sum(a:number,b:number):number {
	return a + b;
}

함수 타입 - 파라미터를 제한하는 특성

• JS - 파라미터를 추가적으로 입력했을때
  - 입력받을 파라미터외에 추가적인 값에는 반응하지 않는다. 자바스크립트의 유연함

function  sum(a,b) {
	return  a  +  b
}
sum(10,20,30,40,50)

• TS - 파라미터를 추가적으로 입력했을때
  - 타입스크립트에서 함수의 스펙을 정확하게 이해하고 불필요한 함수가 들어왔다는 오류처리를 한다.

function  sum(a:number,b:number):number {
	return a + b;
}
sum(10,20,30,40) // 오류

• js와는 달리 타입스크립트에서는 엄격하게 체크해준다.

함수 타입 - 옵셔널 파라미터

옵셔널 파라미터

• 인자값은 석택적으로 생략하거나, 추가적으로 넘기고 싶을 때
• 인자값 변수에 ? 물음표를 추가해준다.

function  log(a:string,b?:string,c?:string) {
	...
}
log('hello world');
log('hello TS','abc')

🔍 참고 출처

• 타입스크립트 기본 타입
• 타입스크립트에서의 함수