타입스크립트 기초문법1

타입스크립트 기초문법1

---

📌 초기 세팅

tsc --init
npm -init y

npm i @types/node

 

 

📄  tsconfig.json

{
  // scr 폴더 하위의 모든 .ts 확장 파일
  "include": ["src/**/*.ts"],
  "compilerOptions": {
    "lib": ["ES2021"], 
    // esModuleInterop 속성이 위의 코드 처럼 true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됩니다.
    // e.g. typescript-test.ts => import express from "express"
    "esModuleInterop": true,
    "target": "ES2021",
    "outDir": "dist",
    "strictNullChecks": true
  }
}

"nom" 없어도 에러 발생 안함!

 

tsc

dist-test.js

dist 폴더로 outDirectory 파일 관리

---

📌 ts 빠른 실행

npm i -g ts-node
npm i -D ts-node

명시해주기 위해 -Dev로 한번 더 설치해줌.

 

📌 실행

ts-node src/test.ts

test.js 파일 생성없이 실행 가능!

compile하고 실행시키는 번거로움을 덜어줌.

하지만 

---

원시타입

 

📌 boolean

let isDone: boolean = true;

 

📌 number

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

 

📌 string

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 list1: number[] = [1,2,3];
let list2: Array<number> = [1,2,3];

let list3: string[] = ['안','녕','하','세','요'];
let list4: Array<string> = ['안','녕'];

 

📌 tuple

let x: [string, number];

x = ["hello", 10];

console.log(x[0].substring); // 타입

array	tuple
한 가지 type만 가짐	여러가지 type 가질 수 있음

 

📌 enum

enum Color {Red, Green, Blue}

let c: Color = Color.Green; // c = 1
console.log(c);

아무런 설정이 없으면 0부터 increment

 

enum Color {Red=1, Green, Blue}

let c: Color = Color.Green; // c = 2
console.log(c);

1부터 시작하게 하면 1부터 increment

 

enum Color {Red=1, Green, Blue}

let colorName: string = Color[2]; // Green
console.log(colorName);

 

📌 any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

어떤 기본형 타입을 사용해도 오류 발생하지 않음

 

📌 void

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

 

📌 never

절대 발생할 수 없는 타입

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

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

 

📌 object

원시타입이 아닌 타입

즉, number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지

// | => union 타입 강의 찍을때 교차타입이라고 설명을 잘못했습니다.
function create(o: object | null): void {}

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

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

---

인터페이스

상호 간에 정의한 약속 혹은 규칙을 의미합니다.

• 객체의 스펙(속성과 속성이 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입)
• 배열과 객체를 접근하는 방식
• 클래스

function printLabel(labeledObj: { label: string }) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

↓

interface LabeledValue {
    label: string;
}

function printLabel(labeledObj: LabeledValue) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

문자열 타입이 길어질 수 있음. {label: string, time: number, ...}

그래서 이를 interface로 다시 작성.

 

---

📌 선택적 프로퍼티(Optional Properties)

interface CraftBeer {
    name: string;
    hop?: number;
  }
  
  let myBeer = {
    name: "Saporo",
    // hop: 34,
    // test: "test",
  };
  
  function brewBeer(beer: CraftBeer) {
    console.log(beer.name); // Saporo
    // console.log(beer.hop); // 34
  }
  
  brewBeer(myBeer);

 

속성 끝에 ?를 붙여 옵션 속성을 설정

hop은 넣어줘도 되고 안넣어줘도 됨.

 

 

인터페이스에 선언한 속성값만 있다면, 오류 발생하지 않음.

하지만 myBeer에 name이 없다면 오류가 발생함.

property missing type 에러

---

📌 읽기전용 프로퍼티 (Readonly properties)

값 변경 불가능

객체 안에 속성(Property)만 readonly를 넣어주면 됨.

interface Point {
    readonly x: number;
    readonly y: number;
}

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // 오류!

console.log(p1.x);

readonly	property(속성)
const	variable(변수)

---

📌 함수 타입

interface login {
    (username: string, password: string): boolean;
  }

let loginUser: login;

loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}

---

📌 클래스 타입

클래스의 속성이랑 메소드(클래스 내부 함수) 정의해 줄 수 있다.

interface CraftBeer {
    beerName: string;
    nameBeer(beer: string): void;
    // test: string;
  }
  
  class myBeer implements CraftBeer {
    beerName: string = "Baby Guinness";
    nameBeer(b: string) {
      this.beerName = b;
    }
    constructor() {}
  }

---

📌 인터페이스 확장

interface Person {
    name: string;
  }
  
  interface Developer extends Person {
    skill: string;
  }
  
  let fe = {} as Developer; // Developer 타입이다.
  
  fe.name = 'josh';
  fe.skill = 'TypeScript';

fe는 상속을 받았으므로  Person의 속성 name 사용 가능

 

📌 다중 상속

interface Person {
  name: string;
}

interface Drinker {
  drink: string;
}

interface Developer extends Person, Drinker {
  skill: string;
}

let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';
fe.drink = 'Beer';

다중 상속 가능