Typescript 익히기❗

1. Typescript이란?

▶ Typescript : Javascript에 type을 부여한 언어! Javascript의 확장판!

※ Typescipt를 브라우저에서 실행하려면 파일을 한번 변환(=Compile)해주어야 한다!

 

2. Typescript를 써야하는 이유

▶ 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있기 때문!!

① 에러의 사전 방지

10+20 = 30의 결과를 내고 싶은데, ‘10’+‘20’이 돌아가면 안되잖아! ts는 그걸 막아줌!

 

② 코드 가이드 및 자동 완성(개발 생산성 ↑)

코드 작성 시, 개발 툴의 기능을 최대로 활용 가능!

 

 

3. Typescript의 기본 타입

※ 타입 표기(Type Annotation)란? :을 이용하여 js 코드에 타입을 정의하는 방식

 

① Boolean

② Number

③ String

④ Object

 

⑤ Array

let arr: number[] = [1,2,3];

let arr: Array<number> = [1,2,3]; //제네릭 사용

 

⑥ Tuple (배열의 길이가 고정 + 각 요소의 타입이 지정되어있는 배열 형식.)

let arr: [string, number] = [‘hi’, 10];

※ 만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류남!

 

⑦ Enum (특정 값, 상수들의 집합.)

enum Avengers { CaptAm, IronMan, Thor }

let hero: Avengers = Avengers.CaptAm;

※ 인덱스 번호로도 접근 가능, 인덱스를 사용자 편의로 변경하여 사용 가능

 

⑧ Any (기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입. 단어 의미 그대로, 모든 타입에 대해서 허용한다는 의미!)

let str: any = 'hi';

let num: any = 10;

let arr: any = ['a', 2, true];

 

⑨ Void (변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입)

 

⑩ Null

 

⑪ Undefined

 

⑫ Never (함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입)

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미

function neverEnd(): never {

while (true) {

 

  }

}

 

 

4. Typescript에서의 함수

▶ 함수의 기본적인 타입 선언

→ 기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가함! 함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용

 

▶ 함수의 인자

★ Typescript에서는 함수의 인자는 모두 필수!!

★ 함수의 매개변수를 설정하면 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); // 10

 

5. Typescript의 제네릭

▶ 제네릭(Generics) : 타입을 마치 함수의 파라미터처럼 사용하는 것!

★ C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용!

 

 

 

 

학습내용 출처 : https://joshua1988.github.io/ts/