Today I Learned_230119
TypeScript
타입 추론
IDE는 tsc -noemit을 계속 돌리고 있음
타입을 추론해주는 역할을 계속한다
IDE에 손을 올렸을때 타입을 제대로 추론한다 → 제대로 쓴 것
- 특수한 타입 {} (null과 undefined가 아닌 모든 타입)
const z: {} = 5;
- ts가 추론해주는 타입이 있는데 이런 건 그냥 그대로 사용하면 됨. ts가 추론하지 못하는 경우에만 직접 타이핑할 것.
- 추론을 잘못했을 때 고치는 것이 낫다. 우선 ts를 믿어보자
- any로 추론할 때 → 타입을 명시해 주자
const a = 5;
const b = '3';
const b2: string = '3' // const라서 3으로 변하지 않을텐데 구태여 string으로 변환한 꼴이 되는 것
//따라서 그냥 그대로 사용하는게 좋다. '3'이라는 정확한 타입이 있는데 string이라는 더 넓은 부정확한 타입이 되는 것
const c = a + b;
//x도 number고 y도 number -> return값을 자동으로 number로 추론해 준다.
function add(x: number, y: number) { return x + y }
타입 추론을 했을 때 이렇게 any가 나오면 잘못된 것이다. 타입 추론을 했을 때 타입이 나오도록 고치자.
이렇게 나오는게 좋다!
최대한 타입스크립트가 추론해주는 것을 믿어라!
| 를 파이프라고 함 → 이렇게 되면 타입스크립트가 멍청해지는 것! 내가 원래 선언한 타입과 달라졌다. |
내가 원래 선언한 타입으로 잘 나타나면 타입 추론이 잘 된 것
타입이 들어갈 자리 명시, 타입스크립트에서 타입을 뺀 코드도 javascript에서 돌아가야 한다.
- : 뒷부분, as 뒷부분, <> 부분, interface, type, function 일부를 제외하면 자바스크립트와 동일. 제외하고 생각하는 연습을 초반에 해야 함.
- 타입, 인터페이스, 제네릭은 자바스크립트로 변환되면 사라진다. 따라서 얘네들이 없어도 잘 돌아가야 한다.
- 꼭 타입 부분을 구분하고 어디가 없어지는지 구분해야 한다.
const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };
const obj = { lat: 37.5, lon: 127.5 };
const a = document.querySelector('#root') as HTMLDivElement;
const a = document.querySelector('#root');
function add<T>(x: T, y: T): T { return x + y }
function add(x, y) { return x + y }
interface A {};
type A = {};
function add3(x: number, y:number) : number;
function add3(x, y) {
return x+y;
}
위에는 타입만 있고 아래는 선언만 있는 케이스가 존재할 수 있다.
위 코드는 아래의 js로 변환된다.
"use strict";
function add3(x, y) {
return x + y;
}
javascript로 변환될 때 어떤 부분이 사라지는지 보자!
as 키워드도 사라짐
as : 앞에 타입을 다른 타입으로 강제함
let aa = 123;
aa = 'hello' as unknown as number
"use strict";
let aa = 123;
aa = 'hello';
- 자바스크립트에 비해서 자유도가 확 줄어듦(ex: 변수에 문자열을 넣었다가 숫자로 바꾸는 등의 행동 어려워짐)
- 사실상..실무에서는 아래와 같은것을 할 일이 크게 없다..
- 생각해보면 당연히 안 할 일이므로 ts에서도 하지 않는다.
let x = 5;
x = 'hello';
- any를 최대한 쓰지 않는 것을 목표로 할 것.
- never, unknown, any 타입 주의하기. any는 최대한 피하고 쓰더라도 나중에 꼭 제대로 타이핑하기. never 좋은 설명 글
- never에서는 일반적인 타입이 올 수 없다.
//ts : 빈배열에 주의하자
try {
const array = []; // noImplicitAny가 false일 때
//const array: string = []; //이렇게 타입을 선언해줘야 한다.
array[0];
} catch(error) {
error;
}
강의에서는 array에 never 타입이 온다고 했는데, tsc 버전이 업데이트되었는지 아래와 같은 에러 메시지가 뜬다.
- Variable ‘array’ implicitly has type ‘any[]’ in some locations where its type cannot be determined.
-
Variable ‘array’ implicitly has an ‘any[]’ type.
- 최대한 ! 대신 if를 쓸 것
- !는 보장하기가 어렵다
-
타입스크립트에서 or는 (두개)가 아니라 (한개)다
const head = document.querySelector('#head')!; //얘가 무조건 존재한다고 보장. null이나 undefined가 아님을 보장하는 것
console.log(head); //head가 null이면 뻑남
//head가 없어도 false가 되니까 안정성이 생김
const head = document.querySelector('#head');
if (head) {
console.log(head);
}
- head는 html 태그에 해당
- head.innerHTML 가능 → 타입 정의가 이미 되어 있음
head는 Element가 될 수도 있고 null이 될 수도 있다
→ ts는 여러 가능성을 고려해둔다.
| !가 들어가면 | null이 빠진다. |
