Typescript 맛보기

rabyeoljji·2024년 5월 9일

typescript 개발공부 타입스크립트 프론트엔드 프론트엔드개발자 프론트엔드공부

TypeScript (타입스크립트)

목록 보기

1/5

TypeScript

JavaScript에 type이 더해진 형태

어떤 변수에 해당 변수가 담을 수 있는 타입이나, 함수가 인자로 받을 수 있는 타입을

명시해주는 기능을 할 수 있는 도구.

정확하게는 일종의 컴파일 언어로서 TypeScirpt로 작성하면 브라우저에서 읽히기 위해 JavaScript로 컴파일 과정을 거치게 되는데, 이 때 이런저런 오류들을 점검한다.

JavaScript와 TypeScript의 차이점?

// javascript
function add (a, b) {
	return a + b;
}

const result = add('5', '3');
console.log(result); // '53'

⇒ 실행은 되지만 나중에 코드를 수정해야할 일이 생기면 오류를 찾기 힘들어짐

⇒ 나중에 이 함수를 사용하려고 할 때 어떤 타입의 값을 넣어야할지 예상하기 힘들어짐

// typescript
function add (a: number, b: number) {
	return a + b;
}

const result = add('5', '3');
console.log(result); // error : it is not type of number

⇒ 이렇게 미리 에러를 발생시켜 런타임 에러를 방지할 수 있음

기본 사용법

변수나 함수 옆에 : Type 이런식으로 작성한다.

// 변수 옆에 작성 시 : 변수의 타입 지정
const isBoolean: boolean = false

// 함수 옆에 작성 시 : return 값 타입 지정
function calc(): number {
	// logic
}

TypeScript에서 사용할 수 있는 타입

Boolean / Number / String / Array / Tuple / Enum / any / Void / undefined / null / never / Object

// 1. Boolean
const isBoolean: boolean = false

// 2. Number
const num: number = 23

// 3. String
const str: string = '123'

// 4. Array
const list: number[] = [1,2,3]
const stringList: string[] = ['1','2','3']

// 5. Tuple (요소의 타입이나 개수가 고정된 배열)
const tupleList: [string, number] = ["hello", 1]
    // a에는 2개의 요소만 넣을 수 있고, 각각은 string, number순서이다
console.log(tupleList[0])
console.log(tupleList[0].substring(1))
console.log(tupleList[1].substring(1))
// error : Property 'substring' does not exist on type 'number'.

// 6. Enum (일종의 custom type : 아래처럼 작성하면 Color타입을 만든 것이고,
// Color 타입을 지정한 변수에는 Red, Yellow, Blue라는 값밖에 사용하지 못한다는 뜻이다.)
enum Color {
    Red,
    Yello = 5,
    Blue
}
/* in JS 로직
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Yello"] = 5] = "Yello";
    Color[Color["Blue"] = 6] = "Blue";
})(Color || (Color = {}));
*/

const color: Color = Color.Blue // 이런식으로 작성

// 7. Any
// (말 그대로 type에 구애받지 않음, 임시적으로 타입을 지정하지 않고싶을 때)
// * 잦은 사용은 추천하지 않음
const anyTypeA: any = 4
const anyTypeB: any = 'string'

// 8. Void (어떤 타입의 값 사용도 금지되는 타입)
// = 즉, 어떤 값도 나오지 않는다. (보통 값을 return하지 않는 함수를 정의할 때 사용)
function foo(): void {
    console.log('hello')
    const hello = 'hello'

    return hello; // error : Type 'string' is not assignable to type 'void'
}

// 9. undefined (값이 아직 할당되지 않은 상태의 타입)
const init1: number = undefined; // number와 undefined는 다른 타입이기 때문에 에러 발생
    // error : Type 'undefined' is not assignable to type 'number'.
const init2: number | undefined = undefined
    // 지금은 undefined이지만 나중에 number타입의 값을 받을거다

// 10. null (값을 비어있는 값으로 할당한 상태의 타입)
const nullValue1: null = null;
const nullValue2: number = null;
    // error : Type 'null' is not assignable to type 'number'.
const nullValue3: number | null = null;

// 11. never (절대 발생할 수 없는 타입 - 일종의 상태값)
// 보통은 어떤 코드의 타입상태가 never로 나오는 형식, never타입을 지정해서 사용하지는 않음
function error(): never {
    while (true) { // 무한루프
        console.log('hello');
    }
}
// = 이 함수는 절대 return을 하지 않는 함수이다.

// 12. Object
const obj: object = {a : "hello"}
declare function add(a: object | null): void

add({aa: 10})
add(5)
// error: Argument of type 'number' is not assignable to parameter of type 'object'.

함수 타입 작성

type CalcFn = (a: number, b:number) => number;

// 이렇게 함수명 바로 뒤에 :과 함께 타입을 작성해주면 매개변수와 return타입을
// 따로 작성해주지 않아도 된다.
const sum:CalcFn = (a, b) => {
	 return a + b;
}

나머지 매개변수 (Rest Parameter)

매개변수의 개수가 가변적일 때 사용할 수 있는 타입 정의 방법

몇 개가 됐든 매개변수들을 배열에 담아 함수 내부에서 사용할 수 있게끔 해줌

(주의 : 매개변수들이 여러 종류의 타입이라면 사용하지 않는 걸 추천 - 유니언으로 지정해줘야 함)

const func = (...rest: number[]) => {
  console.log(rest);
}

func(1,2,3) // [1, 2, 3]
func(1,2,3,4) // [1, 2, 3, 4]

유니언 타입 / 교차 타입 ( | / & )

- 유니언 타입 ( | )

: 자바스크립트의 OR과 같은 의미 ( 둘 중에 한 가지 타입에 해당한다는 뜻)

- 교차 타입 ( & )

보통 객체 타입에서 사용할 수 있는 타입

: 언어적 의미로 ‘그리고’와 같은 의미, 확장의 의미

type Person = {
  name: string
  age: number
}
type Student = Person & { // 이런식으로
  school: string
}

const Nana: Student = {
  name: "Nana",
  age: 16,
  school: "Hansol"
}