[Typescript]타입스크립트 기본 문법 정리

변수 선언

해당 변수의 값의 타입을 명시하기 위해 타입 주석을 붙여 변수를 선언한다.
변하는 값은 let, 변하지 않는 값은 const로 선언하며 const는 변수 선언 시 반드시 초깃값을 같이 선언해야한다.

 const 변수명: 타입 = 초깃값
 let 변수명: 타입

 //예시
 const name: string = 'amy'
 let price: number 
 let isError: boolean = true

대표적인 타입은 총 4가지가 있으며, 타입과 무관하게 값을 저장할 수 있게 할 때는 any로 표기할 수 있다. (자바스크립트와의 호환을 위한 타입)

유형	타입	타입 예시
수	number	1,2,10,-500 등
불리언	boolean	true, false
문자열	string	'tree', 'Emma' 등
객체	object	{shape: 'circle', color: 'blue'} 등 인터페이스나 클래스가 포함됨
타입무관	any	'john', 100, true 등
undefined	undefined	undefined만 포함됨

자바스크립트와 달리 타입스크립트에서는 타입 표기시 전부 소문자로 표기한다. (예: String (X) / string (O))

타입 추론

다만, 자바스크립트와 호환성을 위해 타입 주석은 생략이 가능하며, 대입된 오른쪽 값에 따라 변수 타입이 자동으로 지정된다. 이걸 타입추론이라고 부른다.

 let n = 1 // n의 타입을 number로 추론
 let isDraw = true // isDraw의 타입을 boolean으로 추론

타입 단언(type assertion)

특정 타입의 변수 값을 다른 타입의 값으로 변환하는 기능.

(<타입>객체)
(객체 as 타입)

예시

interface Pens {
    color: string,
    thickness: number
}
let pen: object = {color: 'black', thickness: 0.5}

const pen1 = pen.color //오류 발생
const per2 = (<Pens>pen).color // pen2 = 'black' 
const pen3 = (pen as Pens).thickness // pen3 = 0.5

인터페이스

여러가지 타입을 가지는 프로퍼티로 이루어져있는, 사용자가 새로운 타입을 정의한 것이라고 보면 된다.
클래스와 유사하지만 직접 인스턴스를 생성할 수 없고, 추상 메소드만을 가진다.

interface 인터페이스명 {
  필수 속성 이름: 속성 타입, //무조건 있어야 하는 타입
  선택 속성 이름?: 속성 타입 //있어도 되고 없어도 되는 타입
}

예시(필수 속성만 있는 인터페이스)

//인터페이스 선언 
interface Fruits{
  name: string,
  quantity: number
}

//인터페이스 사용 
const redFruit: Fruits = {name:'apple', quantity: 10}

//인터페이스 사용 오류 
const blueFruit: Fruits = {name: blueberry} //quantity 속성이 없음 
const yellowFruit: Fruits = {name: lemon, quantity: 5, size: 'big'} //선언된 적 없는 속성(size)이 있음

예시2 (선택 속성도 있는 인터페이스)

interface Fruits2{
  name: string,
  quantity: number
  size?: string
}
//인터페이스 사용 
const yellowFruit: Fruits2 = {name:'apple', quantity: 10} //선택 속성 미사용(오류 아님)
const yellowFruit: Fruits2 = {name: lemon, quantity: 5, size: 'big'} //선택 속성 사용

익명 인터페이스

interface 키워드 없음
인터페이스 이름 없음
주로 함수를 구현할 때 사용한다.

예시

let person: { name: string age: number } = {name: 'Josh', age: 30}

클래스

자바스크립트 ES6에서 지원하는 그 기능. 타입스크립트에서는 확장 기능을 가진다.

class 클래스명{
  [접근 제한자] 필수속성명: 속성타입,
  [접근 제한자] 선택속성명?: 속성타입 //?붙이면 있어도 되고 없어도 되는 선택타입이 됨 
  //접근 제한자는 public, private, protected 중 하나. 생략 시 public
}
//클래스로 인터페이스 구현 시
class 클래스명 implements 인터페이스명 {
  //내부에 인터페이스가 정의하는 속성을 멤버 속성으로 포함 
}

생성자 constructor

익명 클래스

abstract 키워드를 붙여 추상 클래스를 만들 수 있음.

클래스 상속

class 상속 클래스 extends 부모 클래스  {
 //부모 클래스의 멤버 속성을 포함
}

static 클래스

class 클래스명 {
  static 정적 속성명: 속성 타입
}

함수

자바스크립트와 달리 매개변수와 반환값의 타입을 표기한다. 반환값이 없으면 void로 표기한다.

function 함수명(매개변수: 타입): 반환값 타입 {
    함수 내용
}

예시

function addNumber(a: number, b: number): number {
    return a + b
}
//반환값이 없는 함수
function consolePrint(name: string, city: string): void {
    console.log(`I am ${name} from ${city}`)
}

함수 시그니쳐

변수에 타입이 있는 것처럼, 함수의 타입을 함수 시그니쳐라고 부른다.

(매개변수 타입, 또다른 매개변수 타입... ) => 반환값 타입

예를 들면 위의 consolePrint 함수의 함수 시그니쳐는 이렇다.

(string, string) => void

개발공부 log