typescript 요약

2023-01-30

TS 란?

type 같은걸 미리 지정해둘수 있는데, 아직은 익숙치 않아서 블로그를 작성하게 되었습니다.

예를 들어 User 라는 type을 생성한다고 가정하면,

‘interfaces/index.tsx’ 의 파일 안에 User type을 선언해두면,

export type User = {
  id: number
  name?: string
}

추후 아래와 같이 사용할 수 있습니다.

import type { User } from '../../interfaces'

즉, js와 같지만 Type 을 씌웠다고 생각하면 된다.

다만 컴파일 단계를 하나 더 거쳐야 되는 단점? 이 있다.

하지만 이런 컴파일 단계를 거치면서 에러를 런타임 전에 발견할 수 있다는 장점이 있다.

아래와 같이 타입을 선언함으로 개발단계에서 에러 검출이 가능하다.

const sum = (a: number, b: number) => {
	return a + b 
}

sum ("1", "2")

TS 특징

JS 와 완벽하게 호환한다.

Interface, type 이라는 것이 있기에 조금 더 객체지향 프로그래밍이 가능하다.

단점

러닝 커브가 있을수 있고, any 남발하는 경우가 생긴다.

라인이 늘어나 가독성이 더 좋지 않다고 느끼기도 한다.

기본 문법

타입

Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never

함수에 타입 설정

function add(a: number, b: number): number {
  return a+b;
}

옵셔널 파라미터

//옵셔널 파라미터
function log(a: string, b?: string, c?: string) {
 console.log(a);
}

Tuple (배열에 순서와 길이 지정)

var arr: [string, number] = ['aa', 100];

Enum (집합에 고정된 이름을 부여할 수 있는 타입)

enum Shoes {
 Nike = '나이키',
 Adidas= '아디다스'
}

Void (변수에는 undefined와 null만 할당하고 함수에는 리턴 값을 설정할 수 없는 타입)

Never (특정 값이 절대 발생할 수 없을 때)

인터페이스

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

인터페이스 활용

let person:USER = {
  age: 30,
  name: 'aa'
}

function getUser(user: User) {
  console.log(user);
}

인덱싱

interface StringArray {
  [index: number]: string;
}

let arr2: StringArray = ['a', 'b', 'c']
arr[0] = 10 //Error;

딕셔너리 패턴

interface StringRegexDictionary {
 [key: string]: RegExp
}

var obj: StringRegexDictionary = {
 cssFile: /\.css$/,
 jsFile: 'a' //Error
}

obj['cssFile'] = /\.css$/;
obj['jsFile'] = 'a' //Error

인터페이스 확장 (상속 느낌남)

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

interface User extends Person{
 language: string;
}

오퍼레이터

Union 타입: 자바스크립트의 OR 연산자와 같은 의미의 타입입니다. Union 타입으로 지정하면 각 타입의 공통된(보장된) 속성에만 접근 가능합니다.

function askSomeone(someone: Developer2 | Person) {
 console.log(someone);
}

Intersection 타입: 자바스크립트의 AND 연산자와 같은 의미의 타입입니다. 각각의 모든 타입이 포함된 객체를 넘기지 않으면 에러가 발생합니다.

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

제네릭

한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다.

function logText <T> (text: T):T {
 return text;
}

logText<string>('aa');
logText<number>(100);

타입 추론

타입 추론이란 타입스크립트가 코드를 해석하는 과정을 뜻합니다.

var a = true; // Boolean 타입으로 추론

a = 100; //Error (Number타입을 할당하였기 때문)

var arr = [1, 2, true]; // 타입을 Number | Boolean 으로 정의합니다.

interface Dropdown<T>{
 value: T,
 text: 'String'
}

var items: Dropdown<boolean> {
 value: true,
 text: 'aa'
}

타입 단언 (as)

추론하기전에 개발자가 해당 코드에 타입을 직접 지정하는 것을 의미합니다.

var a;
a = 10;
a = 'string';
var b = a as string;

// 타입추론시 HTMLDivElementㅣnull로 반환
var div = document.querySelector('div') as HTMLDivElement;
div.innerText;
// 위의 타입 단언으로 null을 대비한 분기문을 작성하지 않아도 됩니다.

타입 호환

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

var developer: Developer;
var person: Person;

developer = person; //Error (사람이 개발자 보다 더 상위임)
person = developer; //(반면 개발자는 사람안에 포함 가능)