[TypeScript] 기본 개념 정리

TypeScript

JavaScript의 대체 언어이다.
.ts 확장자를 사용하고 컴파일의 결과로 .js 파일을 출력한다. 최종적으로는 JavaScript 코드를 구동시키는 것
JavaScript와 달리 타입을 명시할 수 있어 코드 작성 시 에러를 줄여준다.

TypeScript의 장점

• 쉽게 오류 탐지
• 컴파일 시 정적 타입 체크
• 객체 지향 프로그래밍
• JavaScript와 100% 호환
• 특정 기능 및 파일에만 적용 가능

TypeScript 적용

JavaScript에서 타입명 선언 추가!

let tsString: string;
let tsNumber: number;
let tsVar: any;

let tsNumber: number[];
let boolArr: boolean[];

let obj1: { name: string } = { name: "이름" };
let obj2: { name?: string } = { name: "이름" };

이렇게 :타입명 선언만 해주면 된다.
배열인 경우에는 [] 추가
?붙이면 해당 값이 있을수도, 없을수도 있음

let tuple: [string, number];
tuple = ["tuple", 7];

let stringArr: Array<string>;

튜플이랑 Generic도 사용 가능하다.

function sum(num1: number, num2: number): number {
 return num1 + num2; 
}

function getSize<T>(arr: T[]) {
 return arr.length; 
}

function notReturn(): void {
 console.log("리턴하지 않는 함수") 
}

함수에서도 입력받는 인자값 및 리턴값의 타입을 선언 가능하다.
Generic을 사용해서 사용 시 타입을 결정할 수도 있음
리턴하지 않는 함수의 경우 void를 적어줘야하고 이 함수가 값을 리턴하는 경우 오류가 발생한다!

그리고 인터페이스를 사용해서 타입 선언을 공통적으로 묶어줄 수 있다!!
여기서부터는 자바스크립트가 아니라 자바랑 비슷해서 신기했다.

interface Multiply {
 (num1: number, num2: number): number; 
}
const mul: Multiply = function (x, y) {
 return x * y;
}

interface User {
 name: string;
 age: number;
 gender?: string;
}
interface Score {
 [grade: number]: string; 
}
let user: User & Score = {
 name: "이름",
 readonly age: 1,
 1: 'A',
 2: 'B'
}
// 배열로 원하는 타입 선언 묶어줄 수 있음

interface Member {
 name: string;
 age: number;
 walk(): void;
}
class Mem1 implements Member {
 name;
 age;
 constructor(name: string, age: number) {
  this.name = name;
  this.age = age;
 }
 walk() {
  console.log("Walk"); 
 }
}

객체, 함수, 클래스 등에 인터페이스 적용 가능

그리고 접근 제어자도 존재한다.
private, public, protected가 있고 접근 범위는 알고있던 바와 같음

private: 클래스 내에서만 접근
protected: 클래스 내, 상속받은 자식 클래스 내에서만 접근
public: 모든 곳에서 접근

abstract class Car {
 color: string;
 constructor(colot: string) {
  this.color: color; 
 }
 start() {
  console.log("start");  
 }
 abstract do(): void;
}

class myCar extends Car {
 // 추상 클래스의 변수 및 함수 정의... 
}

추상 클래스도 가능!!!

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

let admin: Partial<User> = {
 id: 1,
 name: "admin"
}
// interface의 모든 property가 없어도 됨

let member: Pick<User, "id" | "name"> = {
 id: 2,
 name: "mem"
}
// interface의 일부 property만 사용 가능

let user: Omit<User, "age"> = {
 id: 3,
 name: "user"
}
// interface의 특정 property만 제거 가능

Partial, Pick, Omit을 선언해 interface의 일부 property만 사용 가능하다

type Grade = 1 | 2 | 3 | 4;
type Score = 'A' | 'B' | 'C' | 'D';

const student: Record<Grade, Score> = {
 1: 'A',
 2: 'C',
 3: 'A',
 4: 'B'
}

Record는 key값과 value의 type 정의를 묶어 사용할수있음

이렇게 정의된 타입과 해당 변수에 선언된 값의 타입이 일치하지 않으면 오류가 발생한다.