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

// JS 문자열 선언
// var str = 'hello';

// TS 문자열 선언
let str: string = 'hello';
let num: number = 10;
let arr: Array<number> = [1, 2, 3];
let heros: Array<string> = ['Capt', 'Thor', 'Hulk', 10]; // 10은 문자열이 아니기 때문에 에러
let items: number[] = [1, 2, 3];

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

배열 전체의 타입 뿐만 아니라 원소자 순서까지 넣어서 타입을 명시하는 것을 튜플이라고 한다.

let address: [string, number] = ['gangnam', 'pangyo'];

위 코드의 경우 두번째 원소에 number타입을 지정했는데 'pangyo'라는 문자열이 넘어와서 에러를 뱉는다.

// TS 튜플
let address: [string, number] = ['gangnam', 'pangyo'];

// TS 객체
let obj: object = {};
// let person: object = {
//   name: 'capt',
//   age: 100,
// }
let person = { name: string, age: number } = {
  name: 'thor',
  age: 1000
}

// TS 진위값
let show: boolean = true;

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

웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 3가지 타입을 정의할 수 있다.

• 함수의 파라미터(매개변수) 타입
• 함수의 반환 타입
• 함수의 구조 타입

// 함수에 타입을 정의하는 기본적인 방식
function sum(**a: number, b: number**)**: number** {
  return a + b;
}

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

타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주한다. 따라서, 함수의 매개변수를 설정하면 undefined나 null 이라도 인자로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어 왔는지 확인한다. 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다.

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

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

정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대되는 개념이다. 만약 이러한 특성을 살리고 싶다면 ?를 이용해서 아래처럼 할 수 있다.

function sum(a: number, **b?: number**): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 10

매개변수 초기화는 ES6 문법과 동일하다.