타입스크립트란 자바스크립트의 타입부분을 업그레이드해서 사용할수있는 언어 즉 자바스크립트의 대용품이다.
완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용 가능한데 타입 문법을 업그레이드 해서 사용할 수 있다.
5 - '3' js는 Dynamic Typing이 가능하기 때문에 위처럼 숫자에서 문자를 빼는것도 가능하다.
js가 문자를 알아서 숫자로 바꿔주어서 계산을 하는데 얼핏 보면 정말 편리해보이는데
프로젝트의 규모가 커지거나 코드가 길어진다면 자유도&유연성은 오히려 불편하게 될것이다.
반면 TS는 타입을 엄격히 검사해줘서 사전에 타입에 관한 오류로 알려줘서 나중에 코드를 뜯어 고칠일을 막아준다. js로 실수안하면 되지! 라고 생각하면 오산이다. 나중에 팀원들과 일하다 보면 어떻게 코드가 달라질지도 모르고 코드가 엄청 길어질것이다..
TS 는 오타검사도 해주기 때문에 실행하지 않아도 실수를 미리 알려준다.
TS설치과정
- nodesjs 설치 ( 항상 최신버전으로 )
강의에 나온 버전은 위 첫번째와 같지만 현재는 두번째로 변경된거 같다.
2.사용하고자 하는 에디터를 설치하고 완료되면 터미널을 열어준다.
터미널에 npm i -g typescript를 입력해준다.
3.ts로 끝나는 파일을 생성하고 설정파일도 생성해준다.
tsconfig.json에 아래 내용대로 입력해준다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs"
}
}
4.tsc -w 실행하기
내가 ts를 설정한 파일의 경로로 간후 tsw -w 를 입력해준다. 내가 아무리 ts에서 코드를 작성한다해도 웹에서는 js만 인식한다. 하지만 위 명령어를 실행하면 ts코드를 js코드로 변환해준다. 파일 사용시 당연하게 변환된 js파일을 사용하면 된다.
이러한 과정을 컴파일 한다고 하는데 그것에 대한 옵션을 tsconfig.json에 설정하는것이다.
{
"compilerOptions": {
"target": "esnext", -> 최신 js 문법
"module": "commonjs"
}
}
이러면 ts를 사용할 준비는 끝났다.
TS는 간단한 변수 타입지정이 가능하다.
이렇게 변수에 타입을 지정하면 해당 타입으로만 값을 넣거나 변경할수 있다.
array 타입을 사용하면 아래처럼 설정할수있다.
let 이름 : string[] = ['kim','apple']; 그럼 array에는 string값만 들어갈수있다.
object 값도 비슷하다. 오브젝트에 설정한 형식대로 값을 넣을수있다.
let 이름 :{ name:string} = {name:'kim'}만약 다양한 타입을 넣고싶으면??
let 이름 :string | number =123;
이렇게 설정하면 숫자값 문자값 둘다 넣을수 있다.
타입은 변수처럼 담아서 쓸수도 있다.
type Name = string | number;
let 이름 : Name =123; 이런식으로 사용가능하다!!
이런 형식은 tuple타입이라고 하는데 array의 첫번째는 무조건 number 두번째는 무저건 boolean이 들어가야한다.
이런식으로 object타입도 지정할수있다. 많은 속성값이 들어올땐 위처럼 key:string을 선언하면 문자로 들어오는 모든 오브젝트 속성 타입들은 무조건 string을 갖는다 라고 할수있다.
이런식으로 class도 설정 가능하다.
하지만 문법만 배운다고 코드를 잘 구성할수 있는건 아니다. 실습이 반드시 필요하다.
tsconfig.json에 관련된 내용들
json파일 안에 이렇게 복붙하도록 한다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
}
}'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다.
es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 해준다.
신버전을 원하면 es2016, esnext 이런 것도 입력할 수 있다.
'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳이다.
commonjs는 require 문법
es2015, esnext는 import 문법을 사용한다.
그래서 어느정도 IE 호환성을 원하시면 es5, commonjs가 국룰임
근데 정말 신버전 자바스크립트만 표현가능한 그런 문법들이 있는데
(예를 들어 BigInt() 이런 함수와 bigint 타입)
그런 것들은 esnext 등으로 버전을 올려줘야 사용가능하다.
추가로 넣어줄만한 옵션
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": true,
"strictNullChecks": true
}
}
noImplicitAny는 any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정이고
strictNullChecks는 null, undefined 타입에 이상한 조작하면 에러를 띄우는 설정이다.
tsconfig에 들어갈 기타 항목들
대부분 건드릴 필요 없는데 쓸모있어보이는 것들만 추려봤다.
전체는 https://www.typescriptlang.org/tsconfig 에서 구경가능하다.
{
"compilerOptions": {
"target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
"module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
"allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
"checkJs": true, // 일반 js 파일에서도 에러체크 여부
"jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
"declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
"outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
"outDir": "./", //js파일 아웃풋 경로바꾸기
"rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
"removeComments": true, //컴파일시 주석제거
"strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
"noImplicitAny": true, //any타입 금지 여부
"strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기
"strictFunctionTypes": true, //함수파라미터 타입체크 강하게
"strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
"noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
"alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
"noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
"noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
"noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기
"noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기
}
