⭐세 가지의 자바스크립트
자바스크립트 종류에는 세 가지가 존재합니다.
ES5: 표준 자바스크립트ESNext: ES6 이후 버전을 통틀어 가리킴typescript: 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어
⭐타입스크립트를 사용하는 이유
자바스크립트는 코드에 명시적으로 타입을 정의할 수 없어서
다른 사람이 작성한 코드를 어떻게 사용해야 하는지, 파악하기도 쉽지 않습니다.
요즘 소프트웨어는 대부분 많은 사람들이 투입되어서 개발이 됩니다.
이런 경우에는 개발자들 사이에 소통이 정말 중요합니다.
function makePerson(name, age) {}위와 같은 코드를 작성이 되어있고,
makePerson(32, hyeonsu);위와 같이 실행했을 때 오류가 발생한다면 원인을 찾기가 어렵습니다.
function makePerson(name: string, age: number) {}하지만 위와 같이 타입이 명시가 되어있다면 쉽게 오류를 발견할 수 있고, 쉽게 추적이 가능합니다.
대규모의 개발이 진행되고 있고 많은 사람이 개발에 참여하고 있다면 더욱더 이런 문제는 많아질 것입니다.
협업과 소통의 효율을 높여주는 이러한 언어를 사용하지 않을 이유가 없죠.
트랜스파일러, 컴파일러
ESNext 자바스크립트 소스코드는 Babel 이라는 transpiler (트랜스파일러) 를 통해서 ES5 자바스크립트 코드로 변환됩니다.
트랜스파일러는 어떤 프로그래밍 언어로 작성된 소스코드를 다른 소스코드로 변환시켜주는 프로그램을 의미합니다.
소스코드를 바이너리코드로 변환시켜주는 compiler(컴파일러)와는 다른 느낌이지만,
"무언가를 또 다른 무엇으로 바꿔준다"는 관점에서는 비슷하므로, 둘을 구분하지 않는 경향이 있다고 합니다.
⭐ESNext 주요 문법
타입스크립는 대부분 ES6 이후의 문법을 지원하기 때문에
타입스크립트를 잘 다루려면 우선 ES6 이후의 문법을 잘 알아야 하고,
타입스크립트만 사용할 수 있는 고유의 문법이 있습니다. 우선은 ESNext(ES6 이후)의 문법부터 봅시다.
- 비구조화 할당
let person = {name: "Hyeonsu", age: 22};
let { name, age } = person; // name = "Hyeonsu", age = 22- 화살표 함수
// 일반 함수
function sayHello(name: string) {
console.log(`Hello ${name}`);
}
// 화살표 함수
const sayHello = (name: string) => {
console.log(`Hello ${name}`);
}
sayHello("hyeonsu") // "Hello hyeonsu"- 클래스
// 캡슐화
abstract class Person {
constructor(public name?: string, public age?: number) { }
abstract work(): string
}
// 상속
class Programmer extends Person {
// 다형성
work() {return '개발'}
}
class Designer extends Person {
work() {return 'UI/UX 디자인'}
}
let people: Person[] = [new Programmer('현수', 17), new Designer('충환', 20)]
let works = people.map(person => a.work()) // ["개발", "UI/UX 디자인"]
```
4. 모듈
```jsx
// file 1
export function add(one: number, two: number);
// file 2
import { add as addFun } from file1 // file2에서는 addFun으로 사용가능
or
import { add } from file1 // add로 사용가능- 생성기
function* gen() {
yield* [1,2]
}
for(let value of gen()) {console.log(value)} // 1, 2- Promise & async / await
async function getNumber() {
let numbers = []
numbers.push(await Promise.resolve(1))
numbers.push(await Promise.resolve(2))
numbers.push(await Promise.resolve(3))
return numbers
}
getNumbers.then(numbers => console.log(numbers)) // [1,2,3]⭐타입스크립트 고유의 주요 문법
- 타입 주석과 타입 추론
// 타입 주석
let m: number = 24;
// 타입 추론 (자바스크립트 코드와 호환성을 보장하는 큰 역할을 한다.)
let n = 2; // 2를 보고 number라고 추론을 함. - 인터페이스
interface Person {
name: string
age?: number
}
let person: Person = {name: "hyeonsu"}- 튜플
// 배열 (하나의 타입만 존재)
let numbers: number[] = [1,2,3]
// 튜플 (여러가지 타입이 존재)
let tuple: [boolean, number, string] = [true, 1, "튜플"]- 제네릭
// 다양한 타입을 한꺼번에 취급할 수 있도록 해줌
class Something<T> {
constructor(public value: T) { }
}
let numberSomething: Something<number> = new Something<number>(1)
let stringSomething: Something<string> = new Something<string>('제네릭')- 대수 타입 (추상 데이터 타입)
type NumberOrString = number |string // 합집합 타입
type PersonAndAnimal = Person &Animal // 교집합 타입⭐타입스크립트 개발 환경 만들기 (Mac 0S 기준)
✅ 비쥬얼 스튜디오 코드 (VSCode) 설치
https://code.visualstudio.com/
✅ Node.js 설치
✅ 구글 크롬 브라우저 설치
https://www.google.com/intl/ko/chrome/
✅ 타입스크립트 컴파일러 설치
터미널에서 아래 명령어를 입력해서
npm i -g typescripttypescript를 global하게 설치합니다.
tsc -v출력 예시 : Version 4.1.2 (타입스크립트의 버전이 떴다면 정상적으로 설치완료)
✅ 타입스크립트 파일 생성
리눅스 계열 OS에서는 touch 프로그램이 기본적으로 설치가 되어있습니다.
맥OS도 리눅스 계열이므로 touch 명령어를 사용할 수 있습니다.
touch hello.tshello.ts 파일을 만드는 명령어 입니다.
타입스크립트 파일의 확장자는 .ts 입니다.
// hello.ts
console.log("hello")간단한 로그를 찍어주는 코드를 작성해 봅시다.
✅ 타입스크립트 컴파일
tsc hello.ts위의 명령을 입력하고 나면 해당 폴더에 hello.js 라는 이름으로 자바스크립트 파일이 생성됩니다.
트랜스파일러에 의해서 타입스크립트 → 자바스크립트 코드로 변환이 되는 것입니다.
✅ 컴파일 된 자바스크립트 파일 실행
node hello.js자바스크립트로 변환된 파일을 실행시켜 봅시다.
위의 사진과 동일하게 실행됐다면 성공적으로 실행이 된 것입니다.
✅ ts-node 설치
tsc 명령어는 타입스크립트 코드를 ES5 형식의 자바스크립트 코드로 변환시켜 줄 뿐, 코드를 실행하진 않습니다.
일일이 tsc 명령어로 타입스크립트 → 자바스크립트로 변환하고,
그 자바스크립트 파일을 실행시키는 과정을 계속 반복할 수 없습니다.
ts-node 프로그램을 이용하면 변환과 실행을 동시에 시켜줍니다.
npm i -g ts-node
ts-node -v그리고
// hello.ts
console.log("Hello World");위와 같이 문구를 바꾸고, ts-node 명령어로 실행시켜봅시다.
정상적으로 작동합니다!
