[TypeScript] 타입스크립트(TS) 기초

 

새로 옮긴 팀에서 타입스크립트를 쓴다. 예 그렇습니다. 뭐든 배워두면 좋으니까

---

 

■ 타입스크립트(TypeScript)란?

 마이크로소프트에서 개발한 자바스크립트의 슈퍼셋(superset) 오픈소스 프로그래밍 언어. 즉, 타입스크립트 ≥ 자바스크립트

타입스크립트(이하 TS)는 자바스크립트로 트랜스 컴파일된다.

 

  1. 자바스크립트(이하 JS)는 매우 관대한 언어다. 이와 반대로 TS는 언어에 미리 타입을 부여하여 엄격하게 변수를 제한하는 것이므로 컴파일 시, 에러를 잡기에 용이하다.

  2. 또한 실행 속도 시 장점이 있다. 런타임 시, 에러를 체크하는 대신 그 전에 사람이 직접 오류를 체크하기 때문에 JS에 비해 속도가 매우 빠르다. 

  3. 안전하며, 협업에 용이하다. 타인의 코드를 읽었을 때에 한 눈에 어떤 타입인지 알 수 있으므로.

 

JS는 동적 언어, 런타임 시 에러 발생

TS는 정적 언어, 런타임 전 에러 발생 (더 안전함)

 

큰 프로젝트일수록 JS의 자유도는 독이 된다고 한다. 

 

* superset : A ≥ B 일 때, A는 B의 슈퍼셋이다.

 

Vue에서는 TS 사용을 위해 .ts 확장자를 사용한다. (React는 .tsx라고 함)

이 .ts 확장자가 .js로 컴파일 되는 것

 

 

---

 

■ 타입스크립트의 타입

 1. Boolean

let isJoin: boolean;
let isJoin: boolean = true;

 

 2. Number

let num: number;
let integer: number = 10;
let float: number = 3.14;
let nan: number = NaN;

 

3. String

let str: string;
let name: string = 'KIMEUNA'
let name: string = lastName + 'EUNA';
let name: string =`${lastName}EUNA`;

 

4. Array

let colors: String[] = ["Red", "Blue", "Yellow"];
let colors: Array[String] = ["Red", "Blue", "Yellow"];

let num: number[] = [1, 2, 3, 4, 5];
let num: Array<number> = [1, 2, 3, 4, 5];

 

아래에 나오는 유니언 타입(다중 타입)을 이용할 수도 있다.

let arr: (string | number)[] = ['red', 1, 'blue', 2];
let arr: Array<string | number> = ['red', 1, 'blue', 2];

 

배열의 타입을 미리 선언 할 수 없는 경우에는 any를 사용한다.

let arr: any[] = [0, {}, [], "red", true];

 

인터페이스와 커스텀 타입도 사용할 수 있다.

interface Userinfo {
  name: string;
  age: number;
  isJoin: boolean;
}

let arr: Userinfo[] = [
  {
    name: "KIMEUNA",
    age: 30,
    isJoin: true,
  },
  {
    name: "RYUHANMIN",
    age: 32,
    isJoin: true,
  },
];

 

읽기전용(!) 배열도 있다.

let colors: readonly String[] = ["Red", "Blue", "Yellow"];
let colors: ReadonlyArray[String] = ["Red", "Blue", "Yellow"];

 

5. Tuple

 튜플 타입은 배열과 유사하나, 고정된 타입 뿐 아니라 고정된 길이도 표현한다.

let tuple: [string, number]
tuple = ['KIMEUNA', 30];
tuple = [30, 'KIMEUNA'];

let userInfo: [number, string, boolean] = [30, 'kimeuna', true];

let userInfo: [number, string, boolean][];
let userInfo: Array<[number, string, boolean]>
usersA = [[30, 'kimeuna', true], [33, 'ryuhanmin', false]];

값으로 대체 가능

let userInfo: [1, string, true];

고정된 길이라고는 하나, push / splice 함수로 값을 넣는 행위는 가능하다.

마찬가지로 읽기 전용도 생성할 수 있다.

let arr: readonly [string, number] = ['kimeuna', 30];
a[0] = 'ryuhanmin'; //Error

6. Enum

 숫자 혹은 문자열 값 집합에 이름을 부여할 수 있다. 값의 종류가 일정 범위로 지정되어있는 경우 쓰기 좋다(요일 등)

 0부터 시작하고 1씩 증가한다.

enum Week {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
}
console.log(Week.Mon);
console.log(Week.Tue);

중간에 다른 값으로 지정도 가능하다.

enum Week {
  Sun,
  Mon=7,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
}

console.log(Week.Mon); // 7
console.log(Week.Tue); // 8

역방향 매핑을 지원한다.

console.log(Week['Mon']); // 1
console.log(Week[1]); // 'Mon'

 

7. any

 모든 타입을 의미한다. 일반적인 자바스크립트의 변수처럼 사용 가능하다.

외부 자원을 활용하여 개발하는 경우, 타입을 단언할 수 없으므로 유용하다.

let any: nay = 123;
any = {};
any = null;
any = 'kimeuna'

const arr: any[] = [30, 'kimeuna', true];

 

8. Unknown

 any와 마찬가지로 알 수 없는 타입을 의미한다. unknow 타입은 any를 제외한 모든 타입에 할당할 수 없다. 

let u: unknown = 19940207;
let ea1: number = u; //unknown은 any를 제외하고, 다른 타입에 할당 불가
let ea2: number = u as number; //타입 단언 후에는 가능!
let ea3: any = u; // any와 unknown은 서로 할당 가능

 

9. Object

let obj: object = {};
let arr: object = [];
let fun: object = function () {};
let nullVal: object = null;
let date: object = new Date();

* 컴파일러 strict 옵션을 true로 설정하면 null 을 대입 시, Error 발생!

 

이런식으로 객체의 프로퍼티 타입을 지정해줄 수 있다.

let userInfo: {name: string, age: number } = {
  name: 'kimeuna',
  age: false, // Error
  email: 'nv@naver.com' // Error
}

 

반복적인 프로퍼티 타입 지정을 위하여서는 인터페이스와 타입을 사용하는 것이 편하다.

interface UserInfo {
  name: string,
  age: number
}

let userA: UserInfo = {
  name: 'KIMEUNA',
  age: 30
};

let userB: UserInfo = {
  name: 'RYUHANMIN',
  age: 33,
  mail: true // Error
}

 

10. Null & Undefined

 null과 undefined는 모든 타입의 하위 타입이므로, 각 타입에 모두 할당 가능하다. 물론 서로에게도.

 단, stringNummCheck 옵션을 true로 주면 두 타입은 서로 할당이 불가하다.

 

 

11. void

 값을 반환하지 않는 함수에서 사용

const test(logs: string): void {
  console.log('집에가고싶다.');
}

 

12. Never

절대 발생하지 않을 값을 의미한다. 어떠한 타입도 적용 불가하다.

const err(msg: string) never {
  console.log('error');
}

아래와 같이 빈 배열을 never 타입으로 선언하고, 값을 push하면 에러가 발생한다.

const never: [] = [];
never.push(27);

 

13. Union

 다중 타입을 허용하는 경우 유니언을 사용한다. 

 타입의 구분 값은 | 이다. () 은 선택.

 

 꼭 string, number 두 타입의 값을 모두 넣지 않아도 된다. 둘 중 하나의 타입만 존재하면 된다.

let union: (string | number);
union = 'KIMEUNA'; 
union = 30;
union = false; //Error

 

14. Intersection

 인터섹션은 & 을 사용하여 다중 타입을 조합한다. 자주 사용은 X

 

15. Function

 함수에도 화살표 함수를 이용하여 타입 지정이 가능하다. 인수의 타입과 리턴 값의 타입을 입력한다.

let func: (arg1: number, arg2: number) => number;
myFunc = function(x, y) {
  return x + y;
}
myFunc(10, 100) // 110

let func2: () => void;
func2 = function () {
  console.log('kimeuna');
};

---

 

한눈에 보는 타입스크립트(updated)