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

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