타입스크립트란?
자바스크립트의 확장판
변수의 타입을 정의해 안전하게 사용을 할 수 있음.
자바스크립트의 유연함이 버그 발생 가능성이 높아져서
https://www.naver.com/#타입을 지정하는 안정적인 타입스크립트를 개발함
타입 시스템
자바스크립트는 코드가 실행되는 도중에 결정함.(동적 타입 시스템) => 유연함
이렇게 되면 실행은 되지만 오류가 발생함 추후 오류때매 애를 먹을 수 있음
코드가 실행전에 오류가 발생해 실행되지 않는게 좋음(정적 타입 시스템)
타입스크립트는 정적+동적 타입 시스템 (점진적 타입 시스템)
정적 타입 시스템이 갖는 안정성을 가지면서 모든 변수에 타입을 지정하지 않아도
타입스크립트가 자동으로 타입을 추론해줌.
타입스크립트 동작 원리
코드 => AST(추상 문법 트리) => 타입 검사 => 자바스크립트 코드로 변환
=> AST => 바이트 코드 => 실행
타입스크립트 기본 문법
const a : number = 1;
컴파일러 옵션
include : 컴파일 하는 폴더 (src)
target : ES5,ES6, ESNext 자바스크립트 버전
module : ESNext 모듈 시스템 설정
outdir : js 파일이 생성될 위치 정하는 것
strict : 얼마나 엄격하게 타입검사를 할지
=> js에서 ts로 마이그레이션 할 시 false로 두고 작업하기도함 보통은 에러를 바로 잡기위해 true로 개발
stirctNullChecks : false 엄격하게 null 체크 안하도록 함.
타입스크립트는 전역 모듈(모두 같은공간)로 본다.
export라는 모듈 시스템 키워드를 사용하면 독립된 모듈로 취급함.
타입스크립트 기본 타입
리터럴 타입
let numA : 10 =10
let strA : 'hello' = 'hello'10이라는 값만 허용 다른값 x
제네릭
let boolArr:Array<boolean> = [true,false,true]
다차원 배열일 경우
let doubleAr:number[][] = [
[1,2,3],
[4,5],
];튜플
길이와 타입이 고정된 배열
let tup1:[number,number]= [1,2];
const users:[string,number][] =[
["홍길동",1],
["김민석",2]
];배열 메서드 push,pop 사용시 튜플 길이제한 x
객체타입
구조를 기준으로 타입을 지정(구조적 타입 시스템)
let user = {
id?:1,
name:"김민석"
}? : 옵셔널 프로퍼티(선택적)
readonly : 값 변경 x
타입 별칭
type User = {
id:number;
name:string;
nickname:string
}
인덱스 시그니처
type countryCodes ={
[key:string] : string;
}
let countryCodes ={
Korea : 'ko',
UnitedState : 'us',
UnitedKingdom :'uk'
}인덱스 시그니처 주의할 점
해당 규칙을 위반하지 않으면 통과시키니 주의해야함.
type countryCodes ={
[key:string] : string;
Korea : number
}위에 타입에서 korea의 타입과 인덱스 시그니처 타입이 다르면 문제가 생김
두개가 일치 되도록 해야함.
Enum 타입
여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입
아래 예시와 같이 역할과 같이 0,1,2가 무엇인지 헷갈릴 경우 사용됨
enum Role {
ADMIN =0, // 숫자 안쓰면 자동으로 0부터
USER =1,
GUEST =2
}
const User1 = {
name :"김민석"
role :Role.ADMIN,
}
const User2 = {
name :"홍길동"
role :Role.USER,
}
Any 타입
특정 변수의 타입을 확실하게 모를떄 사용함.
모든 타입의 변수를 할당 가능하여 치트키 같은 타입이다.
any타입은 TypeScript의 이점을 없애기 떄문에 최대한 사용하지말것
unknown 타입
any타입과 다르게 모든값을 저장 가능하지만 다른타입에 값을 넣을 수 없음.
void 타입
아무것도 없음을 의미하는 타입, 아무것도 반환하지 않는 함수에 주로 쓰임
변수에 사용하면 undefined만 값을 넣을 수 있음.
never 타입
존재하지 않는, 불가능한 타입
while문,반환이 되지 않는(종료가 되지 않는 함수)에 사용
