아래 강의를 듣고 기록한 내용입니다.
한글 자막은 없지만 이해할 만 합니다.
Udemy - Understanding TypeScript 2021 Edition
무작정 타입스크립트를 쓰기 전에, JavaScript와의 명확한 차이점을 이해하고 어떤 점이 좋은지를 정리해보고자 했습니다.
타입스크립트 경험이 없던 나. 팀 프로젝트를 시작하면서 tsx를 마주하는데..
1. 자바스크립트에서의 타입 : 동적 타이핑(Dynamic Typing)
JavaScript는 동적 타이핑(동적 타입 언어)
- 변수를 선언할 떄 데이터의 타입을 결정(고정)할 수 없다. 즉 언제든 변경 가능하다.
더 나아가 이는 객체 타입에서도 마찬가지이다.let a; // 어떤 타입의 값이 들어갈 지 알 수 없다. let b = 2; // 숫자 타입이 아닌 다른 타입의 값으로 바꿀 수 있다 let c = "2"; console.log(typeof +c);// string에서 number로 암묵적 타입 변환// 객체 타입 const obj = { key1: 2; key2: "d"; // key1과 key2에 대응하는 프로퍼티는 언제든 다른 타입의 값으로 변경 가능하다 } const fun1 = (a, b) => { // 매개변수 a와 b에 어떤 타입의 값이 들어올 지, 들어와야 할지 알 수 없다. console.log(a + b); } const arr1 = [1, "3", true]; // 이 배열이 어떤 타입의 값을 넣을 수 있는지, 각 인덱스에 어떤 타입의 값이 들어갈 지 결정할 수 없다.
- 컴파일(코드 실행 전 기계어로 번역)이 아니라 런타임(실행 시)에 타입을 검사합니다.
-> 장점 : 타입 변환이 유연하게 가능하고, 배우기에 쉽다
-> 단점 : 실행하고 나서야 타입을 확인할 수 있기 때문에 예상치 못한 결과를 얻을 수 있다. (근데 이게 에러를 일으키지 않을 수도 있다!)cosole.log("12" + 3) // 암묵적 타입 변환
다른 프로그래밍 언어를 경험하다 자바스크립트를 나중에 접할 경우, 동적 타이핑이 다른 언어에 비해 상당히 '유연'하다고 느껴지면서도, 단점으로 느껴질 수 있다.
다행히 나는 제대로 공부하는 첫 프로그래밍 언어가 자바스크립트(HTML과 CSS는 프로그래밍 언어가 아니니까)여서 이 유연함에 대해 크게 불편함을 느끼지는 못했다. 오히려 좋았다.
하지만 위처럼 생각을 하는 건 혼자 조촐...한(?) 코딩이나 프로젝트를 할 때는 괜찮겠지만, 규모가 있는 프로젝트나 팀 프로젝트를 하게 될 경우에는 생각이 바뀌더라.
특히 팀원과 작업하는 부분이 겹친다면??? 상당히 번거로울 듯
2. 타입스크립트에서의 타입 : 정적 타이핑(Static Typing)
TypeScript는 정적 타이핑(정적 타입 언어)
타입스크립트를 처음 시작하는 입장이므로 코드는 참고만 하세요 ㅎㅎ
- 변수를 선언할 떄 데이터의 타입을 결정할 수 있다. 객체 타입에도 마찬가지이다.
- 정해진 타입에 어긋날 경우 런타임이 아니라 컴파일 시 에러가 미리 발생된다. 즉 컴파일 시 타입을 검사한다.
- 장점 : 코드 실행(런타임) 전 에러를 미리 확인할 수 있다. 그러므로 실행 속도가 빠르다.
- 단점 : 더 엄격한 규칙을 지켜야 함이 불편할 수도..?let a; // a에는 자동으로 "any"타입이 결정된다.(사실 이렇게 하는 것은 TS를 사용하는 의미가 없으므로 비추천) let a:number; // a에 들어갈 수 있는 값은 number 타입의 값 뿐이다. let b = 2; // 변수 선언과 할당을 동시에 할 경우 초기화된 변수의 타입으로 결정된다. b에는 숫자 타입만 들어갈 수 있다. // -> 타입 추론(다음에 정리할게요!)// 객체 타입 const obj = { key1: 2; // key1에 대응하는 프로퍼티는 number로 제한된다.(타입 추론) key2: "d"; // key2에 대응하는 프로퍼티는 string으로 제한된다.(타입 추론) } const obj2:{ key1: number; // key1에 대응하는 프로퍼티는 number로 제한된다. key2: string; //key2에 대응하는 프로퍼티는 string으로 제한된다. } = { key1: 2; key2: "d"; } const fun1 = (a: number, b:number): void => { console.log(a + b); } // 매개변수 a와 b는 무조건 number가 들어와야 하며, fun1 함수가 return하는 값이 없어야 한다. const arr1 = [1, "3"]; // 이 배열은 number 혹은 string 타입의 값만 들어올 수 있다.
- (아직 시작 단계지만..) 추가적인 이점 : vscode(IDE)가 타입스크립트에 호환되어 많은 도움을 줌. 호버 시 변수의 타입을 알려준다!!
3. 타입스크립트를 배울 때 오해(어떤 걸 추가로 배우게 되는지에 대해)
이럴 수 있다.
??? : "자바스크립트에서 배웠던 타입만 콜론(:) 추가하면 되겠네? 타입스크립트 다 배움 ㅅㄱ"
나도 이런 줄 알았으나 그렇게 만만한 언어가 아니더라 ㅠㅠ
이제 공부를 시작하는 입장임에도 몇 개의 강의를 들어보니 저게 끝이 아니라는 건 알겠다...
대략 아는 것만 정리를 하자면 다음과 같다(제대로 배워볼 준비를 하자!!)
1. 타입스크립트를 자바스크립트로 변환하는 과정을 이해해야 함.(이해는 못해도 할 줄은 알아야지)
1. 자바스크립트에 유동적인 타입을 커버하기 위해 자바스크립트에는 없는 타입을 배워야 함.
2. 객체 타입 내부 변수들(key)의 타입을 편리하게 정리하는 키워드를 배워야 함. (interface..)
3. 기존에 사용했던 프레임워크/라이브러리(React 등등)에 TS를 적용하는 방법을 배워야 함.
4. (2번에 이어) 그러면서 DOM 요소에 해당하는 타입도 배워야 함. 현재 리액트에 적용하면서 고생 중..
5. 기타 등등..
봐주셔서 감사합니다. 강의를 들어면서 하나씩 공부한 내용을 올릴 예정입니다 ㅎㅎ
