기본 지식
1. typescript는 최종적으로 javascript로 변환된다. 순전한 typescript 코드를 돌릴 수 있는 것은 deno이나 대중화되지가 않았음. 브라우저, 노드는 모두 js 파일을 실행한다.
2. typescript는 언어이자 컴파일러(tsc)이다. 컴파일러는 ts 코드를 js로 바꿔준다.
3. tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야한다.
- tsconfi.json이 핵심 파일. 타입스크립트 컴파일러가 보는 가장 핵심적인 파일
4. 단순히 타입 검사만 하고싶다면 tsc --noEmit 하면 된다.
- typescript는 타입 실패를 해도 변환은 가능하다. 타입 검사는 강제가 아니지만 결과적으로는 에러가 없는 typescript 코드를 짜야한다.
5. tsconfig.json에서 그냥 esModuleInterop: true, strict: true 두 개만 주로 켜놓는 편. strict: true가 핵심임.
6. ts 파일을 실행하는 게 아니라 결과물인 js를 실행해야 한다.
7. 에디터가 필수가 됨. VS Code나 웹스톰 반드시 필요. 메모장으로 코딩 불가능한 지경에 이름.
실습
npm init -y => package.json 파일 생성
해당 폴더가 노트 프로젝트가 된다.
package.json: Node 프로젝트의 설정들을 다 모아둔 파일
npm: 노드의 프로그램들을 모아둔 저장소
1. 함수 타입핑
타입 자리가 없어도 자바스크립트가 되어야 한다!
// 1. function(){}
function add(x: number, y: number): number {
return x + y;
}
// 2-1. ()=>{}
const add: (x: number, y: number) => number = (x, y) => {
return x + y;
};
// 2-2. ()=>{}
const add = (x: number, y: number): number => {
return x + y;
};
// 3. interface
interface Add {
(x: number, y: number): number;
}
const add: Add = (x, y) => x + y;
// 4. type
type Add = (x: number, y: number) => number;
const add: Add = (x, y) => x + y;
// 5. 함수 두 번 선언
function add(x:number, y:number):number;
function add(x,y){
return x+y;
}
2. 배열, 객체 타이핑
const arr: string[] = ["1", "2"];
const arr2: Array<number> = [123, 456];
const arr3: [number, number, string] = [3, 4, "tttt"];
const obj: { lat: number; lon: number } = { lat: 37.5, lon: 127.5 };❓튜플은 길이와 각 요소마다의 타입이 고정된 배열
⚠️ const a : string = '5' 는 문제가 없어 보이지만 타입스크립트의 관점에서 보면 문제가 있는 코드이다.
'5'는 상수인 문자열이다. 그럼 a는 평생 5다. 그런데 타입은 string으로 선언했으니 타입이 더부정확해졌다.
그냥 const a = '5' 또는 const a: '5' = '5' 가 더 정확한 표현 방법이다.
3. 기타 타이핑
// as
let aa = 123;
aa = "hello" as unknown as number;
//!
const head: Element | null = document.querySelector("#head");
if (head) {
head.innerHTML = "hello world";
}
const head = document.querySelector("#head")!;❓ as: '컴파일' 단계에서 타입 검사를 할 때 타입스크립트가 감지하지 못하는 애매한 타입 요소들을 직접 명시해주는 키워드
❓ !: 이 값은 절대 null/undefined가 아닐 것"이라고 TypeScript에게 알려주는 것
- 런타임에서는 아무런 영향이 없다. 단지 타입 체커를 위한 것.
- 잘못 사용하면 런타임 에러가 발생할 수 있으므로 확실할 때만 사용.
- 가능하면 optional chaining(?.)이나 타입 가드를 사용하는 것이 더 안전하다.