TypeScript (타입 정리)

TypeScript (타입 정리)

2023. 6. 8. 09:06ㆍTypeScript

코딩은 주로 Input(입력) → Operation(연산) → Output(출력)으로 이루어 진다.

또한 프로그램이 동작하기 까지 코딩 → 컴파일 → 런타임 단계로 이루어 진다.

자바스크립트는 자유도가 매우 높다고 생각한다.

프론트엔드 개발자라면 자바스크립트를 필수적으로 사용해야한다.

그로 인해 발생되는 에러 또한 코딩을 할때는 잘 모르고 런타임 환경 즉 유저가 서비스를 이용하는 환경에서 에러를 발생한다.

에러는 개발자는 보며 수정을 할 수 있지만 사용하는 사용자 입장에서는 에러는 절대 마주치지 않아야 한다.

하지만 타입스크립트는 컴파일 단계 즉 우리가 작성한 코드를 프로그램이 동작할 수 있는 환경으로 바꾸어주는 단계에서 잘못 작성한 코드에 대한 에러를 뱉어준다.

즉 안전하게 코딩을 할 수 있게 도와준다.

기존에 자바스크립트를 사용해왔다면 타입에 관한 이해는 수월 할 것이라고 생각이 든다.

| 기본타입

주로 자바스크립트에서 우리가 항상 사용했던 타입이다.

// number
const num: number = 123;

// string
const str: string = '김지후';

// boolean
const boal: boolean = true;

//undefined
const und: undefined = undefined; // undefined 로 타입을 잡아버리면 앞으로도 undefined 로만 사용할수 있어서 불필요하다.
const a: number | undefined = 1; // 이렇게 이 값에는 숫자랑 undefined 가 들어갈 수 있다고 정해 줄 수 있다.

// null
let person: null = null; // undefined 와 마찬가지로 null만 담을수 있는 변수는 굳이 필요가 없다.
let person2: null | string = '김지후';

//function
function abc(): number | undefined {
    return 1;
} // 함수에도 타입을 지정할 수 있다. 무조건 숫자나 undefined를 리턴하는 함수이다 라는 뜻이다.

// unknown
let notSure: unknown = 1;
notSure = '김지후';
notSure = false;
// 그냥 자바스크립트다. 아무 타입이 모두 들어갈 수 있다. 그러다 보니 본연의 타입스크립트의 장점이 따로 없다.

// any
let anyThing: any = 1;
anyThing = 'name';
anyThing = true;
// unknown 과 기능이 동일하다. 최대한 방법이 없을 때 사용하자

// void
function func(): void {
    return;
} // 아무것도 return 하는게 없을 때 사용. 함수에만 사용되며 사용하지 않아도 무관.

// never
function throwError(message: string): never {
    while (true) {

    }
} // 함수가 끝나지 않아야 될 때만 사용. 거의 사용할 일이 없어보인다.

let obj: object;
function objFuc(obj: object) {
} // 배열, 객체 등을 담을 수 있는 타입. 주로 사용하지 않으며 비원시타입중에서도 타입을 따로 지정 해주는게 관습이다.

| 배열 (Array)

// 배열의 선언방법 두가지
const friend: string[] = ['김지후', '김진원', '강상희'];
const age: Array<number> = [1, 3, 4, 5];

// 읽을수만 있는 변경할 수 없는 배열 
const name: readonly string[] = ['김지후', '강상희', '김진원'];
// readonly 를 적어주면 읽을수만 있는 배열이 된다. 즉 push나 splice등의 배열의 내장함수 (배열에 요소가 변경되는) 는 사용할 수 없다.

// Tuple
// 타입이 다른 요소들을 담을 수 있다. 
const userList: [string, number] = ['김지후', 25];

const [userName, userAge] = userList;
// 비구조화 할당을 통해 값을 가져올 수 있다.
// 하지만 잘 사용하지 않으며 type alias 나 interface를 선호하는 편이다.

| Type alias

새로운 타입을 내가 정할 수 있다.

즉 타입을 변수처럼 사용해서 값을 할당 할 수 있다.

type Text = string;
const name: Text = '김지후';
const address: Text = '서울';

type Num = number;
const age: Num = 25;

type Student = {
	name: Text,
  age: Num;
}

const student: Student = {
  name: "김지후",
  age: 25
}

| Union Type

or 연산자 처럼 안에 들어갈 값이 내가 지정해놓은 값과 다르면 에러를 뱉는다.

type Friend = '김지후' | '강상희' | '김진원' | '홍장훈';

const myFriend = (friend: Friend) => {
    console.log(friend);
}

myFriend(`강상희`); // output: 강상희
myFriend(`뽀로로`) // Error

| Intersection 타입

Union 타입 같은 경우 발생 할 수 있는 것 중 한가지만 있어도 가능하지만

Intersection 타입은 그 모든것이 일치해야 한다.

type Friend= {
	name: string,
	age: number
}

type Worker = {
	name: number,
	work: () => void
}

const internWork = (person: Student & Worker) => {
	console.log(person.name, person.empolyeeId, person.score, person.work());
}

// intersection 을 사용하면 사용 된 타입의 모든 객체의 값을 불러와야 한다.

internWork({
	name: "김지후",
	score: 15,
	empolyeeId: 13,
	work: () => console.log("나는 일해")
})

| enum (권장하지 않음)

타입스크립트에서는 자주 사용하지 않는다.

그 이유는 안전을 중요시 해서 사용하는 타입스크립트인데 재 할당이 가능하다.

enum Animal {
	Cat, // 0
	Monkey, // 1
	Tiger // 2
}

let myAnimal = Animal.Cat;

// 재 할당이 가능
myAnimal = 3

코딩하는 크롱