인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다.
코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)
타입스크립트 (Typescript)
as const;
변수를 상수처럼 쓰고 싶다.
타입스크립트 전용 문법인 as const; 를 뒤에 붙이면 된다.
let str = 'haha' as const;
let arr = [true, 2, '3'] as const; 변수에 마우스를 올렸을때
let arr:readonly [true, 2,, '3'] 이라고 뜨는데, 여기서 새로운 타입 readonly를 볼 수 있다.
as const;로 선언할 경우 let이어도 재 정의시에 에러가 난다.
그렇다면 const로 선언하면 되지 않나? 라고 하는데,
const str = 'haha' as const;
const arr = [true, 2, '3'] as const;이때 객체의 단점을 확인할 수 있다.
오브젝트 자체의 값을 변경할 수 는 없지만 오브젝트의 프로퍼티에 접근하여 값을 변경할 수 있기 때문이다.
const obj = { a : 'b' };
// (X)
obj = 'haha';
// 문제 발생
obj.a = 'a';따라서 이런 경우 as const;를 선언해주면 배열이나 객체의 내부 값들도 상수로 만들 수 있다.
const obj = { a : 'b' } as const;
객체 object 타입 선언하기
object의 타입이 많이 존재할 수 있기 때문에 타입을 단순히 object라고 선언하지 않는다.
// (X)
const obj : object = { a : 'b' };타입을 만들어서 선언해준다. 이때부터 코드가 길어져서 가독성이 안좋아진다.
const obj: {a : string } = { a : 'b' };
// (O)
obj.a = 'a';
// (X)
obj.a = 3;그리고 타입을 선언했을때 아래와 같이 선언한 a, b에 대한 값을 모두 충족시켜야 에러가 발생하지 않는다.
// (X)
const obj: { a : string, b : number } = { a : 'b' };
// (O)
const obj: { a : string, b : number } = { a : 'b', b : 3 };여기서 만약 값이 있을수도 있고 없을 수도 없다면 어떻게 할까?
왜냐하면 프로그래밍을 하다보면 나중에 값을 삽입하게 되는 경우가 있기 때문인데,
이때는 물음표를 넣어준다.
*중복코드의 느낌이 나는 경우가 생기기때문에 나중에는 인터페이스나 타입으로 빼게 된다고 한다.
const obj: { a : string, b? : number } = { a : 'b', b : 3 };
타입스크립트의 타입 enum
enum Color { Red, Green, Blue }
let c: Color.Green;js로 컴파일하게되면 아래와 같이 나온다.
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));enum은 각각의 단어에 숫자를 넣거나 반대로 넣어도 성립되게 만들어준다.
Color[0] === 'Red';
Color['Red'] === 0;
물음표의 역할
자바스크립트에서 물음표는 삼항연산자에 쓰인다.
타입스크립트에서는 옵션체이닝때 사용하는데, ?. 라는 것도 있다.
?.은 삼항연산자와 구분하기 위함이라고 한다.
const obj: { a : string, b? : number } = { a : 'b', b : 3 };
const a = abc?.name;
null과 undefined, void
자바스크립트의 null은 object인데, 이건 자바스크립트의 버그이므로 타입스크립트에서는 null의 타입은 null로 체크한다.
undefined는 undefined의 타입을 가지고 있다 void 0의 타입도 undefined이다.
const n = null;
const n = undefined;
const n = void 0;
함수에서 사용하기
함수에서 타입스크립트는 변수, 매개변수, 리턴 값에 타입을 붙일 수 있다.
// (매개변수) : 리턴 값에 대한 타입
function f(a: number, b: number): number | string {
return a + b;
}리턴 값이 없는 함수는 return undefined가 생략된 것이지만 이럴경우 타입을 void로 적으면 된다.
undefined로 작성하면 에러가 난다.
function f(a: number, b: number): void {
console.log(a, b);
}
고차함수
함수가 고차함수를 리턴하는 경우 리턴되는 값의 타입을 작성하면된다.
함수의 타입은 리턴 값의 타입 자리에 적어준다.
// 함수 자체를 타입으로 쓸때
// (c: string) => number 함수 파라미터의 타입값과 함께 리턴 값을 적어줘야한다.
function f(a: number, b: number): (c: string) => number {
return(c: string) => {
return c;
}
}
// 함수를 선언할때
function f(p: number): number{
// ....
}함수형 프로그래밍할때 고차함수를 많이 사용하는데,
이러한 경우 때문에 가독성이 점점 안좋아지는 것이다.
function add(a: number, b: number): (c: string) => (d: string) => boolean {
return (c: string) => {
return (d: string) => {
return false;
}
}
}
객체
자바스크립트는 타입이라는 개념이 없다.
따라서 오버로딩이 없다. (흉내내기일 뿐)
이때 타입스크립트는 타입이 존재하기 때문에 오버로딩이 구현된다.
// obj2의 타입
const obj2: {a: (b: number) => string} = {
a(b: number){
return 'hello';
}
}
// 매개변수가 있어도되고 없어도 될때, 오버로딩일 경우 물음표를 추가해준다.
const obj2: {a: (b?: number) => string} = {
a(b?: number){
return 'hello';
}
}
// 둘다 호출해도 에러가 안난다.
// 만약 물음표를 추가하지 않았으면 에러가 난다.
obj.a();
obj.a(3);