TypeSCript = JavaScript + Type 문법 => "JavaScript Superset" 자바스크립트의 상위 집합
1. Typescript 쓰는 이유
- Javascript의 특징 중에서 Dynamic Typing이 있는데 프로젝트가 작을때는 편리하지만 프로젝트가 커지면 단점으로 바뀜.
ex) 5 - '3' 도 가능한 javascript <= JavaScript는 Dynamic Typing이 가능하기 때문. 그래서 원래 숫자-숫자만 가능한데 JS가 알아서 숫자로 바꿔줌.
- TypeScript는 타입을 엄격히 검사해줌. => 5 - '3' 코드에서 TS error 발생
- JavaScript는 추상적이고 추적이 어려운 에러를 발생하는 반면 TypeScript는 에러메시지 퀄리티가 높음
ex) JavaScript 에러
var person = { a : 'kim }
person.b.sort()
▶ Uncaught TypeError : Cannot read property 'sort' of undefined at <anonymous>:2:10
TypeScript 에러
var counter = 0;
counter = '1'
▶ Typer 'string' is not assignable to type 'number'
var counter : number
var obj = {
append : 123,
}
obj.apend
▶ Property 'apend' does not exist on type '{ append : number; }'. Did you mean 'append'?
2. TypeScript 사용 방법
1. node.js 설치(최신버전)
2. VScode 에디터 준비
3. 터미널 오픈 후 npm install -g typescript Enter
4. 파일명.ts 파일 생성 후 코드 짜기(.js가 아니라 .ts)
5. tsconfig.json 파일 생성 후 내용 작성 : tsconfig.json의 역할은 ts -> js 컴파일시 옵션 설정하는 기능
※ ts파일은 브라우저에서 인식못하기 때문에 js파일로 변환해서 사용이 가능함 => 터미널킨 후 tsc -w 입력하면 자동변환됨.
3. TypeScript 기본 문법
1. 간단한 변수 타입지정 가능 : string, number, boolean, null, undefined, bigint, [], {} 등
ex)
1) let 이름 :string = 'kim';
2) let 이름 :string[] = [ 'kim', 'park' ]; <-- 이 변수엔 string 담긴 array만 들어올 수 있다는 의미
3) let 이름 :{ name : string } = { name : 'kim' } <-- object 타입지정
2. 다양한 타입이 들어올 수 있게 하려면 Union type으로 지정
ex) let 이름 :string | number = 'kim'; <--- | 기호(or 기호)를 사용
3. 타입은 변수에 담아쓸 수 있음(Type alias)
ex) type Name = string[] | number; <--- 작명할 때 보통 대문자로 많이 함.
let Name : 내타입 = 123;
4. 함수에 타입지정 가능
ex)
function 함수(x :number) :number {
return x * 2
}
▲ 이 함수는 파라미터로 number, return 값으로 number로 타입 지정함.
5. array에 쓸 수 있는 tuple 타입
ex)
type Member = [number, boolean]; <-- 무조건 첫 째는 number, 둘 째는 boolean으로 지정
let john :Member = []
6. object에 타입지정해야할 속성이 너무 많으면
ex)
type Member = {
[ key : string ] : string, <--- "모든 object 속성들이 글자로 된 모든 object 속성의 타입은 :string이라는 의미"
}
let john :Member = { name : 'kim', age : '123' }
7. class 타입 지정 가능
ex)
class User {
name : string;
constructor(name :string){
this.name = name;
}
}
공부하면서 참조한 것들
https://youtu.be/xkpcNolC270
https://velog.io/@developer119/typescript
타입스크립트는 뭐지?
javascript나 node.js, react native를 사용하는 프로젝트를 진행면서, 타입스크립트라는 말을 자주 접했다당장은 자바스크립트만 집중하고 있었는데, 시간을 내어 타입스크리트가 무엇인지 알아보면서
velog.io
