Typescript for Beginners

kiki97 ㅣ 2023. 12. 9. 00:14

Typescript

Strongly typed programming
컴파일 시 javascript로 변환됨
에러가 발생 → 컴파일 X

Javascript

매우 유연해서 에러를 잘 보여주지 않음

🚫 숫자 배열 + false → 배열이 사라지고 string으로 바뀜
🚫 함수의 인자에 데이터타입이 잘못 들어가도 실행됨
🚫 const a = { a: "A" }; a.hello(); 실행 시 에러 발생
(런타임에러, 실행할때 발생하는 에러) → 실행 전에 에러 감지 불가

타입스크립트를 사용하는이유

타입 안정성은 타입스크립트가 제공하는 가장 큰 장점이다.
타입 안정성 덕분에 버그가 엄청 줄어든다.

Type 시스템

명시적 정의(변수 선언 시 타입 정의)
let a: boolean = "x" → ❌ boolean 타입에 string타입 할당 불가 알림

변수만 생성(타입 추론)
let b = "hello" → b가 string 타입이라고 추론
b = 1 → ❌ string 타입에 number타입 할당 불가 알림

Type Alias(별칭) 타입

Type Aliases을 사용하여 객체 타입뿐만 아니라 모든 이름에 타입을 지정할 수 있습니다.

type Player = {
    readonly name: string, // ❗ readonly가 있으면 최초 선언 후 수정 불가 '읽기전용'
    age?:number //number | undefine
}

argument 역시 타입을 지정할 수 있다. `(parameter : type)`
함수의 return에도 타입을 지정할 수 있다.
function (parameter : type) : type {
    return
}

✅ Tuple
정해진 개수와 순서에맞는 타입의 값을 요구할때 유용하다.
const player: [string, number, boolean] = ["nico", 1, true]
player[0] = 1 // 바꿀수없다. string으로 지정됨

✅ any, unknown, void, never
any: 아무 타입. 타입체크를 '비활성화' 시켜버린다.
unknown : 변수의 타입을 미리 알지 못할때 사용할때마다 변수타입 지정을 요구한다.
void : 값을 반환하지 않는 함수에서 반환 자료형
never : 함수가 절대 return 하지 않는다.

❗ ?를 :앞에 붙이면 optional
❗ readonly가 있으면 최초 선언 후 수정 불가 ⇒ immutability(불변성) 부여 but, javascript에서는 그냥 배열

Call Signatures

함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다.

* React에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계 가능!

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

//화살표 함수 중괄호 주의사항
const add:Add = (a,b) => a+b
function add(a, b) {
	return (a+b)
}

const add:Add = (a,b) => {a+b}
function add(a, b) {
	a+b;
}

화살표 함수에서 {}를 생략하면 return이 생략된 것
즉 a + b 와 { return a+b } 는 같은 뜻
{a+b}라고 하면 아무것도 리턴하지 않기 때문에 에러남

Overloading

동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만드는 것을 말합니다.

TypeScript에서는 오버로드 signatures을 작성하여 "다양한 방식으로 호출할 수 있는 함수"를 지정할 수 있습니다.

type Add = {
    (a: number, b: number): number,
    (a: number, b: string): number
}

const add: Add = (a, b) => {
    if (typeof b === "string") return a;
    return a + b;
}

매개변수의 데이터 타입이 다른 경우 예외 처리

type Add2 = {
    (a: number, b: number): number,
    (a: number, b: number, c: number): number
}

const add2: Add2 = (a, b, c?: number) => {
    if (c) return a + b + c;
    return a + b;
}

polymorphism

인자들과 반환값에 대하여 형태(타입)에 따라 그에 상응하는 형태(타입)를 갖을 수 있다.

any와의 차이점은 해당 타입에 대한 정보를 잃지 않는다.
any는 any로서 밖에 알 수 없지만 generics는 타입 정보를 알 수 있다.

type SuperPrint={
    <T>(arr:T[]):T;
}

const superPrint:SuperPrint=(arr)=>{
    return arr[0]
}

const a=superPrint([1,2,3])
const b=superPrint([true,false,true])
const c=superPrint(["a","b"])
const d=superPrint([1,2,"a","b",true])

Generics

변수나 인수에 타입을 정해주는 Concrete같이 딱딱한 기법과 달리 어떤 타입을 쓸지 정해주지 않고 그 타입에 대해 어떤 변수를 넣어주냐에 따라 결정되는 유연한 기법이다.

function identity< Type >(arg: Type): Type {
    return arg;
}

const identity=< Type extends {} >(arg: Type):Type => {
    return arg;
}

type Player<T> = {
    name: string,
    extraInfo: T
};

const player2: Player<object> = {
    name: "Yee",
    extraInfo: {
        age: 23,
        stature: 170,
        weight: 60
    }
};

Classes

추상(abstract) 클래스
추상 클래스는 오직 다른 클래스가 상속받을 수 있는 클래스이다.
하지만 직접 새로운 인스턴스를 만들 수는 없다.

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        protected nickname: string,
    ) {

    }

    abstract getNickName(): void
     // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현(implement)해야하는 메서드이다.
}

class Player extends User {
    getNickName() {
        return `nickname: ${this.nickname}`
    }
}

const lsc: Player = new Player("lee", "sc", "lsc");

구분	선언한 클래스 내	상속받은 클래스 내	인스턴스
private	⭕	❌	❌
protected	⭕	⭕	❌
public	⭕	⭕	⭕

type Team = "read"| "blue" | "yellow" // type에 특정 값을 가지도록 제한

type Words = { // 해시
    [key: string]: (string | string[])
    //객체의 property에 대해 모르지만 타입만을 알 때 유용하다
}
class Dict {
    private words: Words
    constructor() {
    this.words = {}
}


// 각각의 단어에 대한 클래스
class Word {
    constructor(
        public readonly term: string, //readonly '읽기전용, 수정불가'
        public def: string
    ) {}
}

Static Members

static Methods는 클래스를 생성안해도 사용이 가능!

class MyClass {
    static x = 0;
    
    static printX() {
    	console.log(MyClass.x);
    }
}

Interfaces

객체의 모양을 특정해주기 위해 사용합니다.

interface Hello = string; // 오류, 인터페이스는 오로지 오브젝트

type Hello = string // type은 가능, 비슷한 type이 기능이 더 많다

클래스는 여러 인터페이스를 구현할 수도 있다

tsconfig.json설정

디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 TypeScript 프로젝트의 루트임을 나타냅니다. tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.

{
    "include": ["src"],
    "compilerOptions": {
        "outDir": "build",
        "target": "ES6",
        "moduleResolution": "node",
        "lib": ["ES6","DOM"] // 타입스크립트에게 어떤 환경에서 코드를 실행하는 지를 지정할 수 있습니다.
                             //(target 런타임 환경이 무엇인지를 지정합니다.)
    }
}

타입스크립트 코드 테스트

https://www.typescriptlang.org/play

출처

노마드 코더 타입스크립트로 블록체인 만들기

kiki-dev