Typescript 기본타입 연습해보기

11828 단어 typescripttypescript

지난시간은 왜써야하는지에 알아봤으니 이제 본격적으로 Typescript에 기본타입에 대해 한번 알아보자.

우선 가장 처음으로는 컴파일 실행법으로는

컴파일 실행법

  • tsc (변환할 파일) * 업데이트 자동으로 업데이트가 안됨, 계속적으로 반영해야한다.
  • tsc 파일명 -w *워치모드 업데이트가되는것도 자동적으로 반영된다.

이런식으로 컴파일을 해주면된다. 생각보다 간단하다.


타입스크립트 기본

우선 데이터 타입에 대해 다시 한번 돌아본다면,

  • *Primitive: number, string, boolen, bigint(더큰 숫자타입할당할수있는), symbol, null, undefined - 원시타입 한가지의 심플한*
  • *Object : function, array - 조금더 복잡한 데이터를 담을수있는*

number

const num: number = 1;

string

const str: string = "hello";

boolean

const boole: boolean = true;

undefined - 값이 있는지 없는지 아직 결정되있지 않은상태,

let undef: undefined;
undef = "hello"; *// error 발생, 따라서 혼자쓰지않는다*

// 이런식으로 사용이 가능하다.
  
let phoneNum: number | undefined;
phoneNum = undefined;
phoneNum = 12;

null - 값이 텅텅 비었다 라는것이 정해진상태

let person: null; *//person에는 null만 할당할수있게된다.
let poerson2: string | null;*

unknown - 어떤 데이터 타입이 올지 모르는 상태 (비추천)*

let notSure: unknown = 0;
  notSure = "nice";
  notSure = true;

any - 어떤 데이터 타입이 올지 모르는 상태 (비추천)*

let anything: any = 0;
  anything = "hello";

void - 아무런것도 리턴하지 않을때, return이 생략되어졌을때

function print(): void {
    console.log("heelo"); //출력
    //return 생략
  }
let unusable: void = undefined; // undefined만 선언가능

never - 리턴할 계획이 없을때, 리턴할수없다.
다시말하면 never 타입은 절대로 발생하지 않는 값의 타입을 나타낸다. Ex) never는 함수표 현식의 리턴 타입, 항상 예외를 던지는 화살표 함수 표현식, 리턴하지 않는 표현식같은 것들.

function throwError(message: string): never {
    //message => server(log)
    throw new Error(message);
    while (true) {}
  }

object - 어떠한 object도 전달이 가능하다 원시타입을 제외한 모든 배열도가능

let obj: object;
  function acceptSomeObject(obj: object) {}
  acceptSomeObject({ name: "ellie" });
  acceptSomeObject({ animal: "dog" });

Object

//js
function jsAdd(num1, num2) {
    return num1 + num2;
  }

//ts
function add(num1: number, num2: number): number {
    return num1 + num2;
  }


//js
function jsFetchNum(id) {
    // code...
    // code...
    // code...
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }

//ts
// fetchNum 이 숫자를 fetch하는 함수고 인자로 string을받아, promise를 리턴하고 promise는 숫자의 데이터를 리턴한다라는것을 쉽게 알수있게된다.
  function fetchNum(id: string): Promise<number> {
    // code...
    // code...
    // code...
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }
}

좋은 웹페이지 즐겨찾기