TypeScript
- 정적 언어 : 프로그램을 작성할 때 타입을 지정해줘야한다.
- 유지보수 비용 감소
- 강력한 타입으로 대규모 개발에 용이
- JS 라이브러리와의 연결
| 뷰 | 리액트 | 앵귤러 | |
|---|---|---|---|
| 환경 | 뷰 2.0~ | 옵션 추가 후 | 버전2 |
TS 사용하기
typescript는 scss와 마찬가지로 웹 브라우저가 해석할 수 없다.
때문에, 트렌스파일러로 변환 작업을 거쳐야한다.
npm install -g typescript이 설치되어 있는 상태에서,
cmd 터미널에서 tsc TS파일명.ts을 작성한다.
❗ es6의 타입의 js로 작성하고 싶을 때에는 tsc TS파일명.ts --target es6로 작성한다.
es6의 타입의 js에서는 let을 사용할 수 있다.
❗ tsc TS파일명.ts --module commonjs로 작성하면 모듈 시스템을 정의할 수 있다.
컴파일러 설정 파일 만들기
tsconfig.json 파일 생성
- 터미널에
tsc --init하여 tsconfig.json 파일을 작성한다. - 파일에 아래와 같은 설정을 작성한다.
- complierOptions: 타입스크립트 컴파일러에 대한 옵션
"outDir":"out": 변환된 JS파일을 out 폴더에 담는다"rootDir": "src": TS파일을 src 폴더에 담는다"target": "es2016": JS구문을 ES6으로 지정한다"module": "commonjs": 모듈 시스템을 commonjs로 정의한다"removeComments": true:주석을 제거한다."strict": true
: null이 아닌 타입에는 null이 들어가지 못하게 한다. & 암묵적으로 any타입을 가지는 것을 허락하지 않는다.
- include : 변환할 파일 지정
"include": ["src/**/*.ts"]: src 폴더 안에 있는 모든 ts파일
- exclude : 제외할 파일 지정
"exclude": ["node_modules"],: node packge를 컴파일 대상에서 제외한다
- 이후, 터미널에서
npm init한다. - ✔ 이제 다음부터는 터미널에서
tsc만 입력해도 설정된 형태에 맞는 JS파일이 생성된다.
TS 작성하기
let str1:string= "green";
let str2= "blue";[타입명시] str1의 타입은 :string으로 지정되어 있으니 string이다.
[타입추론] str2의 타입은 "blue"라는 string 값이 들어가 있으니 string이다.
타입 지정
기본 타입 지정
let stringType:string= "green";
let numType:number= 30;
let booleanType:boolean= true;
let nullType:null= null;
let undefinedType:undefined= undefined;변수명:타입 으로 작성한다.
배열 타입 지정
let arr1:number[]=[1,2,3];
let arr2:Array<string>=["가","나","다"];변수명:타입[] 또는 변수명:Array<타입>으로 작성한다.
객체 타입 지정
let objectType:object= {};
let user:{name:string, readonly age:number, isJob?:boolean}={
name: "green",
age:30
}변수명:{키:타입}으로 지정하면 해당 객체의 키는 해당 타입으로만 받을 수 있다.
변수명:{readonly 키:타입}으로 지정하면 값을 변경할 수 없다.
변수명:{키?:타입}으로 지정하면 해당 객체의 키는 사용될 수도, 사용되지 않을 수도 있다.
✔ interface를 작성하면 type을 보다 간략하게 지정할 수 있다.
모든 타입 지정
let anyType:any;
let anyArr:any[]= [30,"나",true]변수명:any로 작성하면 모든 타입의 데이터를 받는 변수가 된다.
다중 타입 지정
let arr3:(string|number)[]=[1,"나",3];
let arr4:Array<string|number>=["가",2,"다"];
let str3:(number|string);
str3= "가";
str3= 1;변수명:타입A|타입B로 작성하면 타입A 및 타입B의 데이터를 받는 변수가 된다.
함수 타입 지정
인수와 반환값이 있을 때
✔ 타입을 미리 지정하고 함수에 적용시킬때에는 위와 같이 작성한다.
✔ 함수에서 타입을 지정할 경우에는 위와 같이 작성한다.
인수와 반환값이 없을 때
위의 myFunction3 또는 myFunction4와 같이 작성한다.
void는 결과 값을 제공하지 않는 함수의 결과를 위한 타입이다.
타입이 void일때, return 하면 함수를 끝낸다.
✔ interface를 작성하면 type을 보다 간략하게 지정할 수 있다.
enum 열거형 타입
enum Week{
Sun,
Mdn,
Tue,
Wed,
Thu,
Fri,
Sat
}
console.log(Week.Sun);
console.log(Week.Sat);열거형 enum으로 작성시,
"use strict";
var Week;
(function (Week) {
Week[Week["Sun"] = 0] = "Sun";
Week[Week["Mdn"] = 1] = "Mdn";
Week[Week["Tue"] = 2] = "Tue";
Week[Week["Wed"] = 3] = "Wed";
Week[Week["Thu"] = 4] = "Thu";
Week[Week["Fri"] = 5] = "Fri";
Week[Week["Sat"] = 6] = "Sat";
})(Week || (Week = {}));
console.log(Week.Sun);
console.log(Week.Sat);자동적으로 맵핑이 된다.
