TypeScript (타입, 함수, 연산자:유니온/인터섹션)

TypeScript(타입, 함수, 연산자:유니온/인터섹션)

---

TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어입니다.

• TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지  보수성을 높여줍니다. 이를 통해 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업  시 코드의 가독성을 높일 수 있습니다.
• TypeScript는 ES6 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스, 제네릭, 데코레이터 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와줍니다. 

 

 

CRA(Create-React-App) + Typescript

1. 터미널에서 프로젝트 생성

$ npx create-react-app [프로젝트 이름] --template typescript

 

2. tsconfig.json 내용 커스텀

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다.
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

 

3. 필요한 프리셋과 라이브러리 설치

$ npm i -D @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier

 

4. .eslintrc.js 파일 생성하여 커스텀

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'prefer-const': 'off',
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

 

---

 

TypeScript 타입

 

TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원합니다.

 

1. Boolean 타입

가장 기본적인 데이터 타입으로, JavaScript에서도 마찬가지로 boolean 값이라고 불리는 참,거짓 입니다.

 

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

 

2. Number 타입

JavaScript와 마찬가지로 정수와 실수의 구분 없이 Number 타입 하나로 표기합니다. TypeScript는 이 외에도 추가로 bigint를 지원합니다.

 

let number1: number = 5;
let number2: number = 0.7;

 

 

3. String 타입

큰 따옴표나 작은 따옴표를 사용하여 문자열 데이터를 표현합니다. 또한 백틱을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있습니다.

 

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

 

 

4. Array 타입

두 가지 방법으로 배열 타입을 선언해 사용할 수 있습니다.

 

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

 

 

5. 튜플 타입

튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다.

 

let user: [string, number, boolean] = ["kimcoding", 20, true];

 

 

6. 객체 타입

TypeScript에서도 객체는 원시 타입이 아닌 타입을 나타냅니다. JavaScript의 원시 타입에는 ( number, string, boolean, undefined, null, symbol ) 이 있습니다. TypeScript에서는 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있습니다. 하지만 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아닙니다.

 

따라서 객체의 프로퍼티 타입들은 각기 명시해 주는 것이 훨씬 좋습니다. 객체는 이런 방식으로 key-value 에 구체적인 타입까지도 지정할 수 있습니다.

 

let obj: object = {};

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

 

 

7. Any 타입

타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있습니다. any 타입을 사용하게 되면 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 됩니다.

 

또한 any 타입은 타입의 일부만 알고, 전체를 알지 못할 때 유용합니다. 예를 들어 여러 타입이 섞인 배열을 받고자 할 때 유용합니다.

 

let maybe: any = 4;

let list: any[] = [1, true, "free"];

 

---

 

TypeScript 함수

 

TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 합니다. 각 매개변수에 해당하는 타입을 작성한 뒤, 변환되는 타입을 괄호 뒤에 작성을 해줘야 합니다.

//named function
function add(x: number, y: number):number {
	return x + y;
}

//arrow function
let add = (x: number, y: number): number => {
	return x + y;
}

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

 

또한 TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 합니다. 만약 개발자가 전달인자를 전달하지 않거나, undefined 를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있습니다. 이는 JavaScript에서의 default parameter와 같은 동작을 합니다.

혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있습니다.

// 매개변수가 1,2개 일때는 정상적으로 작동합니다.
let greeting = (firstName: string, lastName="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

 

---

 

TypeScript의 연산자 활용 타입

 

TypeScript는 연산자를 이용해 타입을 정할 수 있습니다. JavaScript에서도 보았던 ||(OR) 연산자나 &&(AND)와 같은 연산자를 이용하여 만들 수 있습니다. 또한 | 연산자를 이용한 타입을 유니온 타입이라고 하며, & 연산자를 이용한 타입은 인터섹션 타입이라고 부릅니다.

 

 

유니온(Union) 타입

유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입입니다. | 연산자를 이용하며, 자바스크립트의 || 연산자와 같이 `A이거나 B이다`라는 의미의 타입입니다. 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용합니다.

function printValue(value: number|string): void {
  ...
}

 

유니온 타입의 장점

• 유니온 타입을 사용하면 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있습니다.
• 코드를 이해하기 쉽게 만들어주며, 가독성을 높일 수 있습니다.

 

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

• 유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 합니다.
• 공통 프로퍼티 외에 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 합니다.

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

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

// 공통 프로퍼티인 name에만 접근 가능합니다.
function askSomeone(someone: Developer | Person) {
	
    console.log(someone.name);
    
    // in 연산자는 객체의 속성 이름과 함께 사용하여
    // 해당 속성이 객체 내에 존재하는지 여부를 검사합니다.
    if ('skill' in someone) {
    	console.log(someone.skill);
    }

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

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

 

 

인터섹션(Intersection) 타입

인터섹션은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법입니다. & 연산자를 사용하여 표현합니다.

 

// string, number, boolean 타입을 전부 받을 수 있습니다
let value: string & number & boolean;

 

인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않습니다. 그러나 전달인자를 전달할 때 선택지가 생기는 유니온 타입과 반대로, 인터섹션 타입은 모든 프로퍼티를 전부 보내줘야만 합니다.

 

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

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