타입스크립트(TypeScipt) 기본

ZeroJun·2022년 6월 16일
0

타입스크립트

목록 보기
1/4

기본 명령어

npm init // 입력 후 계속 엔터
npm install -g typescript // 설치명령어
tsc -w 파일명.ts // 타입스크립트 컴파일러 watch모드
tsc --init // tsconfig.json파일 생성
tsc // tsconfig.json이 있는경우 현재폴더의 모든 ts파일 컴파일
tsc -w // tsconfig.json이 있는경우 현재폴더의 모든 ts파일 watch모드
npm i typescript --save-dev // 타입스크립트를 개발용으로 포함

기본 문법

형식변환법

// 형식변환법
let what;
what = '문자열';

let len1 = (<string>what).length;
let len2 = (what as string).length;

변수선언방법

// 변수선언 방법
var i = 10;
var j: any; // 모든 값
j = "안녕";

var k: number;
//k = "안녕"; // string을 number형으로 변환할 수 없습니다.

var b: boolean = true;
var str: string = "안녕하세요";

var arr: string[] = ["안녕", "잘가"];

가독성을 위한 언더스코어 문자

// 가독성을 위한 언더 스코어 문자
const number = 1_000_000;
console.log(number); // 1000000;

옵셔널

const myFunc(a: number) {
  return a * a;
}
const myFunc = (a: number) => a * a;

function clacultateSum(x: number, y:number, z?:number, ...restNumbers:number[]) : number {
    return 1;
}
// ? : 인자가 들어오지 않아도 된다.
// x,y,z?,restNumbers 인자에 반환 값은 number여야하는 함수다. 반환형은 표기하지 않아도 무방하다.

공용구조체 형식

// 공용 구조체 형식
let twoType: string | number;

twoType = '문자열저장';
twoType = 123;
twoType = [1, 2, 3]; // error

// 형식 별칭 (Type Aliase)
type TechType = "가나다" | "안녕" | "변수";

let 변수: TechType = "가나다";
// let 변수2: TechType = "1"; // error

type PrimitiveType = string | number | boolean;
let pt1: PrimitiveType = Date.now(); // number반환해서 에러표출 안함
// let pt2: PrimitiveType = new Date(); // error

Enum

// Enum (열거형)
enum ConsoleColor {
  Red,
  Green,
  Blue,
}
console.log(ConsoleColor);
// {0: 'Red', 1: 'Green', 2: 'Blue', Red: 0, Green: 1, Blue: 2}

// Enum (열거형)
enum Color {
  Red = 10,
  Green,
  Blue = 20,
}
console.log(Color);
// {10: 'Red', 11: 'Green', 20: 'Blue', Red: 10, Green: 11, Blue: 20}

// Enum (열거형) 활용
const enum Operator {
  ADD,
  DIV,
  MUL,
  SUB,
}

const compute = (op: Operator, a: number, b: number) => {
  switch (op) {
    case Operator.ADD:
      console.log(a + b);
      break;
    case Operator.DIV:
      console.log(a / b);
      break;
    case Operator.MUL:
      console.log(a * b);
      break;
    case Operator.SUB:
      console.log(a - b);
      break;
    default:
      break;
  }
};

compute(Operator.ADD, 2, 3);

정규식

// 정규식으로 특정 문자열 들어있는지 확인
let source = "How are you?";

let regex;

regex = /how/;
console.log(regex.test(source)); // false

regex = /how/i; // i는 대소문자 구분 x
console.log(regex.test(source)); // true

함수 오버로드

function multi(sender: string | number): void {
  switch (typeof sender) {
    case "string":
      console.log(sender);
      break;
    case "number":
      console.log(sender);
      break;
  }
}

multi(123); // 123
multi("가나다"); // 가나다

매서드의 매개변수에 콜백함수 사용

// 매서드의 매개변수에 콜백 펑션 사용
// 콜백함수 (delegate) 동일한 메서드 시그니처를 갖는 메서드의 참조를 담을 수 있는 그릇

const go = () => {
  log("직진");
};

const back = () => {
  log("후진");
};

// 매개변수로 함수를 받아서 실행: 매개 변수로 전달된 메서드 대신 호출
function runnerCall(runner: Function) {
  runner();
}
runnerCall(go);

0개의 댓글