[TypeScript] 타입스크립트 기초 (1) - 타입

 

 타입스크립트란?

타입스크립트 공식 사이트

타입스크립트는 자바스크립트에 타입을 부여한 언어로, 자바스크립트의 확장된 언어이다.

 

 타입스크립트는 왜 쓸까?

 

타입스크립트는 에러의 사전 방지 및 코드의 자동 완성이 가능해 개발의 생산성을 향상시켜주기 때문이다.

(미리 타입을 정해두면 실행 전에 오류가 뜨기 때문에 에러가 사전에 방지되고,

예를 들어, number라고 미리 타입을 정해두면 .만 찍어도 number와 관련된 코드의 자동완성(intellisense)이 가능해진다.)

 

 기본 타입(문자열, 숫자, 배열, 튜플, 객체, 진위값)

// 문자열
let str: string = 'hello';

// 숫자
let num: number = 10;

// 배열
let arr: Array<number> = [1,2,3];
let items: number[] = [1,2,3];
let fruits: Array<string> = ['Apple', 'Banana', 'Orange']

튜플이란?

배열의 특정 index(순서)의 타입까지 정의한 것

// 튜플
let person: [string, number] = ['ian', 28];

// 객체
let obj: object = {};

let person: object = {
  name: 'ian',
  age: 28
};

// 객체 구체적 정의
let person: { name: string, age: number } = {
  name: 'ian', age: 28
}

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

 

 함수 타입(파라미터, 반환값, 파라미터의 제한 특성, 옵셔널 파라미터)

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

// 함수의 반환 값에 타입을 정의하는 방식
function num(): number {
  return 10;
}

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

JavaScript vs TypeScript 파라미터 제한의 차이

// JS

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

sum(10, 20, 30, 40); // 뒤의 숫자는 무시하고 10+20=30 의 결과만 가져온다


// TS

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

sum(10, 20, 30, 40); // 숫자 2개의 인자만 와야함으로 오류 발생

? 옵셔널 파라미터

function log(a: string, b?:string) {

}
log('hello world');
log('hello ts', 'abc');

옵셔널 파라미터는 타입스크립트가 제공하는 예약어로 특정 파라미터(인자)를 선택적으로

인자를 더 많이 쓰고 싶거나 생략하고 싶을때 파라미터 뒤에 ' ? '를 붙인다.