[TypeScript] 설치 후 사용하기 / 타입 선언하기

자바스크립트와의 가장 큰 차이점 

- JS는 동적 언어 : 프로그램 구동 중 타입이 다이나믹하게 변경됨
- TS는 정적 언어 : 프로그램을 작성할 때 타입을 정의 해주어야 함

 

 

▶ 타입스크립트의 장점 

1. 버그를 줄이고, 유지 / 보수가 쉬우며 질 좋은 코드 작성에 용이
2. 강력한 타입으로 대규모 개발에 용이
3. 자바스크립트 라이브러리와의 편리한 사용
4. 개발 도구에서의 강력한 지원

 

▶ 프론트엔드 프레임워크와 타입스크립트 

• 리액트(React) : 리액트와 타입스크립트는 호완성이 좋은편 (간단한 옵션 추가만으로 사용할 수 있도록 지원)
• 뷰(Vue) : 뷰2.0 부터 타입스크립트 사용가능, 뷰3.0 부터 공식 지원
• 앵귤러(Angular) : 버전 2 부터 타입스크립트 기반으로 만들어짐, 타입스크립트 권장

 

---

 

타입스크립트 사용하기 

 

↓ 타입스크립트를 바로 써볼 수 있는 사이트 ↓ 

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

 

 

1. 타입스크립트 설치하기

 

- TS파일은 웹 브라우저가 해석할 수 없기 때문에 JS파일로 변환해서 사용해야 함

- 변환할 때는 트렌스파일러로 변환 작업을 함

 

1) 설치하기  : npm install -g typescript

Commend Prompt로 변경 후 실행문 ㄱ

2) 실행문 작성하기 : tsc 파일명.ts

☞ es6 구문으로 작성하고 싶을 때 실행문 : tsc test.ts --target es6 

- 모듈 시스템 정의 : tsc 파일명 --target es6 --module commonjs

- 타입스크립트 초기화 : tsc --init

- 노드 초기화 : npm init

 

 

2. 컴파일러 설정파일 만들기 : 파일 생성할 때마다 터미널 열어 옵션들을 작성하는 수고를 덜기 위함

1) tsc --init 으로 타입스크립트 초기화 ☞ tsconfig.json 파일 자동 생성됨

2) tsconfig.json 파일

- include : js파일로 변환될 파일의 파일명을 지정

- exclued : 타입스크립트 컴파일  대상에서 제외할 패키지를 지정

- compilerOptions : 타입스크립트 컴파일러에 대한 옵션 지정

• "target" : 자바스크립트 구문 지정
• "module" : 모듈 지정
• "rootDir" : 작성할 타입스크립트 파일들이 위치할 폴더
• "outDir" : 변환된 자바스크립트 파일들이 위치할 폴더

예시로 이렇게 설정을 했다 !

3) src폴더("rootDir"에 작성한 폴더명과 동일해야 함)생성 후 모든 ts파일들을 넣기

4) 노드 초기화(npm init) 후 터미널에 tsc 명령어만 입력해도 알아서 파일들을 변환해 지정된 폴더로 들어감

 

 

 

---

 

타입스크립트의 타입 선언하기

 

- 타입 추론 : TS에서는 타입 표기가 없는 경우 코드를 읽고 자동으로 분석해 타입을 유추할 수 있음

- 타입 명시 : TS에서 변수 선언 시, 변수값에 타입을 명시함으로써 변수값의 데이터 타입을 지정할 수 있음

let str1 = "타입추론"; // 이렇게 적으면 자동으로 string타입으로 유추함
let str2:string = "타입명시";

 

1) 기본 타입 선언 (string, number, boolean, null, undefined)

// let 변수명:타입 = 값;
let str1:string = "green";
let num1:number = 20;
let boolean1:boolean = true;
let null1:null = null;
let undefined1:undefined = undefined;

 

2) 객체 타입 선언 (Array, Object)

// 객체는 기본타입과 선언문이 같음
let ObjectType:object = {};

// 배열 선언 구문 => 변수명:타입[] = [] / 변수명:Array<타입> = []
let arr1:number[] = [0,1,2,3,4];
let arr2:Array<number> = [0,1,2,3,4];
let str1:string[] = ["사과","딸기","포도","레몬"];
let str2:Array<string> = ["사과","딸기","포도","레몬"];

 

3) 애니 타입 선언 (any) : 항목의 값을 지정할 수 없을 때 사용

// any 타입 (아무 타입이나 지정 가능) : 항목의 값을 지정할 수 없을 때 사용
let anyType:any = "aa";
anyType = 123;
anyType = false;

// 배열 any타입 선언
let anyArr: any[] = [30, "aa", true];

 

4) 유니언 타입 선언 : 여러 개의 타입을 동시에 주고 싶을 때 사용

 

- 기본 유니언 타입 선언

// 구문 => let 변수명: 타입1 | 타입2 ;
let numStr: number | string
numStr = 30;
numStr = "aaa";

- 배열 유니언 타입 선언

// 구문 => let 변수명: (타입1 | 타입2)[] = [값1,값2...];
let numStrArr: (number | string)[] = [12, "a", "b"];
let srtNumArr: Array<string | number> = ["c", 5, "d"];

- 객체 유니언 타입 선언

 

// 객체 속성에 대해 타입을 지정
// 구문 let 변수명: { key1: 타입, key2: 타입,...} = { key1: 값1, key2: 값2} 
let user: { name: string, age: number } = {
	name: "green",
    age: 20
}

 

객체 유니언 타입 선언에 사용되는 속성 키워드

• 옵셔널 속성 : key값 뒤에 ? 키워드 붙여 필수 속성이 아니게 됨 (속성이 있어도 되고, 없어도 됨)

// 1. ? 키워드 없을 때 아래와 같이 작성하면 에러가 남
let obj: { name: string, age: number, isJob: boolean } = {
    name: "hello",
    age: 20
}

// 2. ? 키워드를 사용함으로써 isJob이 필수 속성이 아니게 됨
let obj: { name: string, age: number, isJob?: boolean } = {
    name: "hello",
    age: 20
}

• 읽기 전용 속성 : key값 앞에 readonly 키워드 붙여 key값을 수정할 수 없게 함(key값에 접근은 가능)

let obj: { readonly name: string, age: numbern } = {
    name: "hello",
    age: 20
}
console.log(obj.name); // 가능 
obj.name = "goodbye" // 에러남

 

 

+) interface 키워드 : 타입스크립트의 여러 객체를 정의하는 일종의 규칙이며 구조다.

여러개의 타입들을 일일이 지정하기 번거로울 때 사용되며, 주로 객체의 타입정의에 많이 쓰인다.

// 사용할 때에는 반드시 지정된 key값과 타입을 사용해야 함
// 구문 => interface interface명 { key1: 타입, key2: 타입 }
interface IUser {
    readonly name: string,
    age: number,
    isJob?: boolean
}
let user1: IUser = {
    name: "green",
    age: 30
}

let user2: IUser = {
    name: "blue",
    age: 30,
    isJob: true
}

 

+) 리터럴(값) 타입 : value값에 지정된 타입의 값들을 제한해 사용할 수 있음

// 문자열 리터럴 타입 지정
type Score = 'A' | 'B' | 'C' | 'D' | 'F' ;

interface Student {
    name: string,
    age: number,
    gender: string,
    // 1?: string,
    // 2?: string,
    // 3?: string,
    // 4?: string
    // key값의 타입을 지정하고 valu값의 타입을 지정해 값을 한번에 주기 편하다
    // [key이름변수:key값의 타입]: value값의 타입
    [grade:number]: Score
}
let stu1: Student = {
    name: "둘리",
    age: 6,
    gender: "남자",
    1: "A"
}
let stu2: Student = {
    name: "또치",
    age: 5,
    gender: "여자",
    2: "B"
}

 

5) 함수 타입 선언

 

- 인수(매개변수)와 반환 값이 있을 때

// 1. 함수 선언문으로 작성
// let 함수명: (변수1: 타입, 변수2: 타입) => 리턴문타입;
let myFun1: (arg1: number, arg2: number) => number;
let num:number = myFun1(10, 20);
console.log(num); // 30

// 2. 함수 표현식으로 작성
// function 함수명(매개변수1: 타입, 매개변수2: 타입): 리턴문타입 { return문 작성 }
function myFun2(x: number, y:number):number {
    return x + y;
}
myFun2(5, 6); // 11

- 인수(매개변수)와 반환 값이 없을 때 : void 키워드 사용

// 1. 함수 선언문
let myFun3: () => void;
myFun3 = function() {
    console.log("hi");
    
}
// 2. 함수 표현식
function myFun4():void {
    console.log("bye");
    
}

+) 함수 타입 선언에  interface 키워드 사용하기

interface Add {
	// (매개변수1: 타입, 매개변수2: 타입):리턴문타입
    (num1: number, num2: number):number;
}

let myFun5: Add = function(num1, num2) {
    return num1 + num2;
}