TypeScript

[TypeScript] 프로젝트 환경설정과 문법

2023. 5. 30. 15:25
목차
  1. TypeScript 프로젝트 환경 설정
  2. 기본타입
  3. 유니온 타입
  4. 인터섹션 타입

TypeScript 프로젝트 환경 설정

1. 프로젝트 폴더 생성

mkdir (폴더명)
cd (폴더명)

2. 프로젝트 초기화

npm init -y

3. 타입스크립트 설치

npm install typescript --save-dev

4. 루트 디렉토리에 tsconfig.json 파일 생성 후 아래 코드작성

{
  "compilerOptions": { //컴파일러옵션설정
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [ //TypeScript 파일 경로 src외에서 파일생성시 오류난다
    "src/**/*"
  ]
}

5. src 폴더에 index.ts 파일 만들어 TypeScript 코드 작성해보기

기본타입

String

let str: string = 'hello';

Boolean

let isDone: boolean = false;
let isShow: boolean = true;

Number

let num1: number = 7;
let num2: number = 0.6878;

Object

let obj: object = {};
let obj2: { name: string; age: number; isDeveloper: boolean } = {
  name: 'kimcoding',
  age: 20,
  isDeveloper: true,
};

Array

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

Tuple

let list5: [number, string, boolean] = [1, 'banana', true];

arr[0].concat('abc'); // Error, 'number' does not have 'concat'
arr[8] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

Any

let obj: object = {};

//에러가 납니다.
obj = "hello";

let maybe: any = 4;

//정상적으로 동작합니다.
maybe = true;

Void: 함수에 리턴값이 없다면 사용

let printAnswer = (): void => {
	console.log("YES");
}

Never: 함수의  끝까지 실행되지 않는다는 의미

function neverEnd(): never {
  while (true) {

  }
}

유니온 타입

: 자바스크립트의 OR연산자(||)와 같이 A이거나 B라는 의미의 타입

function printValue(value: any): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

매개변수의 타입을 any로 사용시 자바스크립트와 다를바가 없다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

매배변수의 타입을 유니온타입으로 작성시 number 혹은 string 타입으로 지정할 수 있다.

 

유니온 타입을 사용하면 any와 달리 타입을 명시적으로 표시되기 때문에 가독성이 좋고

타입을 추론할 수 있기 때문에 타입에 관련된 API를 자동완성으로 알아낼 수 있다.

 

유니온 타입 사용시 주의할 점?

유니온에 있는 모든 타입의 공통 프로퍼티에만 접근할 수 있다.

나머지 프로퍼티에 접근하고 싶다면 타입가드를 사용해야 한다.

타입가드란 TypeScript에서 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입의 안정성을 보장해준다.
function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

in 연산자는 객체의 프로퍼티 이름과 함께 사용되며, 해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다.

 

인터섹션 타입

: 둘 이상의 타입을 결합해서 새로운 타입을 생성

interface Developer {
  name: string;
  skill: string;
}

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

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
  console.log(someone.name);
  console.log(someone.skill);
}

인터섹션 타입을 사용해서 Developer와 Person으로 하나의 타입을 생성했다.

따라서 askSomeone함수 내에서는 정의된 모든 프로퍼티에 접근 할 수 있다.

interface Developer {
  name: string;
  skill: string;
}

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

function askSomeone(someone: Developer | Person) {
	//이런 식으로 프로퍼티에 접근할 수 있습니다.
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

//유니온 타입은 전달인자를 전달할 때 선택지가 생깁니다.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});

function askSomeone2(someone: Developer & Person) {
	//타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있습니다.
    console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

//그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없습니다.
askSomeone2({name: '김코딩', skill: '웹 개발', age:20});

유니온 타입은 타입을 지정하거나 다양한 타입의 값을 처리하는 경우

인터섹션은 두 개 이상의 타입을 조합하고, 해당 타입들이 모두 충족되어야 하는 경우에 유용하다.

 

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

 

Documentation - Everyday Types

The language primitives.

www.typescriptlang.org

 

'TypeScript' 카테고리의 다른 글

[typescript] 나는 제네릭을 아는가?  (2) 2023.09.28
type alias, interface  (0) 2023.09.03
[TypeScript] Enum, Interface, 타입별칭, 타입추론  (0) 2023.05.31
  1. TypeScript 프로젝트 환경 설정
  2. 기본타입
  3. 유니온 타입
  4. 인터섹션 타입
'TypeScript' 카테고리의 다른 글
  • [typescript] 나는 제네릭을 아는가?
  • type alias, interface
  • [TypeScript] Enum, Interface, 타입별칭, 타입추론
Summer.dev
Summer.dev
프론트엔드 개발자 Summer 입니다! 피드백은 언제나 환영입니다.
Summer.dev
꾸준함이 무기
Summer.dev
전체
오늘
어제
  • 분류 전체보기
    • Projects
      • Next.js board-project
      • MOMO
    • 원티드
    • 우테코 프리코스
    • JavaScript
    • React
    • TypeScript
    • Node.js
    • Algorithm
      • 코플릿
      • 개념정리
    • 네트워크
    • 오류해결
    • 회고
    • 기술면접준비
    • git,github
    • 소소하게 궁금한것
    • Next.js Beta Docs 번역
    • 디자인패턴
    • 트러블슈팅
    • 번역

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 알고리즘
  • 메모이제이션

최근 댓글

최근 글

hELLO · Designed By 정상우.
Summer.dev
[TypeScript] 프로젝트 환경설정과 문법
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.