회사에 입사 지원서를 냈는데 과제가 떨어져서 타입스크립트도 새롭게 공부중에 있다.
js를 공부하면서 보다보니 생각보다 할만했다.
TypoeScript
Javascript + Type문법 (JavaScript Superset)
쓰는 이유
-
JS의 문제
JavaScript는 Dynamic Typing가 가능하기 때문에 숫자 - 숫자(5-3)만 가능해야하지만
숫자 -문자 (5 - '3')도 문자인 '3'을 숫자 3으로 바꿔서 연산을 해주게 된다
편리하긴 하지만 프로젝트 사이즈가 커지면 오히려 단점으로 적용 될 수 있다.
※프로젝트의 사이즈가 커지면 커질수록 자유도가 높거나 유연성은 큰 문제점으로 올 수 있다. -
위 문제를 TypeScript는 에러로 잡아줌(엄격히 검사)
5-'3'<- TS error: "문자랑 숫자 빼는 게 이상하다. 수정필요"
협업이나 그 전 기존코드들을 뜯어고치는 걸 생각하면 TypeScript가 좋다. -
JS는 추상적이고 추적이 어려운 에러가 많은 반면 엄격한 검사 덕분인지 TypeScript는 에러메세지를 정확하게 내려준다.
설치
1.nodejs 설치(최신)
2.VScode 준비
3.터미널오픈
npm install -g typescript 입력 후 설치
- 코드 짤 폴더 만들고 제목.ts 파일 생성 (.js와 같다)
- tsconfig.json 파일 생성
{ "compilerOptions" : { "target": "es5", "module": "commonjs", } }
안에 내용 작성
※.ts파일은 브라우저가 읽지 못함. 브라우저는 js파일만 읽을 수 있는데 ts파일을 js로 변환해야 사용가능
-
변환 방법
다시 터미널을 켜서 tsc -w 입력하면 자동 변환
(입력 시 자동으로 켜지며 js파일이 생성됨 코드를 짜고 저장할 때마다 js파일로 변환된 코드가 갱신됨)
이후 파일 사용할 땐 변환된 js파일을 사용하면 된다. -
이 변환 과정을 컴파일 한다라고 하는데 컴파일 할 때 쓰는 옵션들을 위에 적은 tsconfig.json으로 설정이 가능하다.
{
"compilerOptions" : { <- 컴파일 옵션
"target": "es5", <- js 몇 버전으로 컴파일 할건지 // es5는 2010년도 쯤 esnext는 최신 버젼
"module": "commonjs", <- js import문법을 언제적 js문법으로 할 건지
}
}TypeScript 간단 문법 정리
간단한 변수 타입 지정가능
let name :string = 'kim';
//이 변수엔 strint(문자) type만 들어올 수 있다.
name = 123; //오류
//배열을 한다면
let name :string[] = ['kim', 'park'];
// 이 변수엔 string이 담긴 array만 들어올 수 있다.
//오브젝트 자료를 쓴다면
let name :{ name : string } = { name : 'kim'};
//이 변수엔 name : string(문자) 로만 생긴 오브젝트만 들어올 수 있다.
// 오브젝트 자료는 { name? : string } name뒤에 ?를 name란 속성이 불확실할 때 넣을 수 있다.(들어올 수도 있고 안들어올수도 있다. 일종의 옵션)
//다양한 타입이 들어올 수 있게 하려면 Union type
let name :string | number = 'kim';
// 이 변수엔 string 혹은 number가 들어올 수 있습니다.(여러가지 응용 가능)
타입은 변수에 담아쓸 수 있음! Type alias
type Name = string | number;
//일반 변수와 차별화 하기 위해 대문자로 작성
let name :Name = 123;함수에도 타입 지정이 가능
function func(x :number) :number {
return x * 2
}
//파라미터 x엔 string타입만 가능 , (x : number) 뒤의 :number는 return 값의 타입을 지정해준다
// 결론은 이 함수는 파라미터로 number , return 값으로 number
func('123') // 에러array 사용
- tuple타입
type Member = [number, boolean]; //Member라는 변수에 타입지정
let john:Member = [123, true];
let john:Member = ['123', true]; // 에러
// john이라는 변수는 무조건 Member 타입을 따르는데 tuple타입이라고 한다
// 무조건 첫 번째는 number, 두 번째는 boolean 타입
- object에 타입 지정해야할 속성이 많다면
type Member = {
name : string
}
let john : Member = { name : 'kim'} //Member타입을 받아 name : string만 가능
//이 상황에 age나 gender나 지정해야할 속성이 많아진다면
type Member = {
[key :string] : string
}
//[key:string]은 모든 object의 속성을 나타내고 즉 글자로 된 모든 object의 속성의 타입은 string이여야 한다.
let john : Member = { name : 'kim', age : '123'}- class 문법도 가능
class User {
name :string;
constructor(name :string){
this.name = name;
}
}