23/12/11 TIL __ TypeScript

 

 

 

타입스크립트에 대해 강의들은 내용을 정리해 보려고 한다. 

 

 

• 타입스크립트 는 최종적으로 자바스크립트로 변환된다.
• 타입스크립트 는 언어이자 컴파일러이다. ts를 js로!
• 결과물 실행은 결국 js로 변환해서 실행해야만 한다. 
• 타입검사는 해주지만 타입 에러가 난 상태로 컴파일 하면 그대로 컴파일이 된다.

 

타입스크립트 예시 기본

const a: number = 7;
const b: string = "5";
const c: boolean = true;
const d: undefined = undefined;
const e: null = null;
const f: any = true; //모든 타입이 다되는애. 근데 이거 쓰면 타입스크립트가 아니게 됨.

 

 

함수의 타입 지정 예시

//이런식으로 다양하게 타입 지정을 할 수 있다.
function add(x: number, y: number): number {
  return x + y;
}

const add2: (x: number, y: number) => number = (x, y) => x + y;

type Add3 = (x: number, y: number) => number;
const add3: Add3 = (x, y) => x + y;

interface Add4 {
  (x: number, y: number): number;
}
const add4: Add4 = (x, y) => x + y;

 

 

객체, 배열의 타입지정 예시

//객체 타입 지정
const obj: { lat: number; lon: number } = { lat: 34, lon: 123 };

//배열 타입 지정
const arr: string[] = ["123", "456"];
const arr2: number[] = [123, 3445];
const arr3: Array<number> = [123, 3445]; //이 <> 제네릭 이라는건데 일단 알아만 두기.
const tuple: [string, number] = ["1", 1];

 

 

 

튜플

//튜플: 길이가 고정된 배열._ 각각 타입 지정해서 적어줘야함.
const arr4: [number, number, string] = [123, 2, "dh"];
tuple[2] = "hello"; //얘는 안됨
tuple.push("hello"); //얘는 됨. 이상하자나? 이건 사람이 판별해야함.

 

 

 

enum

//enum(이넘) 타입중 하나.__ 자바스크립트로 변환하면 z=0만 남음__ 이런게 있다 정도로 알아두기.
// 보통 0,1,2 이런 순서로 진행되며, 지정하면 지정한 값대로 진행된다.문자열도 됨.
//언제쓰냐면 여러개 변수를 하나의 그룹으로 묶고싶을때 사용. 근데 객체도 있으니까.

//자바스크립트로 변환시 안남아 있게 할때 사용
const enum EDirection {
  Up, //0
  Down, //1
  Left, //2
  Right, //3
}

//자바스크립트로 변환시 남아 있게 할때 사용
const ODirection = {
  Up: 3,
  Down: 5,
  Left: 7,
  Right: 8,
} as const; 
//as const는 자바스크립트로 변환되어도 이 값들을 상수로 그대로 쓰겠다는 말이다. 심지어 리드온리 됨.
//만약 as const 빼면, 타입스크립트가 타입을 number로 추론함. 그럼 안되니까.

function walk(dir: EDirection) {}
//여기서 dir은 enum의 값들 4개중에 하나여야 한다는 말임.

//만약 enum을 안쓴다면 ODirection과 같이 obj 형태로 사용한다면 아래와 같이 사용할 수 있다.
type Direction = (typeof ODirection)[keyof typeof ODirection]; //값을 타입으로 쓰고싶을때 typeof붙여주는거임.
function run(dir: Direction) {}

//좀더 살펴보자면
const ob = { a: "123", b: "hello", c: "world" } as const;
// type Key = keyof obj; //___ (x)//자바스크립트 값은 타입으로 사용할 수 없기 때문에 typeof를 붙여줘야 한다.
type Key = keyof typeof ob; //___이렇게 하면 객체의 키들만 다 가져오고 싶다는 거임.
type Key2 = (typeof ob)[keyof typeof ob]; //이렇게 하면 객체의 값들만 다 가져오고 싶다는 거임.
const z = EDirection.Up;

 

 

 

변하지 않을것에는 타입을 값으로 주기

const o: boolean = true;
// 이렇게 적는다고 해보자. 그럼 o는 평생 트루이다.
// 그러니까 굳이 불린이라고 적지안고 타입은 최대한 정확하게 적자.

const o2: true = true;


//단 타입이 any인 경우에는 적어야함(절태 피해야 할 타입_자바스크립트랑 다를게 없으므로)
function add5(x: number, y: number) {
  return x + y;
}
const result = add5(1, 2);

//이렇게도 쓸수 있다고 함. 알아만 두기.
// function add10(x: number, y: number): number;
// function add10(x, y) {
//   return x + y;
// }