타입스크립트 기초 학습 정리 - 1
2021-02-28 19:29:33 # TypeScript

타입스크립트란

  • 마이크로소프트에서 개발하고 관리하는 오픈 소스이다.
  • 정적 타입의 언어 이다. (데이터 타입이 존재)
  • 별도의 컴파일러가 존재 하여 컴파일을 하게 되면 자바스크립트 파일로 변환 된다.
  • 자주 쓰는 VsCode의 경우가 타입스크립트로 개발되어 있다.

장점 & 단점

  • 데이터 타입을 명시 하여 코드의 가독성이 좋아 진다.
  • 생산성도 좋다고 하는데 아직 숙달 레벨이 아니라 체감을 못하는 중..😓
  • 여러 사람이 쓰는 코드의 경우 JS보다 관리 레벨이 더 좋을 듯..?
  • 단점이라면 사용하기 위해서는 구성원들이 학습을 해야 한다.

설치

1
2
npm i typescript -g # 타입스크립트 컴파일러
npm i ts-node -g # ts 파일 실행, 개발때는 매번 컴파일 하기 귀찮으므로..

기본 문법

  • string, number, boolean등 데이터 타입을 선언할 수 있다.
  • any는 어떤 타입의 데이터도 쓸 수 있는데 가능 하면 안 쓰기 (이러면 JS와 다를 게 뭐가 있나 😤)
  • never는 절대 리턴이 없는 케이스 (throw 같은 경우)
  • void는 undefined 리턴인 경우에 쓴다.
  • 배열도 마찬가지로 다른 데이터 타입이 들어 오면 에러가 난다.
  • 튜플은 아마 안 쓸 거 같음..
  • 함수에서는 매개변수, 리턴 타입을 적어주는 게 관례
  • ?를 붙이는 건 선택형 매개변수
  • 프로미스의 경우 tsconfig에서 es2015이상이여야 사용 가능
  • 프로미스의 리턴 타입의 경우 resolve의 데이터 타입을 적어주어야 하며 에러의 경우는 any로 잡힘

특이한 타입으로 any, never라는 게 있는데 any는 말 그대로 어떤 데이터의 타입

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
 * 변수 선언
 */
let age: number = 33;
let age2 = 34; // 숫자로 인식
let name: string;

console.log('age', age);
name = 'delryn';
console.log('name', name);
// age2 = 'str'; // type err
// name = 33; // type err

let check: boolean = true;
let all: any = 33;
all = 'omg';

function neverNoneReturn(): never {
  // return false; // err
  throw new Error('is error');
}

// function neverNoneReturn2(): never {
//     console.log('never');
// }

function voidReturn(): void {
  console.log('undefined return');
  // return false; // type err
  // return undefined; // type ok
}

/**
 * 배열
 */
const numList: number[] = [];
const strList: Array<string> = ['a'];
numList.push(1);
// numList.push('2'); // type err
strList.push('b');

/**
 * 튜플
 */
let idAndName: [number, string];
idAndName = [0, 'a'];
idAndName.push('?!'); // push가 된다...😤
console.log('idAndName', idAndName); // [ 0, 'a', '??' ]

/**
 * 함수
 */
function numAdd(num: number, num2?: number): number {
  if (num2) return num + num2;
  return num;
}

console.log(numAdd(11));
console.log(numAdd(88, 11));

function numAddPromise(num: number, num2: number): Promise<number> {
  return new Promise((resolve, reject) => {
  if (num + num2 > 100) return reject(new Error("너무 큰 수"));
    return resolve(num + num2);
  });
}

numAddPromise(1, 3)
    .then((result) => {
      console.log("result", result);
    })
    .catch((e) => {
      console.log("e", e);
    });

numAddPromise(1, 100)
    .then((result) => {
      console.log("result", result);
    })
    .catch((e) => {
      console.log("e", e);
    });

타입 별칭

Type Alias는 직역 하면 내가 정의한 타입이라는 의미인데 뭔가 구조체 같은 느낌이 나기도 하고..

주로 Object를 다룰 떄 쓸 꺼 같고 자주 쓰게 될 문법 일 듯 😀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
type Text = string;
let str: Text = "delryn";
// let str2: Text = 3; // type err

type User = {
  id: string;
  name: string;
  age?: number; // 마찬가지로 Optional
};

const aUser: User = {
  id: "a_id",
  name: "a_name",
  age: 1,
};

const bUser: User = {
  id: "b_id",
  name: "b_name",
};

function setUser(obj: User): User {
  return obj;
}

console.log(setUser(aUser)); // { id: 'a_id', name: 'a_name', age: 1 }
console.log(setUser(bUser)); // { id: 'b_id', name: 'b_name' }

type numCallback = { // 숫자 콜백 함수 정의
  ( error: Error | null, result?: number ) : void;
}

function numCallbackFunc(arg: number, arg2: number, cb: numCallback) {
  if (arg + arg2 > 100) return cb(new Error('계산할 수 없는 수'));
  return cb(null, arg + arg2);
}

numCallbackFunc(1, 30, (err, result) => {
  console.log('err', err);
  console.log('result', result);
});

numCallbackFunc(1, 100, (err, result) => {
  console.log('err', err);
  console.log('result', result);
});

유니온 & 인터섹션

  • 유니온 = OR (한 타입의 프로퍼티들을 기입 하고 나서 나머지 타입은 넣거나 말거나)
  • 인터섹션 = AND (모든 프로퍼티를 기입 하여야 함)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * Union
 */
type User = {
    userId: string,
    userName: string
};

type Purchase = {
    goodsId: string,
    goodsName: string
};

type SetPurchase = User | Purchase;

const data: SetPurchase = {
    userId: 'user_id',
    userName: 'user_name',
    goodsId: 'goods_id'
}

console.log(data);

/**
 * intersaction
 */
type SetPurchase2 = User & Purchase;

const data2: SetPurchase2 = {
    userId: 'user_id2',
    goodsId: 'goods_id2',
    userName: 'user_name2',
    goodsName: 'goods_name'
}

console.log(data2);

Enum

열거형을 지원함

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
enum Season {
    Spring, // 0부터 시작
    Summer,
    Autumn,
    Winter
}

const season: Season = Season.Winter;

console.log('season', season); // 3

enum SeasonToString {
    Spring = "SPRING",
    Summer = "SUMMER",
    Autumn = "AUTUMN",
    Winter = "WINTER"
}

let season2: SeasonToString = SeasonToString.Winter;

console.log('season2', season2); // WINTER

season2 = SeasonToString.Spring;
Prev
2021-02-28 19:29:33 # TypeScript
Next