타입스크립트 기초 공부 기록 <타입스크립트 교과서 > 2장 5 기본 문법 익히기 :5일차

JongMin Seong·2024년 9월 9일
0

Typescript 공부

목록 보기
5/8

타입으로 사용할 수 있는 값과 없는 값

typescript에서 타입이 값이 되는지 햇갈릴 떄가 있었는데 2개에 경우가 자주 햇갈갈렸습니다. 이유는
동일한 이름을 가진 타입과 값이 있을 수 있고, 일부 구문은 런타임과 타입 체킹 단계에서 오류를 발견하게 되기 때문에 그러하였습니다

1. interface와 class 사용할 때

// 타입 네임스페이스에서의 인터페이스
interface Person {
  name: string;
  age: number;
}

// 값 네임스페이스에서의 클래스
class Person {
  constructor(public name: string, public age: number) {}
}

const personInstance: Person = new Person("Alice", 25); // 혼동 가능

2. 제네릭 사용할 떄

function identity<T>(arg: T): T {
  return arg;
}

let result = identity<number>(10); // T는 타입, 10은 값

Math, String, Error, Object, Number VS string, object, number, symbol

맨 처음에 typescript를 사용할때 String과 string에 차이를 몰라서 에러를 잡지 못했던 경험이 있습니다. 그렇기에 차이를 구분하고자 합니다.

1. Math, String, Error, Object, Number (대문자로 시작하는 타입)

typescript가 아닌 javaScript 런타임에서 실제로 사용되는 전역 객체(생성자 함수)로, 값을 생성하거나 메서드를 호출하는 데 사용되는 타입들이었습니다. 즉 변수에 사용되는 타입이 아니라 객체를 만들때 사용됩니다

2. tring, object, number, symbol (소문자로 시작하는 타입)

TypeScript의 기본 타입으로, 런타임에는 존재하지 않고, 컴파일 시점에서 타입 체크를 위해 사용 즉 javascript에서는 없고 typescript에서 변수의 타입을 지정하기 위해서 사용됩니다

typeof으로 함수에 타입도 정의 가능

typeof add를 사용하면 중복된 타입 정의를 피할 수 있습니다. 만약 add 함수의 타입이 바뀐다면, add2 함수도 자동으로 동일한 타입으로 맞춰지게 됩니다. 이는 특히 여러 함수가 동일한 시그니처를 가질 때 코드의 유지보수성을 높여줍니다.

function add(x: number, y: number) {
  return x + y;
}
const add2: typeof add = (x: number, y: number) => {
  return x + y;
};

// 아래 코드는 에러 발생
// Type '(x: number, y: number) => string' is not assignable to type '(x: number, y: number) => number'.
const add3: typeof add = (x: number, y: number) => {
  const aa = 10;
  return "123";
};

자료 출처

profile
개발 공부 기록

0개의 댓글