타입스크립트 기본 복습 정리

타입스크립트

타입스크립트 프로젝트 환경 세팅

1. 프로젝트 폴더 생성
2. mkdir 폴더명 cd 폴더명
3. npm init -y 로 새 프로젝트 초기화
4. npm i typescript --save-dev 로 타입스크립트 설치
5. 프로젝트 루트 디렉토리에 tsconfig.json 파일 생성

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

1. src 폴더 밑에 typescript 파일 작성 가능!

Typescript ESLint와 Prettier 설정

타입스크립트는 2020년까지만 tslint를 지원하고 이후부터는 typescript-eslint를 사용해야한다.

eslint나 prettier를 사용하려면 아래의 안내대로 하면 된다.

1. vscode의 확장프로그램 ESLint 설치
2. cmd+shift+p 로 open user settings 열고 설정 적용

{
  // ...
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

1. 에디터 설정 중 format on save 설정되어있는지 확인하고 해제 (커맨드는 cmd + ,)
2. 확장프로그램 Prettier 설치
3. 프리셋 및 라이브러리 설치

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

1. 프로젝트에 .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란

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

JavaScript가 발전하면서 생긴 단접을 보완하기 위해 등장하게 된 것으로, JS에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발되었다.

JS는 처음에는 브라우저에서만 동작하는 스크립팅 언어였다. 하지만 시간이 지나면서 웹 애플리케이션의 상호작용이 증가하였고 웹 애플리케이션이 필요로 하는 JS코드의 양이 폭발적으로 늘어나게 되었다.

JS는 동적 타입이 결정되어 유연하고 다양한 라이브러리와 프레임워크를 사용할 수 있는 장점이 있지만 타입의 명시성이 부족하다는 단점이 있고 이는 예상치 못한 결과를 발생시킬 수 있다. ⇒ 이러한 단점을 보완하기 위해 TS 등장!

TypeScript의 장점

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

TS 타입

Boolean

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

Number

// 정수와 실수의 구분 없이 하나로 표기함. bigInt 지원 O
let number1: number = 5;
let number2: number = 0.7

String

let str1:string = 'hello'
let str2:string = "world"
let str3:string = `hello world`

Array

// 방법1 : 배열의 요소들을 나타내는 타입 뒤 [] 표기
let arr1: string[] = ['apple', 'banana', 'grape'];

// 방법2 : 제네릭 배열타입 사용
let arr2: Array<number> = [1, 10, 100]

// 배열은 기본적으로 하나의 타입만 작성하게 되어있고 타입을 혼용하는 것은 불가능하다.

Tuple

// 요소의 타입과 개수가 고정된 배열을 표현할 수 있음
let arr: [string, number, boolean] = ['hello', 10, false]

Object

// JS의 Object
// 원시 타입이 아닌 타입. 프로퍼티를 가지는 값이며 typeof 사용시 object 반환.

// TS의 Object
// 모든 객체를 수용. 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떤 프로퍼티도 추가할수있음
// 다만 타입 안정성을 보장하지 않기때문에 편하지만 추천하지 않음
// => 객체의 프로퍼티 타입들을 각기 명시해주는 것이 좋음!

let user : {name: string, age: number} = {
	name: 'harry',
	age: 20
}

Any

// 알지 못하는 타입을 표현해야 할때. = 타입검사를 하지 않으려고 할때
// ex) 클라이언트에서 유저로부터 받은 데이터, 서드파티 라이브러리에서 들어오는 값 등

let mm:any = 4;

// any 타입의 경우 변수에 값을 재할당할때 타입에 구애받지 않고 값을 재할당 할 수 있다.
mm = 'Yes'
mm = true

// 엄격한 타입 검사를 진행하지 않기 때문에 실제 할당된 값이 가지지 않는 
// 메서드 및 프로퍼티로 접근해도 에러 X. 대신 반환되는 값은 undefined

// 여러 타입이 섞인 배열 등을 받을때 (= 타입의 일부만 알고 전체는 모를때) 유용함 

함수

// 매개변수의 타입과 반환타입을 명시해야함 
// 반환타입은 괄호 뒤에 작성. 타입 추론 기능을 활용하지 않는 경우 필수적
function add(x:number, y:number):number {
	return x + y
}

let add = (x:number, y:number):number => {
	return x + y
}

// void : 함수에 리턴값이 없는 경우(타입추론 X라면 필수)
let log = ():void => {
	console.log('log'
}

// 매개변수의 개수에 맞춰서 전달인자를 전달해야함
// z 처럼 default parameter도 사용가능
// 선택적 매개변수의 경우 ? 를 붙일것
let fn = (x:string, y:string, z:string = 'yes', option?:string):string => {
	return `${x} ${y} ${z}
}

Union 타입

둘 이상의 타입을 합쳐서 만들어진 새로운 타입. | 연산자 사용. || 처럼 A이거나 B라는 의미.

다양한 타입의 값을 처리하는 경우 유용하다.

또한 타입 추론이 가능하기 때문에 관련된 api를 자동완성으로 쉽게 얻어낼 수 있고 가독성을 높일 수 있다.

let value = (value: number | string) => {
	// ...
}

let union = number | string | boolean ;

단, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있으므로 유의해야 함.

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

Type Guard : 타입을 보호하기 위해 사용되는 기능 중 하나. 특정 코드블록에서 타입의 범위를 제한해 코드블록 안에서 타입 안정성을 보장해준다.

interface User1 {
	name: string;
	age: number
}

interface User2 {
	name: string;
	job: string;
}

function gm = (type:User1 | User2) => {
	console.log(type.name)
	// User1과 User2가 모두 갖고있는 name에만 접근이 가능하다.
}

// type guard 사용시
function gm = (type:User1 | User2) => {
	// in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자 
	if ('age' in type) {
		// ...
	}
}

Intersection 타입

둘 이상의 타입을 결합하여 새로운 타입을 만든느 방법. & 연산자를 사용하여 표현.

여러개의 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에 타입 가드가 필요하지 않음.

하지만 결합된 타입 각각에 정의된 속성 모두를 받아 새로운 교집합을 만드는 것이기 때문에 전달인자를 전달해줄때 모든 프로퍼티를 보내줘야만 한다.

(유니온 타입의 경우 타입가드를 해줘야 하지만 전달인자를 전달할때 선택지가 생긴다.)

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});