javascript는 프로그래밍에 도입된 지 20년이 넘은 가장 광범위한 크로스 플랫폼 언어 중 하나이며, 웹 페이지에 사소한 인터랙티브를 추가하기 위한 스크립트 언어이다. 자바스크립트로 작성된 프로그램의 크기, 범위 및 복잡성은 기하급수적으로 증가했지만, 다른 코드 단위 간의 관계를 표현하는 언어의 능력은 증가하지 않았다. 언어와 프로그램의 복잡성 간의 불일치는 개발을 규모에 맞게 관리하기 어렵게 만들었다.

자바스크립트 예제

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

console.log(area);

// 결과 값: NaN

타입스크립트 예제

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

//  결과 값 : Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?

타입 정의

프로그래머가 쓰는 가장 일반적인 오류는 type 오류이다. typescript의 목적은 자바스크립트 코드가 실행되기 전에 실행되어 프로그램의 타입이 올바른 것을 확인하는 툴이다.

let x : number = 1
let y : string = "Luffy"

type User {
  name: string;
  id: number;
}

const user : User  = {
  name: "Luffy",
  id: 0,
};

type User {
  name: string;
  id: number;
}

function Login (id: User){
	console.log(id)
}

let hero: {
	id: number,
    name: string
} = { id: 1 }

employee.name = 'Luffy'

여러 타입

let user: [number, string, boolean] = [1, "Luffy", true]

function User(id: number || string){
	console.log(id)
}

function sum(x: number, y:number){
	return x + y
}

함수 리턴 타입

void는 결과 값을 반환하지 않는 함수에 설정. 반면 결과 값을 반환하는 함수의 경우 명시적으로 반환 값의 타입을 기술할 수 있다.

let hero: {
	id: number,
    name: string,
    retire: (date: Date) => void
} = { id: 1,
	  name: 'Luffy',
      retire: (date: Date) => {
      console.log(date)
    }
   }