Skip to content

Latest commit

 

History

History
257 lines (175 loc) · 4.44 KB

220715.md

File metadata and controls

257 lines (175 loc) · 4.44 KB
Raw

TypeScript 기초

기본 타입

문자열, 숫자, 진위값

const str: string = 'hello';
const num: number = 10;
const show: boolean = true;

배열

const arr: Array<number> = [1, 2, 3];
const heroes: Array<string> = ['Capt', 'Thor', 'Hulk'];

const items: number[] = [1, 2, 3];

  • 대문자 Array를 사용하고, 각괄호 안에 내부 요소들의 type을 지정

  • literal 방식으로 [] 자체가 Array를 의미

  • 내부 요소의 type을 [] 앞에 표시


튜플

튜플: 배열의 특정 인덱스의 타입을 명시

모든 인덱스의 type이 각각 정의

const address: [string, number] = ['gangnam', 100];

객체

const obj: object = {};

const person: {name: string, age: number} = {
  name: 'thor',
  age: 1000,
};
  • Array와 달리 object 소문자로 type 정의
  • 객체 내부의 특정 속성의 type을 지정 가능

함수 타입

params와 return값의 type 정의

function sum(a: number, b: number): number {
  return a + b;
}
  • return 값의 type 명시가 된다면 return의 type 뿐만 아니라 return의 유무도 확인
  • return이 없다면 오류 발생

반환값이 없는 함수인 경우

function log(): void {
  console.log('hello');
}
  • return type을 void로 둔다.

params의 엄격한 제한

JS의 경우 params의 인자 개수에 대한 유연함이 존재

function sum(a, b) {
  return a + b;
}

sum(10, 20, 30, 40, 50) // 30

TS로 params의 type이 정의되면 이런 유연함을 불허

function sum(a: number, b: number): number {
  return a + b;
}

sum(10, 20, 30, 40); // 2개의 인수가 필요한데 4개를 가져왔습니다.

30, 40 인자에 대해 오류 발생


optional parameter

여러 params를 쓸 때도 있고, 안 쓸 때도 있는 경우에 사용

인자의 type을 미리 정의한 후, 필요한 경우 인자 생략을 허용

function log(a: string, b?: string): string {
  
}

log('hello world');
log('hello ts', 'abc');
  • '?'를 params 옆에 바로 붙여 표시
  • 만약 해당 param이 있다면 type은 ~~라는 의미

인터페이스

인터페이스의 목적

object의 속성들의 구체적인 type(스펙)의 반복 제거

  • 앞에서 object의 스펙이 복잡하면 복잡할수록 코드가 지저분해진다.
  • 반복이 많으면 많을수록 더 곤란
  • 때문에 한 번만 정의하고, 이를 가져다 쓰는 방식
  • 깔끔한 코드 및 유지보수, 협업에 유리

변수 정의

interface User {
  age: number;
  name: string;
}

const seho: User = {
  age: 33,
  name: '세호'
}

함수 인자 정의

function getUser(user: User): void {
  console.log(user);
}
getUser(seho);

함수 구조 정의

함수 스펙(구조)에 인터페이스 활용

interface SumFunction {
  (a: number, b: number): number;
}

let sum: SumFunction;
sum = function(a, b) {
  return a + b;
}
  • 함수 인자나 return 값의 type을 interface에 미리 정의
  • 함수 선언에서 interface를 지정
  • 인자의 수가 적고 구조가 간단한 경우 interface보다는 인자에 바로 지정하는 것을 권장

인덱싱 방식 정의

interface StringArray {
  [index: number]: string;
}

const arr: StringArray = ['a', 'b', 'c'];
arr[0]; // 'a'
  • 인덱스에 숫자 type만 입력하도록 제한
  • 인덱싱으로 뽑힌 결과는 문자 type이어야 한다는 의미

인터페이스 딕셔너리 패턴

interface StringRegexDictionary {
  [key: string]: RegExp;
}

const obj: StringRegexDictionary = {
  // sth: /abc/,
  cssFile: /\.css$/, // css 확장자를 가지는 모든 파일을 들고오는 정규표현식
  jsFile: /\.js$/,
}
  • RegExp: Regex Expression(정규 표현식)의 약자
  • 딕셔너리에서 key의 type은 string, value의 type은 RegExp가 되도록 제한하는 인터페이스

인터페이스 확장(상속)

interface Person {
  name: string;
  age: number;
}

// interface Developer {
//   name: string;
//   age: number;
//   language: string;
// }

interface Developer extends Person {
  language: string;
}

const capt: Developer = {
  name: '캡틴',
  age: 100,
  language: '타입스크립트'
}
  • interface 자식인터페이스 extends 부모인터페이스로 인터페이스 상속