* 타입스크립트 쓰는 이유
- TypeScript는 JavaScript의 타입부분을 업그레드해서 사용하고 싶을 때 사용하는 일종의 JavaScript의 일종의 확장판이다. 완전 다른 언어가 아니라 JavaScript문법 그대로 이용가능한대 타입 문법을 업그레이드 해서 사용할 수 있다.
- JavaScript는 타입에 관대하다. 따라서 숫자와 문자를 연산해도 아무런 문제 없이 정상적으로 작동한다.
혹은 숫자로 바꿔주는 함수에 이상한 값을 넣어도 아무런 오류가 없다. 언어 자체에서 알아서 타입을 변경해준다.
(JavaScript는 Dynamic typing를 지원하는 언어이기 때문이다.)
ex) 5 - "3" 혹은 parseInt([1, 2, 3])
- Dynamic typing은 간단한 기능을 개발할 때는 편리하겠지만 큰 프로젝트를 할 때는 오히려 단점이 된다.
(type관련된 버그들이 많이 발생한다.)
- TypeScript를 사용하면 이런 부분을 전부 error로 잡아준다. 이러한 이유로 TypeScript를 사용한다.
-TypeScript의 엄격한 type rule덕분에 에러메세지에서는 문자열 숫자열 구분과 잘못 작성된 method함수까지 정확히 지적해준다.
* JavaScript(동적언어)
런타임에 타입이 결정 / 오류 발견
* Java, TypeScript(정적언어)
컴파일 타임에 타입 결정 / 오류 발견
안정적이다.
* TypeScript 셋팅 및 사용법 (HTML, CSS, JavaScript)
[셋팅]
- Nodejs설치 및 VScode에디터 설치
- 터미널에서 아래의 명령어 입력
npm install -g typescript
- 타입스크립트 컴파일러라는걸 설치하는건데 컴퓨터마다 한 번만 하면 됩니다.
[Error발생시]
1. Nodejs 버전 확인하기
2. 맥북 보안에러가 발생할 경우 sudo를 이용하여서 명령어 실행
tsconfig.json파일을 생성후 아래의 코드를 넣어준다.
{
"compilerOptions" : {
"target": "es5",
"module": "commonjs",
}
}
[사용]
- tsc -w 명령어를 터미널에 입력해두면 자동으로 ts파일을 js파일로 변환해준다.
- 변환된 js파일을 사용해주면된다.
<script src="변환된파일.js"></script>
* TypeScript 셋팅 및 사용법 (React)
- 이미 있는 React 프로젝트에 설치할 경우 (아래의 명령어를 입력한다.)
- .js파일을 .ts파일로 변경해서 사용가능
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
- React프로젝트를 새로 만들면서 추가할 경우 (아래의 명령어를 입력한다.)
npx create-react-app my-app --template typescript
* TypeScript 셋팅 및 사용법 (Vue)
- 아래의 명령어로 라이브러리를 추가
vue add typescript
- lang옵션을 켜두면 알아서 셋팅이 된다.
- Vue 프로젝트 내에서도 tsconfig.json파일을 만들어서 설정을 자유롭게 할 수 있다.
<script lang="ts">
</script>
* TypeScript 간단 정리
- 변수를 만들 때 타입지정이 가능하다.
- 변수명: 타입명
- 타입으로 사용할 수 있는것들은 string, number, boolean, bigint, null, undefined, [], {}등이 있다.
const dog :string = 'poodle'
- 타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 error message를 띄워준다.
- 타입관련 버그들을 사전에 찾아 없앨 수 있습니다.
const dog :string = 'poodle';
dog = 1004;
- array 혹은 object자료는 아래의 예시처럼 타입 지정이 가능하다.
const dog :string[] = ['poodle', 'latte']
const age :{ age : number } = { age : 5 }
- 여러가지 타입의 데이터를 넣어려면
- | 기호를 이용해 or 연산자를 표현할 수 있습니다.
- 아래의 예제는 변수에 숫자 혹은 문자를 집어넣을 수 있게 됩니다.
const dog :string | number = 'poodle';
- type 키워드를 이용해 타입을 변수처럼 담아서 사용가능합니다.
type NameType = string | number;
const dog: nameType = 'poodle';
- string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능합니다.
- 저렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'latte' 또는 1004만 들어올 수 있습니다.
- literal type이라고 부릅니다.
type NameType = 'latte' | 1004;
const poodle :NameType = 'latte';
- 함수는 파라미터와 return 값이 어떤 타입일지 지정가능합니다.
- 실수로 다른 타입이 파라미터로 들어오거나 return될 경우 error를 발생시켜준다.
- 함수는 return타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입이다.
function fn(x :number) :number{
return x * 2
}
- 타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없습니다.
- 항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해줍니다.
//에러
function fn(x :number | string) {
return x * 2
}
//가능
function fn(x :number | string) {
if (typeof x === 'number'){
return x * 2
}
}
- array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면
- tuple 타입을 쓰면 됩니다. 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 됩니다.
type Member = [number, boolean];
let john:Member = [100, false]
- object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능합니다.
- type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방합니다. 차이점은 별로 없습니다.
- 특정 속성이 선택사항이면 물음표를 기입가능합니다. (optional chaining)
type MyObject = {
name? : string,
age : number
}
const hyeonwoo :MyObject = {
name : 'hwang',
age : 29
}
- object안에 어떤 속성이 들어갈지 아직 모른다면 모든값에 대해서 타입지정도 가능합니다.
- index signature라고 합니다.
type MyObject = {
[key :string] : number,
}
const hyeonwoo :MyObject = {
age : 29,
weight : 70,
}
- class도 타입설정이 가능합니다.
- 다만 중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용가능합니다.
class Person {
name;
constructor(name :string){
this.name = name;
}
}
'Study > TypeScript' 카테고리의 다른 글
[TypeScript_study] type지정을 쉽게 하는 팁 (0) | 2022.07.24 |
---|---|
[TypeScript] TypeScript & React SyntheticEvent(합성이벤트) (0) | 2022.07.22 |
[TypeScript_study] Pick & Omit & Exclude & NonNullable (0) | 2022.07.05 |
[TypeScript_study] Record (0) | 2022.07.05 |
[TypeScript_study] 함수 오버로딩(Function Overloading) (0) | 2022.07.05 |