[TypeScript] TypeScript?

notion에 작성했던 내용을 옮겨 적었습니다.

타입스크립트란?

• 타입스크립트틑 자바스크립트를 기반으로하는 프로그래밍 언어이다.
• 타입스크립트는 프로그래밍 언어면서 도구이기도 하다. 작성한 코드를 실행하면 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러다.
• 자바스크립트 언어에 타입을 추가한다.
• 자바스크립트 언어에 기능을 추가한다.

장점

• 새로운 기능과 장점을 추가하는 언어로 JS 코드를 더 쉽고 강력하게 작성할수 있도록합니다.
• 스크립트가 실행되고 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 개발자가 미리 식별할 수 있는 기회를 제공한다.
• 개발중에 런타임에러로 인해 발생하는 에러를 초기개발과정에서 발견하고 수정할수 있도록 ㄱ추가적인 오류 검사를 제공한다.

단점

• 타입스크립트는 브라우저와 같은 JS 환경에서 실행할 수 없다. 브라우저와 nodejs는 타입스크립트를 실행할 수 없다.

타입스크립트가 일반적인 자바스크립트라면 어떻게 타입스크립트로 새로운 기능을 추가할 수 있는가?

• 새로운 기능들을 자바스크립트 해결책으로 컴파일하는 타입스크립트 컴파일러다.
• 나은 구문과 작업을 보다 쉽게 수행할 수 있게해준다.
• 복잡한 자바스크립트 스니펫으로 더 멋지고 쉬운 방법으로 컴파일 할 수 있게 해준다.
• 자바스크립트에서 불가능 한것을 사용할 수는 없다.

공식 사이트

JavaScript With Syntax For Types.

다운로드

npm install -g typescript

타입스크립트 컴파일

수동 컴파일

tsc 타입스크립트 파일명

자동 컴파일 (로컬 서버실행)

# package.json 생성
npm init

# lite-server 설치
npm install --save-dev lite-server

# package.json 파일
{
  "name": "9",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
		# 추가
    "start": "lite-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.6.1"
  }
}

# 실행
npm run start

타입스크립트 사용

• 요소를 얻을 때, 뒤에 !(느낌표)를 추가해주면 요소를 얻는 다는 것을 타입스크립트에 알릴 수 있다.
  • null을 받아오지 않을 것을 알려주는 것이다.
• 항상 input 요소이기 때문에 형 변환이라는 as HTMLInputElement로 사용할 수 있다.
  • 타입스크립트에 이것이 어떤 유형의 요소인지를 알려주기 위함이다.
• 타입지정
  • 변수명 뒤에 콜론을 붙인뒤 타입을 명시한다.

const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")!;

function add(num1: number, num2: number) {
  return num1 + num2;
}

 

참고자료

Udemy - 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS

타입스크립트 핸드북