Javascript는
Dynamic Typing
을 제공해서
5-'3'을 입력하면 알아서 '3'을 숫자로 바꿔서 계산해준다
(원래 숫자-숫자만 계산이 가능함)
이러한 기능은(편리도가 높고 유연성이 높은 기능) 편리하지만 프로젝트 규모가 커진다면 오히려 안좋다.
그래서 대규모 프로젝트 진행시에는 Typescript
를 사용하여 이러한 JS의 특징을 제거하여 타입을 엄격하게 검사해준다.
엄격하게 타입 검사를 하고, JS와 다르게 에러메세지를 다음과 같이 명확하게 알려준다.
TS error: "문자랑 숫자 빼는거 안되니까 수정하세요!"하고 알려준다.
이렇게 알려주면 어떤 부분에서 어떤 오류가 났는지 좀 더 쉽게 찾을 수 있다.
- Node.js 설치
- VScode 에디터 준비
- Terminal 에서 npm install -g typescript 입력
- VScode에서 .ts 파일 생성
- tsconfig.json 생성 후 하단 코드 입력하기
{ "compilerOptions" : { "target": "es5", "module": "commonjs", } }
- ts 파일로 돌아가서 코드 작성하면 끝!
브라우저는 js파일만 읽을 수 있어서 ts파일을 읽지 못함
-> ts파일을 js로 변환해서 사용해야함
tsc -w
를 입력해두면 자동변환됨
ts파일 저장할 때마다 js파일이 저장됨!
js로 변환하는 가정을 컴파일 한다고 하고 tsconfig.json은 ts->js 컴파일시 옵션설정이 가능하다
let 이름 :string = 'kim';
string, number, boolean 등등을 넣을 수 있다
let 이름 :string[] = ['kim', 'park'];
//이 변수에는 string이 담긴 array만 들어올 수 있다(array 타입 지정)
let 이름 :{name?:string}={name:'kim'}
//name?은 name 속성이 옵션이란 의미
let 이름:string|number = 'kim'; //string 혹은 number가 들어갈 수 있음 (union type)
type 지정하는것이 너무 길다 싶으면 변수에 담아서 쓸 수있다
type Name = string | number;
let 이름 :Name = 123;
function 함수(x :number) :number{
return x * 2
}//number가 Input으로 들어오고 number가 return이 되는 엄격한 함수
type Member = [number,boolean]; //튜플타입
let john:Member = [123, true]
type Member={
name: string
}
let john : Member = { name : 'kim'}
object에 타입 지정해야할 속성이 너무 많다면?
type Member={
[key :string]: string //글자로 된 모든 object 속성의 타입은 :string
}
let john : Member = { name : 'kim'}
class User{
name:string; //미리 변수를 만들어서 타입 지정을 해야함
constructor(name){
this.name = name;
}
}