TypeScript_Base

Songss·2025년 1월 12일

TypeScript

목록 보기
1/10

타입스크립트 확장자는 .ts

타입스크립트 설치는 npm i typescript , npm i ts-node

typescript는 TypeScript 코드를 JavaScript로 컴파일(트랜스파일)합니다.

ts-node 는 TypeScript 파일을 컴파일하지 않고, 런타임에서 즉시 실행할 수 있도록 지원합니다.

tsc 파일명 은 TypeScript 컴파일러(tsc)를 사용하여 TypeScript 파일(app.ts)을 JavaScript 파일로 변환(컴파일)하는 명령입니다.

tsc --init으로 tsconfig.json을 생성 하고 tsc -w 파일명 을 입력하면 tsconfig.json에 정의된 모든 파일을 자동으로 컴파일 한다.

데이터 타입과 추론

왜 데이터 타입이 그렇게 중요한가

  • 자바스크립트의 변수에는 어떤 데이터 타입의 값도 할당될 수 있다.
    • let myName = 'lee';
    • 그런데 누군가가 myName 을 실수로 이렇게 let myName = 1; 변경할 수 도 있다.
  • 자바스크립트는 이러한 문제를 사전에 막지 못한다.

타입 추론(Type Inference)기능

  • 타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동을 판단할 수 있다.
  • 타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다.

let age = 30;

  • 타입스크립트는 age변수의 타입을 자동으로 number형 으로 추론한다
  • 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정하는 것이 더 명확하다.
  • 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.

데이터 타입의 종류 (사실 데이터 타입이 매우 많다고함)

  • 기본 데이터 타입
    • number : 숫자 타입 , 정수와 실수 를 포함
    • string : 문자열 타입
    • boolean : 참, 거짓을 나타내는 불리언 타입
    • null : 값이 없음을 나타내는 타입
    • undefined : 값이 할당되지 않는 변수의 기본값인 타입
  • 객체 타입
    • object : 객체를 나타내는 타입
    • array : 동일한 타입의 요소를 가진 배열 을 나타내는 타입
    • tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입
  • 특수 타입
    • any : 어떠한 타입이든 할당될 수 있는 타입
    • unknown : 타입을 미리 알 수 없는 경우 사용되는 타입

타입 명시

let x : string = "문자열 선언";
  • 변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정한다.
  • 컴파일 언어(C,C++…)는 타입을 앞에서 선언하지만 타입스크립트는 변수명 뒤에 선언

변수에 데이터 타입을 지정하는 방법

let mname : string = 'lee';
myname = 1;
// myname 변수에 string 타입을 지정하여 myname에 숫자 타입을 할당하면 에러발생
  • 변수 선언 시 데이터 타입을 지정한다.
  • 타입스크립트를 자바스크립트로 컴파일 할 때 데이터 타입에 다른 값이 할당되면 오류를 발생시켜 개발자에게 알려준다.

변수에 데이터 타입 명시 [실습 코드]

// 변수의 데이터 타입 명시
let stdId: number = 1111;
let stdName: string = '987';
let age: number = 20;
let gender: string = 'male';
let course: string = 'Typescript';
let complete: boolean = false;

interface 를 활용한 타입 명시 [실습 코드]

interface Person {
  id: number;
  name: string;
  age: number;
  gender: string;
}

// 함수의 데이터 타입 명시 (매개변수, 리턴 타입)
function getInfo(id: number): Person {
  return {
    id: id,
    name: 'seungsoo',
    age: 20,
    gender: 'male',
  };
}

const student = getInfo(123);
console.log(student);

function setInfo(x: Person): Person {
  x.name = 'kim';
  x.age = 20;
  x.gender = 'male';

  return x;
}

const student2 = setInfo(student);
console.log(student2);

출력 결과

{ id: 123, name: 'seungsoo', age: 20, gender: 'male' }
{ id: 123, name: 'kim', age: 20, gender: 'male' }

코드 동작 방식 설명

  1. Person 인터페이스 정의:
    • Person은 id, name, age, gender라는 속성을 갖는 객체의 구조를 정의합니다.
    • getInfo 함수의 리턴 타입으로 Person을 지정했기 때문에, getInfo 함수가 반환하는 객체는 반드시 Person 인터페이스를 준수해야 합니다.
  2. getInfo 함수 구현:
    • 함수의 리턴 타입을 Person으로 명시했으므로, TypeScript는 이 함수가 반환하는 객체가 Person 인터페이스의 모든 속성을 포함하고, 타입이 일치하는지 확인합니다.
    • 예를 들어, 반환 객체에 id, name, age, gender 중 하나라도 빠져있거나 타입이 다르면 컴파일 에러가 발생합니다.
  3. getInfo 함수 호출:
    • getInfo(123) 호출 시:
      • 반환 타입은 *Person으로 추론됩니다.
      • id가 123인 Person 타입의 객체가 반환됩니다.
  4. 결론적으로:
    • getInfo 함수는 Person 인터페이스를 참조하여 반환 객체의 구조와 타입을 확인합니다.
    • 반환 값이 Person 인터페이스를 준수하지 않으면 컴파일러가 에러를 발생시킵니다.

TypeScript의 동작

인터페이스의 역할:

  • 인터페이스는 객체의 타입을 정의하는 계약입니다.
  • getInfo 함수는 반환 값이 Person 타입임을 보장합니다.

타입 검사:

  • 반환 값이 Person 타입을 준수하는지 TypeScript가 정적으로 검사합니다.
  • TypeScript 컴파일러는 아래를 확인합니다:
    1. 반환 객체에 id, name, age, gender가 있는지.
    2. 각 속성의 타입이 Person 인터페이스에 정의된 타입과 일치하는지.

실습 코드 예시

유효한 코드:

function getInfo(id: number): Person {
  return {
    id: id,
    name: 'seungsoo',
    age: 20,
    gender: 'male',
  }; // `Person` 타입 준수
}

오류가 발생하는 코드:

function getInfo(id: number): Person {
  return {
    id: id,
    name: 'seungsoo',
    age: 20,
    // gender 속성이 빠져 있음
  }; // 오류: 'gender' 속성이 없으므로 'Person' 타입을 준수하지 않음
}
function getInfo(id: number): Person {
  return {
    id: id,
    name: 'seungsoo',
    age: '20', // 오류: age가 string 타입임
    gender: 'male',
  }; // 오류: 'age'의 타입이 'number'여야 함
}

정리

getInfo 함수에서 리턴 타입으로 Person을 명시한 것은:

  1. 함수가 반환하는 객체가 반드시 Person 인터페이스를 따라야 한다는 약속입니다.
  2. 컴파일러는 반환 객체가 Person 구조를 준수하는지 검사합니다.
  3. 반환 객체는 Person 인터페이스를 참조하여 생성됩니다.

따라서 작성한 코드처럼 TypeScript의 타입 시스템을 활용하면, 타입 안전성을 보장하면서 더 견고한 코드를 작성할 수 있습니다.

2번째 테스트 코드

interface WorkOut {
  id: number;
  name: string;
  region: string;
  requipment: string;
}

function setWorkOut(workout: WorkOut): WorkOut {
  console.log(`Workout: ${workout.name}`);
  console.log(`Region: ${workout.region}`);
  console.log(`Equipment: ${workout.requipment}`);
  return workout;
}

const legDays = setWorkOut({ id: 1, name: 'squat', region: 'legs', requipment: 'freeWorks' });
console.log(legDays);
profile
Songss
다음 포스트

TypeScript)interface(gender? : number;)

0개의 댓글