[포스코x코딩온] 웹개발자 풀스택 과정 15주차 회고 | TypeScript

TypeScript

• JavaScript의 기본 문법에 자료형을 체크한다.
• JavaScript가 자의적으로 type을 해석하고 코드를 실행시켰을 때, 의도와 다른 방식으로 쓰이지 않도록 방지한다.
• 정적 파일언어다. (실행하지 않고도 코드 상의 에러를 알려준다 (실시간 디버깅))

---

TypeScript type들 (JavaScript 자료형)

• number
• string
• boolean
• array
• object
• null
• undefined

 

type과 함께 변수 선언하기

• 변수나 함수를 만들어줄 때 타입까지 명시해서 선언할 수 있다.

let a: number = 1;
let b: string = "안녕하세요";
let c: object = {
	name: "gildong",
    friends: "null",
};

 

TypeScript 사용

• 파일명.ts 로 파일을 만들고 해당 파일에 코드를 작성한다.
• 웹 브라우저는 HTML, CSS, JavaScript 파일들만 읽을 수 있고, .ts 파일을 읽을 수 없기 때문에 .ts -> .js 파일 변환 과정이 필요하다.

 

TypeScript 설치

// 설치
npm install typescript

// 버전 확인
npx tsc -v

// tscconfig 파일 생성
npx tsc --init

//.ts 파일을 만들고 .js 파일로 변환하고 싶을 경우
npx tsc 파일이름.ts

• 실제 사용은 변환된 .js 파일을 사용하면 된다. (node 파일이름.js)

 

.ts 파일을 변환 없이 실행하고 싶을 경우:

• ts-node 모듈 이용

# 설치
npm install ts-node

# .ts 파일 실행
npx ts-node 파일이름.ts

---

TypeScript 자체 type들 (JavaScript에 없는 자료형)

• Tuple
• Enum
• never
• void
• any

 

Tuple (튜플)

• JavaScript에서는 배열과 같지만 다른 점도 존재한다.
• 순서와 개수가 정해져 있다. (요소의 길이와 type고정)
• 각각의 요소에 모두 type을 지정해줘야 한다.
• readonly 옵션으로 데이터 변경이 불가능하게 만들 수 있다.
• 순서와 규칙이 있는 배열이 있다면 tuple을 사용하는 게 적합할 수 있다.

// tuple type 선언
let drink1: [string, number];

// tuple 초기화
drink1 = ['cola', 1000];

// 선언과 초기화 동시에 + readonly
let drink2: readonly [string, number] = ['fanta', 2500];

 

Enum (열거형)

• 값들에 미리 이름을 정의하고 사용하는 타입이다.
• 숫자형과 문자형이 존재한다.
• 문자열이나 숫자에 미리 의미를 지정해 두고 그룹화할 수 있다.
• JavaScript의 object와 유사하지만 선언 이후로는 내용을 추가하거나 삭제할 수 없다.
• 값을 넣지 않고 선언할 경우, 숫자형 enum으로 초기화되며 가장 위에 요소부터 0부터 1씩 값이 늘어난다.
• 숫자형 enum은 값을 임의로 정의해주지 않는다면 이전 요소에 1을 더한 값이 자동으로 할당된다.
• enum에 숫자와 문자값이 모두 포함되는 것도 가능하지만 일반적으로 사용되지는 않는다.

enum NumberEnum1 {
	admin,
	user,
	guest,
}

console.log(NumberEnum1.admin) // 0
console.log(NumberEnum1.user) // 1
console.log(NumberEnum1.gues) // 2

enum NumberEnum2 {
	a,
    b = 10,
    c = 100,
    d,
}

console.log(NumberEnum2.a) // 0
console.log(NumberEnum2.b) // 10
console.log(NumberEnum2.c) // 100
console.log(NumberEnum2.d) // 101

enum Status {
	pending = 'pending',
	complete = 'complete',
}

console.log(Status.pending) // pending
console.log(Status.complete) // complete

 

any (어떤 타입이든 가능)

• 어떤 타입이든 상관없이 오류가 나지 않는다.
• 빈 배열을 먼저 선언하고 싶을 때 혹은 받아오는 데이터 타입이 확실하지 않을 때 사용할 수 있다.
• 정말 어쩔 수 없는 상황이 아니라면 지양하는 게 좋다.

let val: any;

any = ['1', '2', '3', '4', 1, 2, 3];

---

사용자 정의 type

 

interface

• 여러 오브젝트의 타입을 정의하는 규칙

 

interface 만드는 법:

// key 뒤에 '?' 를 붙여 선택적인 프로퍼티 옵션을 추가할 수 있다

interface Student {
	name: string;
    grade: number;
    isPassed?: boolean;
}

interface 적용법:

• 오브젝트를 선언할 때, :object로 쓰는 것이 아닌 :interface로 만든 type을 써준다면, 내부에 있는 key의 type까지 지정할 수 있다.

const student1: Student = {
	name: 'kim ham ham',
    grade: 1,
    isPassed: true,
}

 

type

• interface와 마찬가지로 사용자 정의 타입을 만들어준다.
• 오브젝트뿐만 아니라 문자열이나 숫자로 제한을 둘 수 있다.

type 만드는 법:

type Gender = 'female' | 'male';

type 적용법:

const gender1: Gender = 'female'
const gender2: Gender = 'male'

---

함수에서의 type 선언

• 선언 시에 타입설정을 해주고 호출할 땐 기존처럼 한다.
  • 매개변수 타입 설정
  • 함수의 return타입에 따라 함수 전체 타입설정 (리턴 타입을 보고 타입을 추론할 수 있으므로 생략 가능)
    • 기본 타입 외에도 never과 void를 함수의 return type으로 설정 가능

함수 선언하는 방식:

// 파라미터와 리턴 타입을 선언하는 기본 형식
function sum(a: number, b: number): number {
	return a + b;
}

// 화살표 함수로 타입을 선언
const sum = (a: number, b: number): number => {
	return a + b;
}

// 축양형
const sum = (a: number, b: number) => a + b

 

함수와 매개변수의 개수:

• JavaScript와 Typescript로 선언한 함수는 정의된 매개변수의 개수만큼 함수 호출 시 인자로 넘겨줘야 한다.
• 정의한 매개변수에 함수 호출 시 값을 인자로 값을 전달하지 않을 상황을 대비하려면 매개변수 정의할 때 해당 매개변수 뒤에 물음표"?"를 붙이면 된다.

function sum(a:number, b:number, c?:number) {
	console.log(a, b, c)
}

sum(1,2) // 1 2 undefined

 

함수의 리턴 타입이 없을 때 (반환하는 값이 없는 경우): void

function add(a: number, b: number): void {
	console.log(a + b)
}

 

어떤 조건에서도 함수의 끝에 도달할 수 없을 경우: never

function goingOn(): never {
	while(true) {
		console.log('go')
    }
}

---

Generic

• 함수를 호출할 때 데이터 타입을 지정할 수 있는 문법이다.

 

generic 함수 선언:

// <T> 에는 추후 함수 호출시 명시될 타입이 대입된다.

function arrLength<T>(arr: T[]): number {
	return arr.length
}

 

 generic 함수 호출:

• 함수를 호출할 때 매개변수로 들어갈 데이터 타입을 설정한다.

arrLength<string>(['a']); // 1
arrLength<number>([1, 2, 3, 4]); // 4

---

느낀 점들

TypeScript는 JavaScript의 유연성으로 인해 개발자의 의도와 다르게 코드가 실행되는 것을 막아주는 유용한 언어인 건 사실인 것 같으나, 다루는 데이터들의 종류가 엄청 많은 대형 프로젝트를 제외한 소규모 프로젝트에서는 데이터의 type들이 예상되는 범주에 있기 때문에 크게 유용하지는 않을 것 같다. 다만, 코드가 별다른 에러 없이 실행은 되지만 코드가 의도한 것과 다르게 실행되거나 아예 작동을 하지 않을 경우가 전에 몇 번 있었기에 다음 프로젝트에는 TypeScript를 꼭 사용해 봐야겠다.