TypeScript 설치 셋팅
이미 있는 React프로젝트에 설치 방법 :
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
React 프로젝트를 새로 만들어 설치 방법 :
npx create-react-app my-app --template typescript
그냥 vscode에서 typescript 실행 방법 :
npm install -g typescript
tsconfig.json파일(ts -> js컴파일시 옵션 설정 가능) 생성 후
{
"compilerOptions":{
"target": "es5",
"module": "commonjs",
}
}
그 후 ts파일을 js로 인식하게 하려면 terminal창에 tsc -w 입력
그러면 코드를 입력하면 js파일이 생성된다
이제 .js 파일을 .ts 파일로 바꿔서 이용가능
TypeScript 타입 지정
javascript는 Dynamic Typing이 가능하다
typescript는 타입을 엄격히 검사해준다
변수를 만들 때 타입을 지정하는 방법 : let 변수명 :string = 'kim'
해당하는 변수에는 string 타입만 들어올 수 있게 설정
array 타입 지정 방법 : let 변수명 :string[] = ['kim', 'park']
object 타입 지정 방법 : let 변수명 :{name : string} = {name : 'kim'}
* let 변수명 :{name? : string} = {name : 'kim'} = ?를 통해 name이 없어도 에러 발생안하게 설정
object에 타입지정해야할 속성이 너무 많으면
* let 변수명: {[key :string] : string} = {name : 'kim', age : '123'} = 글자로 된 모든 object속성의 타입은 string
여러가지 타입의 데이터를 들어올 수 있게 하는 방법 : let 변수명 :string | number = 123;
* 타입을 따로 변수로 사용하면 만들수 있다
type 타입 = string | number;
let 변수명: 타입 = 123;
함수에 타입지정 하는 방법 :
function 함수(x :number) :number{
return x * 2;
}
해당 함수는 파라미터로 number, return값으로 number
* class는 미리 타입을 지정해야한다
Tip : 타입지정은 원래 자동으로 된다. 타입지정 문법 생략 가능
TypeScript 타입 지정 (union, any, unknown)
Union type(|)을 통해 두개 이상 타입 지정이 가능하다
array 타입 : let 회원들 :(number | string)[] = [1,'2',3];
object 타입 : let 오브젝트 :{a :(string | number)} = {a : 123};
* union타입은 두가지 타입을 합쳐서 새로운 타입을 만드는 것이다.
any타입(타입 실드 해제 문법)을 통해 모든 자료형을 허용해줄 수 있다
let 이름 :any;
이름 = 123;
이름 = [];
unknown타입 : 기능은 any와 같으나, 조금 더 안전하다
이유 : any는 다른 곳에서 불러와도 타입실드를 해제한다 (오염)
TypeScript 타입 지정 (함수, void)
타입 지정하는 함수 만드는 방법 :
function 함수(x :number) :number{
return x * 2;
}
함수(6);
함수에서 void타입 활용 방법 :
function 함수(x :number) :void{
x + 1;
}
함수(2);
:void = return을 했을 경우 error나게 설정
* 함수에서 파라미터값을 설정하면 typescript에서는 무조건 보내줘야한다
이것을 막기 위해서는 파라미터변수 뒤에 ?를 붙이면 된다
* 변수? :number는 변수 :number | undefined와 같다
TypeScript Narrowing & Assertion
type이 아직 하나로 확정되지 않았을 경우(string | number) Type Narrowing을 써야한다
대표적인 Narrowing 방법 : typeof
if문 등으로 Narrowing 해줘야 조작가능
assertion 문법 : 타입 덮어쓰기(확정되지 않은 타입을 변경, 확정된 타입은 변경 불가)
아직 확정되지 않은 변수 뒤에 as type명 = 해당 변수가 지정한 type으로 덮어 써진다
* assertion 문법의 용도 :
1. Narrowing할 때 쓴다
2. 무슨 타입이 들어올지 100% 확실할 때 쓴다
웬만하면 Narrowing 쓰삼
TypeScript type alias & readonly
type alias : 타입 변수
만드는 방법 : type 변수명(첫번째 대문자) = 내용;
* const 변수명 = 값 : 해당 변수의 값을 바꿀수 없다(const이기 때문에)
하지만 object는 바꿀 수 있다.
따라서, object여도 바꿀수 없게 하는 방법 :
type을 지정해줄 때, 해당 obejct의 키값 앞에 readonly를 붙여준다
type girlfriend = {
readonly name : string
}
* 타입스크립트 에러는 에디터 & 터미널에서만 존재
실제 변환된 js파일은 에러 없음
type변수도 union type으로 extend(합치기) 가능
type Name = string;
type Age = number;
type Person = Name | Age;
object type 변수도 &로 extend(합치기) 가능
type PositionX = {x : number};
type PositionY = {y : number};
type NewType = PositionX & PositionY;
* type변수는 재정의 불가능하다