먼저 타입스크립트를 왜 배워야 하는가?
타입스크립트는 무엇보다 기존 JS보다 안정적이다. 실제 서비스에서도 대부분 JS->TS 과정을 거친다.
TS의 가장 큰 메리트는 무엇보다 JS의 황당한 에러들을 대부분 줄여줄 수 있는점! 이를 통해 안정적인 서비스 운영 자체가 가능해진다.
기본적인 타입스크립트 설치 과정
npm install typescript
npx tsc
npx tsc --init
그 후, tsconfig,json의 allowJs 주석처리를 풀어준다. 이 과정이 있어야 JS와 TS를 동시에 사용가능
이 과정 후에는 , npx tsc --noEmit (에러체크)같은 명령어를 사용할 수 있다.
npx tsc 이 커맨드문은, ts 파일을 js 파일로 변경해준다.
const a:number = 5;
const b:number=5;
const c:boolean=true;
const d:undefined=undefined;
const e:null=null;
TS 타입 문법
TS는 기본적으로, 변수,함수,매개변수에 타입을 붙여 놓은것을, TS의 변수선언이라고 생각하면 쉽다.
function add(x: number, y: number): number { return x + y }
const add: (x: number, y: number) => number = (x, y) => x + y;
type Add=(x: number, y: number) => number;
// type alias 를 통해 type 으로 타입 선언도 가능
const add:Add = (x, y) => x + y;
const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };
const arr:string[]=['123','456']
const arr2:Array<string>=['123','456']
//generic식 선언 방법
const tuple:[number,number,string]=[123,456,'helo'];
그리고, 이외의 함수, 화살표 함수, 객체, 배열, 튜플의 선언 방법이다. 화살표 함수가 약간은 다른 방법들과는 표기방식이 달라서 받아들이기 어려울 수 있는데, : 후 매개변수를 먼저 선언해준후, => 로 함수 리턴값의 타입을 선언해준다.
const a = 5;단, 이런식으로 const 선언은 상수 선언이기에, 이 5라는 값은 변하지 않고, ts는 자체적으로 타입 추론이 가능하다. 이러한 경우, 직접 타입을 명시해주는 것보단, typescript가 올바르게 타입을 인식했다면, 그대로 가는게 좋다. 최대한 타입 선언은 정확하게 해주는게 좋기 때문
function add_simple(x:number,y:number){return x+y};
const result=add_simple(1,2);
이러한 경우에도 정상적으로 인식한다. 타입이 any로 나오면 수정하는 과정을 거치도록 하자.(예를 들면 매개변수의 number를 지우는 경우)
type Add3= ()=> number;
interface Mins{}
Array<string>단, 이러한 각 코드들은 JS 변환시 사라진다는 점을 유의해야한다. 이외에도 enum, declare는 사라진다.
let aa=123;
aa='helo' as unknown as number;
//앞의 타입을 강제로 바꿔주는 as이런식으로 앞의 타입을 강제로 바꿔줄 수 있는 , as 문 역시 사라진다.
const head= document.querySelector('#head');const array=[];
const head:Element= document.querySelector('body')!;
const head2= document.querySelector('body')!;위 빈 배열처럼 never라는 타입이 오게되면, 어떠한 값도 들어갈 수 없다. 따라서 빈배열 선언할때는 타입 선언해주는 것이 좋다.
또한, typescript에는 !가 존재하는데, head는 무조건 있다! 이 엘리멘트는 무조건 있다라고 자신할 수 있을때 마지막에 느낌표를 붙여준다.이 경우 타입의 null이 사라지게 된다. 단 비추하는 코드. 그리고, head2의 !를 제거할 경우, head2.innerHTML 이런것을 사용할시, 타입스크립트 자체에서 null일 수도 있다고 경고를 해주게 된다. 왜 황당한 에러를 줄여줄 수 있는지 알 수 있을 것 같다.
타입 선언 심화
type World="world";
const a1: World='world';이런식으로, 직접 사용자가 type을 선언해줄 수 도 있다.
type Greeting=`hello ${World}`;
const c1:Greeting='hello world';이런식으로도 사용가능! Greeting이란 type은 이 경우, hello World가 된다!
자동완성 기능 역시 에디터 사용시 제공한다. 타입스크립트의 편한점!
let arr3: string[] = [];
let arr4: Array<string> = [];
function rest(...args: string[]):string{return args[0]}
rest('1','2','3');
이런식으로 각종 배열 선언 및 Rest 문 역시 사용 가능하다.(타입 선언만 통해서)
const enum EDirection{
Up='123',
Down='hello',
Left='2ww',
Right='22'
}const aup= EDirection.Up;
enum은 위에서 1,2,3,4 값이 선언된다. 약간 객체랑 비슷하다고 생각하자
단, enum은 JS로 변환시 사라진다.
const ODirection={
Up:0,
Down:1,
Left:2,
Right:3,} as const;이런식으로 대체도 가능하다.
function add_u(x:string | number,y:string |number):string|number{return x+y}union, 위 코드는 잘못된 코드이다. return값이 number인데도 스프링이 될 수도 있기에 잘못된 코드가 된다.
add_u(1,2);
add_u('1','2')
add_u(1,'2')
모든 경우의 수를 고려하는 union 방식으로, 위 코드를 작성하였을 경우, 이 코드에는 문제가 없다.
type Au={hello:'world'}&{zero:'cho'};
// type Au={hello:'world'}{zero:'cho'};
const at:Au={hello:'world',zero:'cho'};이런식의 intersection에서 and일때와 or일때주의하여야 한다.and일때는 모든 속성이 다 있어야 한다. or일때는 하나만 충족하면 된다!
type Animal={breath:true};
type Poyoryu=Animal&{breed:true};
type Human=Poyoryu&{think:true};const zerocho:Human={breath:true,breed:true,think:true};이런식으로 타입을 상속의 개념으로도 사용이 가능하다.
interface A3{
breath:true
}
interface B extends A3{
breed:true
}이렇게 interface에서도 상속 가능. 보통 간단하게 사용할때 타입을 사용하고,
명확한 코딩을 위해서는 인터페이스를 사용한다.
단, 명확하게 둘이 구분되어 있는것은 아니다.
또한, Interface는 중복된 여러개의 선언이 가능하다는 것도 고유의 특징이다!
