기본 타입 정리

 

오랜만에 다시 정리 포스팅 시작! 이란 말은 공부를 다시 시작했다는 뜻입니다.

요즘 프론트엔드 기술에 기본으로 많이 보이는 타입스크립트를 느즈막히 시작해봅니다.

 

나란 인간은 기본 정의부터 보고 시작하는 타입이라 기본 타입부터 정리해봅니다. 

 

Boolean (true/false)

let name: boolean = true;

String

let name1: string = 'I am Jeon';
let name2: string = `Jeon`;
let name3: string = `I am ${ name2 }`;

Number

let name: Number = 333;

Array

방법1. 배열 요소 타입 뒤에 []를 쓰는 것

let array1: number[] = [1, 2, 3]; 

방법2. 제네릭 배열 타입을 쓰는걸 뜻한다. Array<elementType>

let array2: Array<number> = [4, 5, 6];

제너릭(Generic)이란?

<> 꺽쇠(Angle brackets)는 제너릭을 사용하겠다는 의미이다.

그 안에 타입으로 사용되는 식별자를 집어 넣는다.

 

Tuple

요소의 타입과 개수를 고정된 형태의 배열로 만드는데 쓰임.

let tupleName: [string, number]; 

tupleName = ['age', 20]; // true
tupleName = [20, 'age']; // false

Enum

값의 집합을 뜻하는 데이터 형.

1. 기본적으로 enum은 값을 0으로 시작한다.

enum Color {Red, Blue, Green}
let c: Color = Color.Red;
// Red = 0, Blue = 1, Green = 2 이 된다.

1. 시작 값을 바꿀 수가 있다.

enum Color {Red = 1, Blue, Green}
let c: Color = Color.Red;
// Red = 1, Blue = 2, Green = 3 이 된다.

1. 각 값도 바꿀 수가 있다.

enum Color {Red = 1, Blue = 4, Green = 7}
let c:Color = Color.Green;
// Red = 1, Blue = 4, Green = 7 이 된다.

1. 매겨진 값을 사용해 멤버 이름을 알아 낼 수 있다.

enum Color {Red = 1, Blue = 4, Green = 7}
let colorName: string = Color[4];
// colorName = Blue

Any

알지 못하는 타입을 표현해야 할 때 쓰인다. 예를 들어 동적 컨텐츠들을 뜻한다. any타입은 타입의 일부만 알고, 전체를 알지 못할 때 주로 쓰인다. (예: 다른 타입이 섞인 배열)

let anyType: any = 1;
anyType = 'I am string type';
anyType = false 
// any 타입으로 선언했기 때문에 이 모든게 true 이다.

해당 타입은 어떤 형태로든 가능하기 때문에 가장 강력한 타입이라고 한다.

Object도 비슷하게 쓸 수 있다고 생각 할 수 있지만 메서드가 존재하더라고 임의로 호출할 수는 없다고 한다.

예를 들어 아래와 같다.

let success: any = 1;
success.toFixed(); // true

let fail: Object = 4;
fail.toFiexed();  // false

Void

어떤 타입도 존재할 수 없는 것을 뜻한다. any의 반대라고 할 수 있다.

void 는 보통 함수에서 반환값(return)이 없을 때 반환 타입을 표현하기 위해 쓰인다.

function functionName(): void {
	// 없다
}

타입스크립트에서는 undefinded , null 이 각각의 타입 이름이기 때문에 아래처럼 void를 변수에 선언하는 것은 적절하지 않다. (--strictNullChecks를 사용하지 않을 때만 할당이 가능하다)

let notReturn: void = undefinded;
unusable = null; // true 

Null and Undefined

위에서 말했듯이 타입스크립트에서는 Null과 Undefined는 각각의 타입 이름으로 쓰인다.

let n: null = null;
let u: undefined = undefined;
// 이 변수들에는 각 위 값만 할당할 수 있다. 

*기본적으로 null과 undefined는 다른 모든 타입의 하위 타입이라 다른 타입에 할당이 가능하다.

--strictNullChecks

사용할 경우, null, undefined 는 오직 any와 자식들 타입에만 할당이 가능하다.

(void에는 예외적으로 undefined 사용 가능하다)

이를 사용하는 것을 가급적 권장하는데 일반적인 에리를 방지하는데에 도움을 주기 때문이다.

Never

• 해당 타입은 절대 발생할 수 없는 타입을 나타낸다고 한다.
• 모든 타입에 할당 가능한 하위 타입이다.
• 반대로 never 타입에는 어떤 타입도 할당이 안됩니다. (자신 제외)

function error(message: string): never {
	throw new Error(message);
}

function fail() {
	return error('에러났슈');
}

function infiniteLoop(): never {
    while (true) {
    }
}

Object

원시타입이 아닌 타입을 뜻한다.

number, string, boolean, symbol, null, undefined, bigint가 아닌 나머지를 의미한다.

declare function create(o: object | null): void;

create({name: 'jeon'}) // true
create(null) // true

create(20) // false
create('string') // false
create(true) // false
create(undefined) // false

타입 단언 (Type assertions)

• 타입스크립트보다 할당되는 값을 개발자가 더 잘 알 때
• 실제 타입이 현재 타입보다 더 구체적일 때

위와 같을 때 컴파일러에게 좀더 자세히 뭘하는지 알려주는(?) 걸 뜻한다.

방법1. <> (angle-bracket) 제너릭 문법

let someValue: any = 'This is a string';
let someLength: number = (<string>someValue).length;

방법2. as문법

let someVlaue: any = 'This is a string';
let someLength: number = (someValue as string).length;

만약 JSX와 함께 사용한다면 as문법만 사용 가능하다.

 

 

 

 

 

 

 

출처: https://typescript-kr.github.io/pages/interfaces.html