TypeScript - 1

타입스크립트란?

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

타입스크립트를 쓰는 이유?

에러의 사전 방지

오타, 데이터의 형상을 알지 못했을 때 낼 수 있는 에러들에 대해 핸들링이 가능하다

항상 브라우저로 결과값을 확인 or 콘솔창으로 확인 하는 것이 아니라, 어느 정도는 코드 작성 중에서 알 수 있다.

코드 가이드 및 자동완성

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

위와 같이 코드를 작성 했을 때

각 파라미터의 타입과 리턴 타입까지 명시된다. 이때 리턴 타입을 명시하지 않아도 타입스크립트가 유추하여 보여주기도 한다.

결국 이 장점은 코드 가이드까지 이루어지는데,

다음과 같이 number type에서 사용할 수 있는 api들을 자동 완성 해준다.

// @ts-check 와 JSDock

JavaScript에서도 타입에 대한 명시가 가능하다.

하지만 볼 수 있듯, JSDock을 활용하여 모든 부분들을 명시하다보면, 코드 가독성이 떨어지고, 코드량 또한 어마하게 늘어날 것이다.
"그럴 빠에는 그냥 타입스크립트를 쓰자..." 라는 생각이 절로 들 수 밖에 없다.

기본 타입

12가지의 기본 타입

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

// TS 숫자
let num: number = 10;

// TS 배열
let arr: Array<number> = [1,2,3];
let arr2: Array<string> = ['hello', 'world', 10]; //10에서는 에러가 난다!
let items: number[] = [1,2,3];

// TS 튜플
let address: [string, string] = ['seoul', 'gyunggi'];

// TS 객체
let obj: object = {};
/* 객체의 key 값에 대한 타입이 X
let person: object = {
  name: 'ejk',
  age: 100
};
*/
let person: { name: string, age: number } = {
  name: 'ejk',
  age: 100
};

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

함수

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

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

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

sum(10, 20, 30, 40); // error! 2개의 인수가 필요한데 4개의 인수를 가져왔습니다!!

// 함수의 옵셔널 파라미터
function log(a: string, b?: string, c?: string){
  // '?' 가 들어간 파라미터는 optional 하다
}
log('hello wolrd');
log('hello', 'hello');

인터페이스

변수의 타입으로 사용할 수 있다. 이때 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수하여야 한다. 이것은 새로운 타입을 정의하는 것과 유사하다.

interface User {
  age: number;
  name: string;
}

// 변수에 인터페이스 활용
let test: User = { 
  age: 33,
  name: 'EJ';
}

let wrongTest: User = {
  name: 'hello';
}

// 함수에 인터페이스 활용
function getUser(user: User){
  console.log(user);
}

getUser(test);
getUser(wrongTest); // 에러! wrongTest 변수는 User의 age를 갖고 있지 않다!!

// 함수의 스펙(구조)에 인터페이스를 활용
// 라이브러리 제작 or 협업에서의 함수 정의 시 유용!
interface SumFunction{
 (a: number, b: number): number; 
}
var sum: SumFunction;
sum = function(a: number, b:number): number {
  return a+b;
}

인덱싱과 딕셔너리 패턴

// 인덱싱
interface StringArray{
 [index: number]: string; 
}

let arr: StringArray = ['a','b','c'];

arr[0] = 10; // 에러! 10은 Array에 할당할 수 없다! -> 배열의 인덱싱 방식에 대해서 인터페이스를 정의할 수 있다.

// 딕셔너리 패턴
interface StringRegexDictionary{
  [key: string]: RegExp;
}

let obj = {
 // sth: /abc/,
  cssFile: /\.css$/,
  jsFile: /\.js$/,
}

obj['cssFile'] = 'a'; // 에러! -> 정규식이 아닌 문자열이 들어왔다

// 이점
Object.keys(obj).forEach(function(value){
  // value : string 추론해준다
})

인터페이스 확장

interface Person{
  name: string;
  age: number;
}

// Developer는 Person의 name과 age를 상속한다
interface Developer extends Person{
  language: string;
}

let test: Developer = {
  name: 'EJ',
  age: 100,
  language: 'JS'
}

참고 강의: 인프런 강의 캡틴 판교, 타입스크립트-입문