[포스코x코딩온] TypeScript 기초

TypeScript

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

• JavaScript의 기본 문법에 자료형 체크하는 기능을 추가한 것
• JavaScript가 자의적으로 type 해석을 하고 코드를 실행시켰을 때, 의도와 다른 방식으로 쓰이지 않도록 방지
• 정적 파일 언어 -> 실행하지 않고도 코드 상의 에러를 알려준다.(실시간 디버깅을 한다.)

---

※JavaScript의 자료형

• number
• string
• boolean
• array
• object
• null
• undefined

---

TypeScript는 변수나 함수를 만들어 줄 때 타입까지 명시해서 선언한다.

let a: number = 1;
const b: string = "티스토리";
let c: object={
	name: "Dongho",
    friends: null,
};

---

TypeScript 사용하기

• 웹 브라우저는 ts 파일을 읽을 수 없기 때문에 ts -> js의 변환 과정이 필요하다.
• TypeScript 설치

npm install typescript

• Version 확인

tsc -v

• tsconfig 파일 생성

tsc --init

• ts 파일을 만들고 js로 변환하고 싶을 때

tsc 파일이름.js

※ 실제 사용은 변환된 js 파일을 사용하면 된다.(node 파일이름.js)

---

변환 + 실행 자동화

• ts-node 모듈 설치
  • package.json에 ts-node 모듈이 잘 설치되어 있는지 확인하기

npm install ts-node

• 실행

ts-node 파일이름.ts

※ ts 파일을 일일이 변환하고 js 파일을 실행 안시켜도 된다.

---

JavaScript에는 없는 type(TypeScript)

• Tuple
• Enum
• never
• void
• any

Tuple

• JS에서의 배열과 같다.
• 순서와 개수가 정해져 있는 배열(요소의 길이와 타입 고정)
• 일반 배열과 다른 점은 배열의 각각의 타입에 모두 type을 지정해줘야 한다.
• 순서와 규칙이 있는 배열이 있다면 Tuple을 이용한다.

// 튜플 타입 선언
let drink: [string, number];
//배열 요소에 개별적으로 type 선언

//튜플 초기화
drink = ["cola",1];

//Readnoly을 사용하면 읽기만 가능한 data type이 된다.
let drink2: readonly[string, number] = ["cola", 2500];

Enum(열거형)

• 숫자 열거형과 문자 열거형
• 값들에 미리 이름을 정의하고 사용하는 타입
• 문자열이나 숫자에 미리 의미를 지정해 두고 그룹화할 수 있는 속성
  • Enum으로 정의된 타입Auth, Cake(그룹)
  • Auth에 정의된 0,1,2를 사용할 때는 점 접근으로 사용할 수 있다.(Auth.admin / Auth.user / Auth.guest)
• JavaScript의 오브젝트와 유사하지만 선언 이후로는 내용을 추가하거나 삭제할 수 없다.
• enum의 value로는 문자열 혹은 숫자만 허용한다.
• 값을 넣지 않고 선언한다면 숫자형 Enum으로 가장 위의 요소부터 0으로 할당돼서 1씩 늘어난다.

//회원 권한을 enum으로 정의
enum Auth{
    admin = 0, //관리자를 0으로 표현
    user = 1, //회원은 1로 표현
    guest = 2 //게스트는 2로 표현
}

//Auth.admin( ==0)으로 의미있게 값 체크
if(userType !== Auth.admin){
	alert("관리자 권한이 없다.");
}

enum Cake{
    choco,
    vanilla,
    strawberry,
}

console.log(Cake.choco); //0
console.log(Cake.vanilla); //1
console.log(Cake.strawberry); //2

any(어떤 타입이든)

• 어떤 타입이든 상관없이 사용할 수 있다.
• 빈 배열을 먼저 선언하고 싶을 때
• 받아오는 데이터 타입이 확실하지 않을 때

let val: any;

※ 사용을 지양하는 걸 추천(any를 많이 사용하면 TS를 사용하는 의미가 없다.)

---

Type을 지정하는 방법

interface

• 여러 오브젝트의 타입을 정의하는 규칙
• 오브젝트를 선언할 때, :object로 사용하는 것이 아닌 :interface로 만든 type을 지정해 주면 내부에 있는 key의 type까지 지정할 수 있다.

interface Student{
    name: string;
    grade: number;
    isPassed: boolean;
}

const student1:Student={
    name: 'jh',
    grade:2,
    isPassed: false,
}

type

• interface와 마찬가지로 사용자 정의 타입을 만들어줌
• 오브젝트뿐만 아니라 문자열이나 숫자로 제한을 둘 수 있다.

type Gender = "Female" | "male";

//Type을 이용해서 만들어둔 Gender 형으로 변수 선언,
//Type에서 설정한 것 이외의 값이 들어오면 코드에서 빨간줄로 틀렸다는 것을 알려준다.
const gender:Gender="Female";

---

함수에서의 type 선언

• 선언 시에 타입설정, 호출할 땐 기존처럼
  1. 매개변수 타입설정
  2. 함수의 return 타입에 따라 함수 전체 타입 설정(return 타입을 보고 타입을 추론할 수 있으면 생략이 가능하다.)
  3. ※ 이미 알고 있는 타입 외에도 never와 void를 함수의 리턴 타입으로 설정이 가능하다.

선언하는 방식

//파라미터와 리턴 타입을 선언하는 기본 형식
function sum(a: number, b: number): number{
	return a+b;
}

//화살표 함수로 타입을 선언
const sum = (a: number, b: number): number => {
	return a+b;
}

//리턴 생략한 형태로도 선언
const sum = (a: number, b: number): number => a+b

---

함수와 매개변수의 개수

• JS VS TS
  • JS: 매개변수 선언하고, 호출 시 parameter를 전달하지 않아도 오류가 발생하지 않는다.
  • TS: 매개변수를 2개 선언했다면, 호출했을 때 반드시 모든 값을 전달해줘야 한다.
• 세 번째 매개변수인 C에 값을 전달하지 않은 경우가 발생한다면 '?' 를 사용하여 undefined가 될 수 있음을 정의하면 된다.

function print(a: number, b: number, c?: number){}
print(1,2);

---

Void (함수의 리턴 타입이 없을 때)

• 비어있다는 의미로 리턴이 없는 함수는 voide로 설정할 수 있다.

function print(a: number, b: number, c?: number):void{
    console.log(a);
    console.log(b);
    console.log(c);
}

 

never (끝이 없는 함수)

• 어떤 조건에서도 함수의 끝에 도달할 수 없을 때 사용

function goingOn(): never{
    while(true){
     console.log("go");
    }
}

---

Generic

• 함수를 호출할 때 데이터 타입을 지정할 수 있는 문법
• 선언

function arrLength2<T>(arr:T[]):number{
	return arr.length
}

• 함수 호출
  • 함수를 호출할 때 매개변수로 들어갈 데이터 타입을 설정
  • 타입을 함수의 파라미터처럼 사용할 수 있다.

arrLength2<string>(["a"]);
arrLength2<number>([1,2,3,4]);