타입스크립트 문법 기초

변수 타입

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• Void
• Null
• Undefined
• Never

변수 문법

//자바스크립트
var str = 'hello';

//타입스크립트
var str: string = 'hello';

//배열 선언
var numbers: number[] = [1, 2, 3];

//제네릭 사용
var arr: Array<string> = ['hello', 'world'];

//타입스크립트 튜플
//각 인덱스 별 타입을 지정한 배열
var address: [string, number] = ['seoul', 10];

//타입스크립트 객체
var obj: object = {
  //값 유형 제한 없음
};
var person: {name: string, age: number} = {
  name: 'kim',
  age: 10
}

함수 문법

//파라미터와 리턴 타입 정의
function sum1(a: number, b: number): number {
  return a + b;
}

//옵셔널 파라미터와 기본 값
function sum2(a: number, b?: number = 0): number {
  return a + b;
}

인터페이스 문법

//기본 문법
interface User {
  name: string;
  age: number;
}

var kim: User = {
  //age를 정의하지 않아 오류 발생
  //옵셔널 설정을 하면 오류 발생하지 않음
  name: 'kim',
}

//함수 인터페이스 정의
interface SumFunc {
  (a: number, b: number): number;
}

var sum1: SumFunc = function (a: number, b: number): number {
  return a + b;
};

var sum2: SumFunc = (a: number, b: number): number => {
  return a + b;
};

//인터페이스 인덱싱
interface StringArray {
  [index: number]: string;
}

var stringArr: StringArray = ['a', 'b', 'c'];
arr[0] = 10; //타입 오류 발생

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

var regExpArr: RegExpArray = {
  cssFile: '*.css', //정규식이 아니므로 오류 발생
  jsFile: /\.js$/,
};
regExpArr['javaFile'] = /\.java$/

//인터페이스 상속
interface Person {
  name: string;
  age: number;
}

interface Developer extends Person {
  language: string;
}

var kim: Developer = { //Person에서 정의된 name, age 항목에 대해서도 정의 필요
  language: 'Typescript',
};

파라미터 문법

interface Developer {
  name: string;
  skill: string;
}

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

//Union Type
function someFunction1(worker: Developer | Person) {
  //함수 호출 시 전달한 변수에 대해서만 접근 가능
  worker.name; //공통 요소는 자유 접근 가능
  worker.age; //특정 인터페이스(타입)에만 정의된 속성은 타입 체크 후 접근 가능
}

//Intersection Type
function someFunction2(worker: Developer & Person) {
  //함수에 선언된 파라미터 종류의 모든 변수에 접근 가능
  //별도의 인터페이스(타입)를 정의하는 방식
  worker.name;
  worker.age;
  worker.skill;
}

클래스 문법

//ES5
function Person(name, age) {
  this.name = name;
  this.age = age;
}
const kim = new Person('kim', 10);

//ES6 + Typescript
class Person {
  name: string;
  age: number;
  
  constructor() {
    this.name = ''
    this.age = 0
  }
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const kim = new Person('kim', 10);

//클래스 변수 상속
var user = {name: 'kim', age: 10};
var admin = {};
admin.__proto__ = user; //user에 설정된 변수와 값을 그대로 상속 받음