스파르타코딩클럽 내일배움캠프 TIL57

Typescript

• Typescript는 자바스크립트에 타입을 부여한 언어이다.
• Javascript의 확장판으로 볼 수 있다.
• Typescript를 사용하는 이유는 타입을 부여하여 실수를 줄이기 위해서이다.

설치방법

터미널에서 npm install -g typescript 입력

Time

• Typescript는 변수의 타입이 컴파일타임에 결정된다.
• Javascript는 변수의 타입이 런타임에 결정된다.
• 컴파일타임? 런타임?
  • 컴파일 타임 : 작성한 소스코드가 어떠한 것(js, binary 등)으로 변환되는 과정
  • 런타임 : 프로그램이 실행되는 과정

사용방법

: 속성 입력

// 예제 코드

const plus = (a:number, b:number) => a + b
console.log(3, 5)

---

기본 Type

• String
  • TypeScript에서는 텍스트 데이터 타입을 string으로 표현한다.

let str: string = 'TypeScript';

str = 123; // Error
str = true; // Error
str = undefined; // Error

let fullName: string = `NBC`;
let age: number = 10;
let sentence: string = `my name is ${fullName}. I'm ${age + 1} years old`;

• Number
  • TypeScript는 js와 마찬가지로 10진수, 16진수 표현을 지원하고 ECMAscript 2015에서 소개된 2진수, 8진수 표현도 지원한다.

let num: number = 123;

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

• Boolean
  • 참/거짓을 의미하는 boolean 이다.

let isTrue: boolean = true;
let isFalse: boolean = false;

• Array
  • TypeScript는 어떤 변수가 배열임을 명시적으로 선언할 수 있다.

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

let arr2: string[] = ['1', '2', '3'];
let arr3: boolean[] = [true, false, true];

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

let x: [string, number];
x = ['hi', 1];
x = [1, 'hi']; // Error
console.log(x[0], x[1]);
console.log(x[2]); // Error

x[2] = 'world'; // Error

let tuple: [string, number, boolean] = ['str', 1, false];

• Any
  • 자바스크립트의 변수는 다 any 다!

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

• Void
  • 함수에서 반환 값이 없는 경우

function c(): void {
  console.log('c');
}

• Null & Undefined

// 아래 코드를 제외하고 이 변수들에 할당할 수 있는 값이 없습니다!
let a: null = null;
let b: undefined = undefined;

let unionType: number | null = null;

• Never
  • 비정상적 종료가 되거나 함수가 끝까지 실행되지 않을 때 (거의 사용 X)

function a (): Never {
  throw new Error("Error");
}

---

함수 Type

• TS 함수 기본 문법

function add(n1: number, n2: number): number {
	return n1 + n2;
}

const a = add(1, 2);
const b = add('1', 2); // Error
const c = add(10, 20, 30); // Error
const d = add(10); // Error

• 반환 값이 없는 함수

function printResult(num: number): void {
	console.log(num);
}

printResult(5);

• Optional Parameter

// JS
function add2(n1, n2) {
  if (!n2) return n1;
  return n1 + n2;
}

// TS
function add2(n1: number, n2?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30); // Error
const c2 = add2(10);

// n1에 옵션을 줬기 때문에 불가 가능하려면 위에 코드처럼 사용해야 함
function add2(n1?: number, n2: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

function add2(n1: number, n2?: number, n3?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

• Default Parameter

function add3(n1: number, n2: number = 0): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a3 = add3(1, 2);
const c3 = add3(10);

• Rest Parameter

function add4(n1: number, ...nums: number[]): number {
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return n1 + totalOfNums;
}

const result = add4(10, 20, 30, 40); // n1 = 10, ...nums = [20, 30, 40]