타입스크립트 기초문법 올인원
기본원칙: 타입스크립트는 자바스크립트로 변환되어야 한다. 타입스크립트는 에러 메세지가 정말 친절하다. (에러메세지를 꼼꼼하게 읽자.)
타입스크립트 프로젝트를 시작하기 위해선 반드시 package.json, tsconfig.json 파일을 만들고 시작해야한다.
타입스크립트로 작성한 코드를 런타임 환경(브라우저, 노드)에서 실행하기 위해선 자바스크립트로 변환해야한다. 이때, tsc 컴파일러를 사용할 수 있다.
터미널에서 tsc --noEmit을 바로 치면 인식을 하지 못한다.
따라서 노드를 설치해 주어야한다.
npm init -y 명령어를 통해 해당 폴더를 노드 프로젝트로 만들어준다.
// 터미널 열기 단축키: control + `
// 폴더 안에서 package.json 파일 생성하기 (노드 프로젝트의 설정들을 다 모아둔 파일)
npm init -y
노드 프로젝트에선 npm 명령어들의 사용이 가능해진다.
// 타입스크립트 설치
npm i typescript
// 앞에 npx를 붙여서 tsc를 사용해준다.
npx tsc
// tsconfig.json 파일 생성하기
npx tsc --init
tsconfig.json 파일안에서 수정해준다.
// 아래의 설정을 켜두어야 타입스크립트와 자바스크립트를 동시에 쓸 수 있다.
"allowJs": true
// 절대 strict를 false로 하지않는다. (타입스크립트를 사용하는 의미가 줄어든다.)
"strict": true,
// ts코드를 es2016코드로 바꿔준다. (최신 자바스크립트 코드)
// "target": "ES5", 이런식으로 하면 인터넷 익스플로우에서도 돌아가는 코드로 변환된다. (옛 자바스크립트 문법)
"target": "es2016",
// 어떤 모듈시스템을 쓸건지 설정해줄 수 있다.
// "module": "ES2022", 또는 "module": "ES2015", 둘 차이가 없다. (최신 모듈 시스템 쓰고싶으면 이렇게 적자.)
"module": "commonjs", // 노드 모듈시스템 쓰고싶을땐 commonjs 쓰면된다.
// 이 옵션은 무조건 true로 해두는게 좋다.
// 타입스크립트에서는 모듈시스템이 있어서 다른 파일을 import해올 수 가 있는데 윈도우에서는 대소문자 구분을 잘안한다.
// 리눅스나 맥에선 대소문자가 중요해서 파일을 찾지못한다.
// 배포시 대소문자때문에 실수를 하는 경우가 많기때문에 옵션으로 대소문자 꼭 지켜서 import할 수 있게 만들어둔 설정이다.
"forceConsistentCasingInFileNames": true,
// 라이브러리 체킹을 건너뛰라는 설정이다.
// d.ts라는 파일이 많기때문에 실제로 쓰는 타입만 검사하도록 하는 설정이다.
"skipLibCheck": true
보통 아래의 두개만 주로 필수로 켜둔다.
"esModuleInterop": true,
"strict": true, // 얘가 핵심임
타입검사하는 기능과 코드변환하는 기능은 별개로 돌아간다.
// 아래의 명령어를 사용하면 타입검사를 실행할 수 있다. (타입검사하는 기능)
npx tsc --noEmit
// ts파일을 자바스크립트로 바꾸는 명령어이다. (에러가 있지만 자바스크립트로 변경은 됨) (코드변환하는 기능)
npx tsc
자바스크립트의 변수, 매개변수, 리턴값에 타입을 붙이면 타입스크립트가 된다. 타입스크립트에서 any라는 타입을 전부 없애면 완벽하게 자바스크립트에서 타입스크립트로 전환해낸 것이 된다.
보통 변수 뒤에 :콜론 을 붙이고 타입을 지정해준다. (주의할 점은 소문자로 통일한다.)
const a: string = '5';
const b: number = 5;
const c: boolean = true;
const d: undefined = undefined;
const e: null = null;
const f: symbol = Symbol.for('abc');
const g: bigint = 1000000n;
const h: any = '123'; // any는 말그대로 아무거나 다 넣을수있다. 모든타입이 다 되는데 any를 쓰면 타입스크립트를 쓰는 의미가 없다.
// 타입은 항상 최대한 정확하게 잡는것이 좋다. const는 말그대로 바뀔일이 없다.
const i: true = true; // 값을 고정해버린것 const i:5 = 5; 이런식으로 숫자를 아예 고정시킬수도 있다. (타입자리에 고정된 원시값 넣기)
// 복잡한 함수나 배열도 타이핑하는 방법이 따로 있다.
// 함수의 타이핑(타입을 붙여주는 행위를 타이핑한다고 한다.)
// 함수는 타이핑하는 방법이 대표적으로 3가지 방법이 있다. (일반함수/화살표함수(인라인), 타입알리아스, 인터페이스)
// 매개변수 뒤에도 타입을 붙여주고, 리턴값 자리에도 타입을 붙여준다.
// 일반함수에서는 리턴값이 콜론 뒤에 나온다.
function add (x: number, y: number): number {
return x + y;
};
// 화살표 함수의 타이핑 - 인라인 형식으로 타이핑
// 화살표 함수에서는 리턴값이 화살표 뒤에 나온다.
const add2: (x: number, y:number) => number = (x, y) => {
x + y;
};
// 타입으로 타입을 선언하는 방식- 타입 알리어스(type alias)
// 타입을 별칭으로 빼서 사용할 수 있다. (타입자리에 타입 알리어스 붙이기)
type Add = (x: number, y: number) => number;
const add3: Add = (x, y) => x + y;
// 인터페이스 방식으로 타입선언하기 (타입스크립트의 핵심)
// 인터페이스 통해서 함수 만들기
// 타입스크립트 심화이지만 인터페이스로 사용하는 방식이 흔치는 않을것이다.
interface Add2 () {
(x: number, y:number) : number;
};
const add4: Add2 = (x, y) => x + y;
// 객체의 타이핑
// 변수에 타입을 붙여주면 된다.
const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };
// 배열의 타이핑
// 뒤에 배열표시 [] 를 붙여주면된다.
const arr: string[] = ['123', '456'];
const arr2: number[] = [123, 456];
// 배열은 다른 표기법이 있다. - 꺽쇠를 쓰는걸 제너릭이라고 부른다.
// 제너릭도 타입스크립트의 핵심이다.(근데 조금 어렵다.)
const arr3: Array<number> = [123, 456];
// 튜플이라는 것도 있다. - 길이가 고정된 배열
// 배열을 만들어서 그안에 하나하나 길이에 맞게 타이핑해준다. (개수도 맞춰줘야한다.)
const arr4: [number, number, string] = [1, 2, '3'];타입스크립트가 정확하게 타입을 추론해줬다면 건들일 필요가 없다. 최대한 타입스크립트가 추론해주는것을 믿되, any로 추론이 나온다면 타입을 명확하게 해줘야한다.
왠만하면 타입추론 잘되면 믿고 맡겨라, 그리고 타입은 좁게 정해라.
const a = 5; // a에 마우스를 올려보면 a = 5 라고 정확하게 추론하고 있다.
// 굳이 const a: number = 5; 라고 5라고 추론한 것을 number로 바꾸지 않아도 된다는 소리임.
// 만약 타입스크립트가 추론을 잘못했다면 그때 타입을 고친다. (또는 타입스크립트가 any라는 타입으로 코드를 추론한다 하는 경우)
function add (x: number, y) { return x + y };
const result = add(1, 2); // result의 타입추론이 any가 나온다. 이런경우 타입을 명확히 바꿔줘야한다.
// function add (x: number, y:number) : number { return x + y };
const arr = [123, 456, 'hello']; // 타입추론이 const arr: (string | number)[] 이 나온다.
// | 는 파이프라고 하는데, 이렇게하면 타입스크립트가 멍청한 것 이다. 이런경우 직접 타이핑을 해주자.
// const arr: [number, number, string] = [123, 456, 'hello'];
// 이런식으로 타입부분이 길어지면 나중에 읽기 어려워진다. (타입하나가 여러줄일 경우)
// 해결방법은 있다.
const obj: {
lat: number,
lon: number
} = {
lat: 37.5,
lon: 127.5
};타입스크립트가 자바스크립트로 변환 시에 아래와 같은 콜론 뒷부분, 타입알리어스, 인터페이스, 제네릭, 타입만 선언한 코드나 as 같은 부분들은 전부 다 사라진다.
그래서 항상 얘네들 없이도 코드가 돌아가게 만들어야한다.
const a: string = 'a';
type Add = () => number;
interface Minus {};
Array<string>// 이런 방식도 있다. 위에는 타입이고, 아래는 실제 코드
// 같은 함수가 두번 선언되있으면 보통 에러지만, 위에는 타입만 나와있고 아래는 선언되어있는 케이스가 존재할 수 있다.
function add(x:number, y:number): number;
function add(x, y) {
return x + y;
};
// as 도 사라진다.
let a = 123;
// 문자열 형식을 억지로 바꿀수있다. 그러면 에러가 사라진다.
// 앞의 타입을 강제로 다른애로 바꿔주는 이 as도 사라진다.
a = 'hello' as unknown as number;사라지는 부분을 지웠을때 올바른 자바스크립트 코드여야 하기 때문에 무엇이 사라지는지 알아둬야 한다.