[TypeScript] TypeScript란? (1/2)

타입스크립트란?

공식 문서에 따르면 javascript에 typescript 구문을 추가함으로서 에디터의 성능을 향상시켜주는 도구 정도 되겠다.

 

다른 언어를 손 대 본 사람이라면 금방 알겠지만 javascript의 가장 큰 단점이 타입에 대해 엄격하지 않다는 것이다. javascript를 배우기 전에 c언어에 발가락만 살짝 담궈봤던 나도 느낄 정도로 javascript는 타입에 관대하다. 예를 들면 javascript는 string 더하기 number 같은것도 해준다('abc' + 10 => 'abc10'). 그리고 값이 string이었던 변수에 number를 재할당 할 수도 있다.

 

기억이 많이 사라졌지만 c언어에서는 사용할 값의 자료형에 맞게 변수를 선언해줬어야 했다 (int num =1, char str = 'hello'). 심지어 값의 메모리 사이즈까지 고려해서 짜줬어야 했던...(절레) 아무튼 javascript는 타입에 관대하기 때문에 처음 배울땐 편하지만 프로젝트 사이즈가 커질수록 오히려 느슨함이 문제가 된다. 이러한 문제를 해결하기 위해 나온 것이 typescript고, javascript의 타입을 엄격하게 관리해주기 때문에 공식 문서 말대로 '초기에 오류를 포착' 할 수 있게 된다.

 

 

설치

1. 작업할 폴더 만든 후 npm init -y로 package.json 파일을 만들어 npm을 사용할 수 있도록 한다.

2. 아래 코드로 설치

npm install typescript --save-dev

3. 루트 디렉토리에 tsconfig.json 파일 생성 (ts파일을 js파일로 컴파일 할 때 필요한 내용 보관용)

 

4. 아래 코드 복붙(아래 코드는 내가 공부중인 코드스테이츠에서 권장하는 사항이고 개인에 맞게 커스텀 가능)

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

tsconfig.json 파일에 대한 공식문서 참고.

 

5. src 폴더 아래 index.ts 파일 만들어 타입스크립트 코드 작성.

 

 

기본 문법

대부분 javascript와 같고, type을 명시해줘야 한다.

//ex

let num :number = 10;
let str :string = 'hello';
let a :boolean = true;
//변수명 뒤에 타입 명시

//array

let items :string[] = ["apple", "banana", "grape"]; 
//[]는 배열, []앞의 string은 배열 안에 들어갈 자료의 타입을 뜻 함

let numberList: Array<number> = [4, 7, 100];
//제네릭 방식

//object

let user :{name: string, age: number} = {
	name: "Lee",
	age: 15
}
//object랑 같은 형태로 값 부분만 type으로 바꿔 할당

type a = {name: string, age: number};
let user :a = {
	name: "Lee",
	age: 15
}
//변수로 따로 선언할 수 있음

//function

function add(n1 :number, n2 :number):number {
	return n1 * n2;
}
add(10, 3);
//파라미터에 type 할당, return되는 요소의 type은 괄호 뒤에 할당

function add(n1 :number, n2 :number):void {
	console.log(n1 * n2);
}
add(10, 3);
//함수의 내용물이 console.log같은 함수이거나, return이 없을 땐 void 할당

//매개변수의 개수와 전달인자의 개수가 일치해야 함

 

유니온과 인터섹션

let obj:{ u : number | string | boolean } = { u : 'union' }
//참고: 유니온 - 받아올 타입이 여러개일때 이런 식으로 사용 가능
//이 때 u는 number 아니고 number | string | boolean.
//필요하면 if문과 typeof()써서 구분.

//유니온, 인터섹션 특징
type a = { name : string, age : number }
type b = { name : string, birth : number }

//union
function askSomeone(person: a | b) {
	console.log(person.name); //가능(o)
    console.log(person.age); //불가능(x)
    console.log(person.birth); //불가능(x)
}
//intersection
function askSomeone(person: a & b) {
	console.log(person.name); //가능(o)
    console.log(person.age); //가능(o)
    console.log(person.birth); //가능(o)
}
//union의 경우 겹치는 것만, intersection은 전체 접근 가능

 

---

참고자료

• 코드스테이츠 교육 자료
• https://www.typescriptlang.org/
• https://www.typescriptlang.org/docs/handbook/tsconfig-json.html