[typescript] 타입스크립트란?

 

1.  타입스크립트는 무엇인가? 

     자바스크립트에 타입을 도입한 자바스크립트이며, 자바스크립트의 상위 집합(Super set)이다.

 

2. 왜 사용하는가? 

    시스템 규모가 커짐에 따라 시스템의 복잡도가 늘어나는데,  이럴때 정적타입의 타입스크립트가 빛을 발휘한다.

 

    (1) 빠른 버그 발견가능 : 실행되기 전에 상당수의 오류 잡아낼 수 있다. 

    (2) 컴파일러 및 코드 에디터가 코드를 실행하지 않고도 프로그램에 대해 훨씬 더 많은 정보를 알 수 있다.

    (3) 자바스크립트는 간단한 실수조차 실제 코드를 실행해 봐야 잡아 낼 수 있는 반면, 타입스크립트는 실행전에 잡을 수 있다.

          => 안전하게 코드를 작성할 수 있다.

 

 

3. 기본타입

    1) boolean

const a: boolean = true;

    2) number

const a:number = 11;
const b:number = 0.1 or 0.1  0.2;

    3) string

const a: string = '한글';

    4) null / undefined

const a: null = null;
const b: undefined = undefined;

strictNullChecks 플래그가 켜져있는게 좋다. 꺼져있으면 아래와 같이 쓰는게 가능하다.

const a: number = null; // okay

4. 특별한 타입

   1) any : 모든타입과 호환가능하다. 최대한 사용자제하는 게 좋다. 이걸 쓰면 자바스크립트와 별반 차이가 없으니..

       (1) 언제사용?   

            가. 타입정의를 제공하지 않는 라이브러리

            나. 일단 넘어가고 나중에 정확히 적고 싶은 부분

            다. 코드 작성시점에 형태를 알 수 없는 값 등의 타입표기에 유용

 

   2) void : null/undefined 만 값으로 가질 수 있는 타입이며, 아무 값도 return 하지 않는 함수의 반환 타입을 표시할 때 사용한다.

function nothing(): void {}

   3) never : 아무런 값도 가질 수 없는 타입. try~catch~throw에서 값을 가지지 않는 throw에 사용한다.

function errorThrow(): never {
	throw new Error('ddd');
}

 

5. 배열과 튜플

   1) 배열 : 표현 방식 2가지

const pibonacci: number[] = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: string[] = ['Imperial Stout', 'India Pale Ale', 'Weizenbock'];

or
//generic 표기방식
const pibonacci: Array<number> = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: Array<string> = ['Imperial Stout', 'India Pale Ale', 'Weizenbock'];

   2) 튜플 : 튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만 가질 수 있다. but,  Array의 프로토타입 메소드를 통해 조작하는 것은

                   금지 되어 있지 않다.

const a: [string, number] = ['a', 180];//가능
const a: [string, number] = ['a', 180,42];//불가능

const a: [string, number] = ['a', 180];
a.push(42); //가능

6. 객체

   1) 객체타입 :  중괄호 이용해 타입 표기

const user: { name: string; height: number; } = { name: 'a', height: 180 };

   2) 선택속성 :  속성 명 뒤에 ? 붙여서 해당 속성 유무를 표기

const a: { name: string; height?: number; } = { 
  name: '피카츄' 
};

   3) 읽기 전용 속성:  readonly속성을 붙임으로써 속성 재할당 방지 가능.(const 와 비슷하게 동작함)

const user: { 
  readonly name: string; 
  height: numer; 
} = { name: 'pikachu', height: 176 };
user.name = 'pikachu'; // error TS2540: Cannot assign to 'name' because it is a constant or a read-only property.

7. 타입 별칭(alias) 정의

type UUID = string;
type Height = number;
type AnotherUUID = UUID;
type Animals = Animal[];
type User = {
  name: string;
  height: number;
};

function getuser(uuid: string) {} //이런식으로 변환해서 사용.

 

8. 함수

   1) 함수의 타입을 결정하기 위해서는 매개변수 타입과 return  값의 타입의 정보가 필요하다.

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

or 반환 타입이 없으면

function sum(a: number, b:number): void {
	console.log(`Hello', ${name)!`);
}

  2) 함수 값의 타입 표기

//매개 변수 있는 경우
(...매개변수 나열) => 반환 타입

//매개변수 없는 경우
() => 반환 타입

//ex
const yetAnotherSum: (a: number, b: number) => number = sum;
const onePlusOne: () => number = () => 2;
const arrowSum: (a: number, b: number) => number = (a, b) => (a + b);

  (1) 별칭도 사용가능

type SumFunction = (a: number, b: number) => number;
const definitelySum: SumFunction = (a, b) => (a + b);

3) 기본 매개변수

매개변수명: 타입 = 기본값

function whatYourName(name: string = 'pikachu'): void {
	console.log(`Hello, ${name}`);
}

whatYourName('richu'); // Hello, richu
whatYourName();// Hello, pikachu

 

4) 선택 매개변수

   (1) ? 를 통해서, 매개변수가 생략 될 수 있음을 명시가능하며, 사용할 경우 option을 통해서 해당 값이 undefined인지

        사전 검사를 해야한다.

function fetchVideo(url: string, subtitleLanguage?: string) {
  const option = { url };
  if (subtitleLanguage) {
    option.subtitleLanguage = true;
  }
}

 (2) 필수 매개변수는 선택 매개변수보다 앞에 있어야 한다.

function invalidFetchVideo(subtitleUrl?: string, url: string) {} //안됨

function invalidFetchVideo(url: string, subtitleUrl?: string) {} //가능

5) 함수 오버로딩

    (1) 함수는 하나 이상의 시그니처 타입과 하나의 구현을 가져야한다.

    (2) 타입이 다른 같은 함수인 경우 분기처리를 통해 함수의 본문을 구현한다.

function double(str: string): string;
function double(num: number): number;
function double(arr: boolean[]): boolean[];

//아래와 같이 구현
function double(arg) {
    if (typeof arg === 'string') {
        return `${arg}${arg}`;
    } else if (typeof arg === 'number') {
        return arg * 2;
    } else if (Array.isArray(arg)) {
        return arg.concat(arg);
    }
}

6) this 타입

    (1)  this는 함수의 실행되는 시점에 결정되는데, 이런 특성은 함수 내부에서 this의 타입을 추론하는 일을 어려게 만들기 때문에

           타입스크립트는 이런 어려움을 해결하기 위해서 함수내에서의 this 타입을 명시할 수 있는 수단 제공,

    (2) 타입 시그니처에서 매개변수 가장 앞에 this를 추가.(가짜 타입)

interface HTMLElement {
  tagName: string;
  /* ... */
}
interface Handler {
  (this: HTMLElement, event: Event, callback: () => void): void;
}
let cb: any;
// 실제 함수 매개변수에는 this가 나타나지 않음
const onClick: Handler = function(event, cb) {
  // this는 HTMLElement 타입
  console.log(this.tagName);
  cb();
}

   (3) this 타입을 void로 명시하면 함수내부에서 this에 접근하는 일을 막을 수 있음.

interface NoThis {
  (this: void): void;
}
const noThis: NoThis = function() {
  console.log(this.a); // Property 'a' does not exist on type 'void'.
}

 

9. 제너릭

   1) 여러타입에 대해 동일한 규칙을 갖고 동작하는 타입을 정의할 수 있음.

   2) 제너릭 타입 별칭이 사용가능하다. 

function getFirstElem<T>(arr: T[]): T {
  /* 함수 본문 */
}

function 함수명<타입 변수>(인자 타입): 반환 타입 {
  /* 함수 본문 */
}

임의의 타입 T에 대해 T타입 값의 배열 arr를 인자로 받아 T 타입 값을 반환하는 함수다.

//별칭사용
type MyArray<T> = T[];
const drinks: MyArray<string> = ['Coffee', 'Milk', 'Beer'];

  3) 핵심은 여러타입에 대해 동작하는 요소를 정의, 해당요소를 사용할 때가 되어야 알 수 있는 타입정보를 정의하여 사용.

 

10. 유니온 타입

     1) 여러경우 중 하나인 타입을 표현 가능

     2) "|" 을 사용하여 표현

type SquaredType = number | string | boolean;

function square(value: number, returnOnString: boolean = false): SquaredType {}

  3) 타입이 많아지면 아래와 같이 정렬해서 사용가능

type Fruits
  = Apple
  | Banana
  | Cherry;
  
  or
  
type Fruits =
  | Apple
  | Banana
  | Cherry;

11. 인터섹션 타입

     1) 여러 경우에 모두 해당인 타입을 표현

     2) &(앰퍼샌드) 기호로 표현가능하며, 어떤 값도 만족하지 않는 타입이 생김에 유의.

type Infeasible = string & number

   3) 여러줄에 걸쳐적은 인터섹션 타입

type BeerLovingProgrammer
  = Programmer
  & BeerLover;

 

12. 열거형

    1) 유한한 경우의 수를 갖는 값의 집합을 표현하기 위해 사용하는 열거형(enum) 타입

    2) Enum의 모든 멤버의 타입은 Enum이다.

    3) 숫자형 Enum

//아래 두개의 결과는 같다.
//0부터 순차적으로 증가
enum Direction {
  East,
  West,
  South,
  North
}
enum ExplicitDirection {
  East = 0,
  West = 1,
  South = 2,
  North = 3
}

      (1) 멤버 값 초기화

           가. 0부터 시작되는 자동초기화 말고, 직접 값을 초기화 가능

           나. 초기화 되지 않은 멤버가 있다면, 그 값은 이전에 초기화 된 멤버의 값에서 순차적으로 증가하여 결정됨.

enum InitializedDirection2 {
  East = 3,
  West /* 4 */,
  South = 7,
  North /* 8 */
}

    4) 문자열 Enum

        (1) 숫자형과 다르게 자동증가 개념은 없음

        (2)  문자열 멤버 이후로 정의된 모든 멤버는 명시적으로 초기화 되야함.

        (3) 문자열 열거형이 컴파일 된 자바스크립트 코드에는 값 -> 키의 역방향 매칭이 존재하지 않음.

 

    5) 한 열거형에서 문자, 숫자 둘다 허용되는 것도 있지만, 권장하지 않음

   

    6) Union Enum : 아래 경우중 하나에 해당하는 열거형

         (1) 값이 표기되지 않은 멤버

         (2) 문자열 리터럴

         (3) 숫자 리터럴

         (4) 유니온 열거형의 멤버는 값인 동시에 타입이 된다.

type Circle = {
  kind: ShapeKind.Circle;
  radius: number;
}
type Triangle = {
  kind: ShapeKind.Triangle;
  maxAngle: number;
}
type Square = {
  kind: ShapeKind.Square;
  maxLength: number;
}
type Shape = Circle | Triangle | Square;

 

 

참고자료 : https://ahnheejong.gitbook.io/ts-for-jsdev/04-interface-and-class/intro