공부공부/TS

[typescript 핸드북] 01. 기본타입

고생쨩 2024. 2. 19. 09:14
728x90

typescript 핸드북 학습내용 정리
https://typescript-kr.github.io/pages/the-handbook.html

기본타입

불리언 (Boolean)

참/거짓(true/false)

let isDone: boolean = false;

숫자 (Number)

모든 숫자는 부동 소수 값임.

let decimal: number = 6; // 10진수
let hex: number = 0xf00d; // 16진수
let binary: number = 0b1010; //2진수
let octal: number = 0o744; // 8진수

문자열 (String)

let color: string = "blue";
color = 'red';

템플릿 문자열

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

배열 (Array)

배열 요소들을 나타내는 타입 뒤에 []를 쓰는 방법

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

제네릭 배열 타입을 쓰는 방법. Array<elemType>:

let list: Array<number> = [1, 2, 3];

튜플 (Tuple)

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있음.
단 요소들의 타입이 모두 같을 필요는 없음.

number, string 이 쌍으로 있는 값을 나타내기

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

정해진 인덱스에 위치한 요소에 접근하면 해당 타입이 나타납니다.

console.log(x[0].substring(1)); // 성공
console.log(x[1].substring(1)); // 오류, 'number'에는 'substring' 이 없습니다.

정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면, 오류가 발생하며 실패합니다.

x[3] = "world"; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다.

console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.

열거 (Enum)

enum의 값은 문자열로 쓰자.
참고 : https://techblog.woowahan.com/9804/

enum Color {
    Red = 'F00',
    Green = '0F0', 
    Blue = '00F'}

Any

쓰지말자

Unknown

any 타입의 값은 어느 타입의 변수에도 할당될 수 있으나, unknown 타입의 값은 any와 unknown 타입을 제외한 타입의 변수에는 할당이 불가능하다.

let notSure: unknown;
notSure = 1;
notSure = "maybe a string instead";

// any type에는 unknown 타입 할당 가능
let anyType: any;
anyType = notSure;

// any, unknown 이외의 type에는 unknown 타입 할당 불가능
let numberType: number;
numberType = notSure; // compile error!

unknown을 사용해야 할 상황

들어오는 값의 타입을 모를때

const isNil = (param: unknown): boolean => param === null || param === undefined

여러 타입을 받아서 처리하는 경우

function prettyPrint(x: unknown): string {
  if (Array.isArray(x)) {
    return "[" + x.map(prettyPrint).join(", ") + "]"
  }
  if (typeof x === "string") {
    return `"${x}"`
  }
  if (typeof x === "number") {
    return String(x)
  } 
  return "etc."
}

Void

함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰임

function warnUser(): void {
    console.log("This is my warning message");
}

void를 타입 변수를 선언하는 것은 유용하지 않은데, 왜냐하면 그 변수에는 null 또는 undefined 만 할당할 수 있기 때문

let unusable: void = undefined;
unusable = null; // 성공  `--strictNullChecks` 을 사용하지 않을때만

Null and Undefined

TypeScript는 undefined 과 null 둘 다 각각 자신의 타입 이름으로 undefined , null로 사용함

// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;
  • 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미함.

  • –strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다) 이건 많은 일반적인 에러를 방지하는 데 도움을 줍니다.

    이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있음.

    🤔 기본적으로 쓴다 생각해야할듯

Never

  • never 타입은 절대 발생할 수 없는 타입임.
  • 예를 들어, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰임.
  • 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있음.

never타입은 모든 타입에 할당 가능한 하위 타입입니다. 하지만 어떤 타입도 never에 할당할 수 있거나, 하위 타입이 아닙니다.(never 자신은 제외) 심지어 any 도 never에 할당할 수 없습니다.

//never를 반환하는 몇 가지 예제

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

객체 (Object)

  • object는 원시 타입이 아닌 타입.
  • 예를 들어, number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미합니다.
  • object 타입을 쓰면, Object.create 같은 API 가 더 잘 나타남
declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

타입 단언 (Type assertions)

  • “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은 jsx랑 호환안됨. 왠만하면 as를 쓰셈.

let에 관하여

var말고 let 쓰셈 😲

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.