[TS] TypeScript 기초 - 2

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

 

2020/01/24 - [programing/JavaScript] - [TS] TypeScript 기초 - 1

2020/01/25 - [programing/JavaScript] - [TS] TypeScript 기초 - 2

2020/01/26 - [programing/JavaScript] - [TS] TypeScript 기초 - 3

2020/01/28 - [programing/JavaScript] - [TS] TypeScript 기초 - 4

2020/01/31 - [programing/JavaScript] - [TS] TypeScript 기초 - 5

2020/02/01 - [programing/JavaScript] - [TS] TypeScript 기초 - 6

---

이번 포스트에서는 타입스크립트 핸드북을 간단하게 정리한 글입니다.

한글로 번역된 좋은 페이지도 있으므로, 글 하단에 링크 남겨두겠습니다.

 

 

기본 자료형

기본 자료형에 대한 자세한 문서는 다음 링크를 참고해주세요.

https://www.typescriptlang.org/docs/handbook/basic-types.html

 

원시값 (primitive type)

• Boolean
• Number
• String
• Null
• Undefined
• Symbol (ES6에 추가됨)

 

원시값이 아닌 값 (non-primitive type)

• Object
• Array
• Tuple
• Enum
• Any
• Void
• Never

 

보통 Void와 Never은 함수의 반환값에 대한 자료형으로 쓰입니다.

 

 

고급 자료형

• Intersection
  • 여러 자료형을 하나로 만들어줍니다.
  • 따라서, 해당 자료형을 가진 변수는 재료가 되는 자료형들의 모든 멤버와 메소드를 가집니다.
• Union
  • 여러 자료형 중의 하나가 될 수 있음을 의미합니다.
  • 즉, 컴파일러 입장에서는 재료가 되는 자료형들 중 어떤 자료형이 될 지 예측할 수 없습니다.
  • 따라서, 해당 자료형을 가진 변수는 재료가 되는 모든 자료형들의 공통된 멤버나 메소드만 가질 수 있습니다.
• Nullable
• String Literal
• Numeric Literal
• Enum Member
• Discriminated Unions
• Polymorphic this
• Index
• Mapped
• Conditional

 

고급 자료형에 대한 자세한 문서는 다음 링크를 참고해주세요.

https://www.typescriptlang.org/docs/handbook/advanced-types.html

 

 

Type Assertion

해당 변수의 타입을 컴파일러에게 알려주는 것. (형 변환과는 다릅니다.)

이 기능은 런타임에 영향을 끼치지 않고, 컴파일타임에만 영향을 미칩니다.

타입 어설션은 두가지 문법(angle-bracket, as)이 존재합니다.

 

angle-bracket

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

 

as

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

angle bracket 문법과 as 문법은 동일하지만, JSX를 사용하는 경우엔 as문법만 허용합니다.

 

 

Type Aliase

특정 자료형의 이름을 만듭니다. (새로운 자료형을 만드는 것이 아니라, 해당 자료형에 대한 refer를 만드는 것입니다.)

인터페이스와 유사하지만 프리미티브, 유니온, 튜플, 기타 자료형의 이름을 만들 수 있습니다.

인터페이스와 동일하게, 제네릭으로 사용될 수 있습니다.

// generic
function identity<T>(arg: T): T {
    return arg;
}

const strResult = identify<string>("hello"); // type of strResult is string
const numResult = identify<number>(10); // type of numResult is number

// generic with type aliase
type Container<T> = { value: T };

const numContainer: Container<number> = { value: 10 };
const strContainer: Container<string> = { value: 'hello' };

 

Type Aliase vs Interface

타입 앨리어스와 인터페이스는 두가지 차이점이 있습니다.

• 타입 인스펙션에서, 인터페이스는 인터페이스 이름을 띄우지만, 타입 앨리어스는 타입 앨리어스 이름이 아닌 리터럴 객체를 띄웁니다.
• 타입 앨리어스는 extends되거나 implements될 수 없고, 다른 타입을 extends하거나 implements할 수 없습니다. (2.7버전 부터는 intersection type을 이용해 상속될 수 있습니다.)

그럼 언제 타입 앨리어스를 쓰고 인터페이스를 써야 할까요?

공식문서를 보면, 최대한 인터페이스를 이용해 개방&폐쇠의 원칙을 지키라고 되어 있습니다. 다만, 인터페이스로 자료형의 구조를 정의할 수 없거나 유니온, 튜플을 사용할때는 타입 앨리어스를 사용하라고 합니다.

 

인터페이스와 타입 앨리어스에 대한 자세한 정보는 아래 링크를 참고해주세요.

https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases

 

 

Symbols

심볼은 ES6에 추가된 원시값입니다.

 

let sym1 = Symbol();
let sym2 = Symbol("key"); // optional string key
let sym3 = Symbol("key");

sym2 == sym3; // false
sym2 === sym3; // false
sym3 === sym3; // true

심볼은 Symbol생성자로 만들 수 있으며, 변경불가능(immutable)하며 고유(unique)합니다.

 

const sym = Symbol();

let obj = {
    [sym]: "value"
};

console.log(obj[sym]); // "value"

심볼은 객체의 속성의 키로 사용될 수 있습니다.

 

Well-known Symbols

잘 알려진 심볼은, 내장 심볼입니다.

• Symbol.hasInstance
• Symbol.isConcatSpreadable
• Symbol.iterator
• Symbol.match
• Symbol.replace
• Symbol.search
• Symbol.species
• Symbol.split
• Symbol.toPrimitive
• Symbol.toStringTag
• Symbol.unscopables

 

 

참고

https://www.typescriptlang.org/docs/handbook/basic-types.html

Basic Types · TypeScript

https://www.typescriptlang.org/docs/handbook/symbols.html

Symbols · TypeScript

https://typescript-kr.github.io/

TypeScript 한글 문서