[TS] 타입스크립트 기초

53717 단어 TypeSctiptTypeSctipt

1. 타입스트립트 기본

function add(num1: number, num2: number) : void {
    console.log(num1 + num2)
}

function show1 (arr: number[]) {
    arr.forEach(el => console.log(el))
}

function show2 (arr: Array<number>) {
    arr.forEach(el => console.log(el))
}

type Score = "A" | "B" | "C" | "d"

interface User {
    name : string;
    age : number;
    gender? : string; // 옵션값
    readonly birthYear : number;
    [grade:number] : Score // 타입을 지정한 스코어를 쓰겠다
}

let user : User = {
    name : "somin",
    age: 26,
    birthYear : 1996,
    1 : 'A',
}

user.gender = 'female' // 옵션값이므로 나중에 추가 가능

2. 인터페이스

interface Add {
    (num1 : number, num2: number) : number;
}

const add2 : Add = function (x, y) {
    return x + y
}

interface IsAdult {
    (age:number) : boolean
}

const a : IsAdult = (age) => {
    return age > 19;
}

a(26) // true

interface Car {
    color : string;
    wheels: number;
    start() : void;
}

class Bmw implements Car {
    color = "red";
    wheels = 4;
    start() {
        console.log("gogogo")
    }
}

class Bmw2 implements Car {
    color;
    wheels = 4;
    start() {
        console.log("gogogo")
    }

    constructor (c : string) {
        this.color = c
    }
}

const b = new Bmw2("green")

interface Benz extends Car {
    door : number,
    stop () : void
}

class benz implements Benz {
    color = "red";
    wheels = 4;
    start() {
        console.log("gogogo")
    }
    door = 5;
    stop(){
        console.log("stopstop")
    }
}

interface Toy {
    nema : string;
}

interface ToyCar extends Car, Toy {
    price : number
}

3. 함수

function hello(name? : string) { // 물음표는 옵셔널
    return `hello, ${name} || "world`
}

const result = hello()

function hello2(name = "world") { // 물음표는 옵셔널
    return `hello, ${name}`
}

function add3(...nums: number[]) {
    return nums.reduce((result, num) => result + num, 0)
}

interface User1 {
    name : string;
}

const Sam: User1 = {
    name : 'sam'
}

function showName(this:User1) {
    console.log(this.name)
}

const a1 = showName.bind(Sam);
a1();

interface User2 {
    name: string;
    age: number;
}

// 전달받은 매개변수의 타입에 따라 결과가 달라지는 경우 오버로드 사용(위 2개)
function join(name: string, age: number ) : User2
function join(name: string, age: string ) : string

function join(name: string, age: number | string): User2 | string{
    if(typeof age === "number") {
        return {
            name,
            age,
        }
    } else {
        return "나이는 숫자로 입력해 주세요"
    }
}

const sam: User2 = join("sam", 26)
const jane: string = join("sam", "26")

4. 리터럴, 유니온(|), 교차 타입


// 리터럴, 유니온(|) 타입
const userName1 = "bob"
let userName2 = "tom"

type Job = "police" | "developer" | "teacher";

interface User3 {
    name : string;
    job : Job;
}

const user4 : User3 = {
    name : "bob",
    job : "police",
}

interface Computer {
    name: "computer";
    color : string;
    start() : void;
}

interface Mobile {
    name: "mobile";
    color : string;
    call() : void;
}

const getGift = (gift: Computer | Mobile) => {
    console.log(gift.color);

    if(gift.name === "computer") {
        gift.start()
    } else {
        gift.call()
    }
}

// 교차 타입 : 여러 타입을 합쳐서 사용
interface Car2 {
    name : string;
    start() : void;
}

interface Toy2 {
    name : string;
    color : string;
    price : number;
}

const toyCar : Toy2 & Car2 = {
    name : "타요",
    start(){ 
        console.log("goooo")
    },
    color: "blue",
    price: 20000,
}

6. 클래스

class Car {
    // color : string;
    // 위에처럼 명시해주지 않아도 아래처럼 public이나 readonly를 적어줄 수 있음
    constructor( color : string) {
        this.color = color;
    }
    
    static start() {
        console.log("go")
    }
}

// 접근 제한자
// public(디폴트값) : 자식 클래스(class Bmw extends Car)에서는 접근 가능, 클래스 인스턴스(new Bmw)에서는 참조 가능
// private(#을 붙여 표현하기도) : 자식 클래스에서는 접근 불가, 해당 클래스 내부에서만 접근 가능
// protected : 자식 클래스에서는 접근 가능하나 클래스 인스턴스에서는 참조 불가
// readonly : 읽기 전용 프로퍼티
// static으로 선언된 프로퍼티의 경우 this로 접근하는 것이 아닌 클래스 명으로 접근헤야 함
// 추상 클래스 : abstrat 를 적어줌 > new로 클래스 인스턴스를 만들어낼 수 없음
// 추상 클래스 내부에 추상 메소드는 상속받은 쪽에서 구체적 구현을 해줘야 함

7. 제네릭

// 제네릭 미사용
function getSize(arr : number[] | string[]) : number {
    return arr.length
}

const arr1 = [1, 2, 3]
getSize(arr1)

const arr2 = ["a", "b", "c"]
getSize(arr2)

// 제네릭 사용 
// <T> : 타입 파라미터 (일반적으로 T를 쓰는 것일 뿐)
function getSize1<T>(arr : T[]) : number {
    return arr.length
}

getSize1<number>(arr1)

getSize1<string>(arr2)

interface Phone<T> {
    name: string;
    price: number;
    option: T;
}

const p1: Phone<object> = {
    name: "13",
    price: 1000000,
    option : {
        color : "white",
        coupon : false,
    }
}

const p2: Phone<string> = {
    name: "12",
    price: 800000,
    option : "old",
}

interface A {
    name : string;
    age : number;
}

interface B {
    name : string;
    color : string;
}

interface C {
    price : number;
}

const aaa : A = {name: "aaa", age: 10}
const bbb : B = {name: "aaa", color: "red"}
const ccc : C = { price: 10}

function showName3 <T extends {name : string}>(data:T): string {
    return data.name
}

showName3(aaa) // "aaa" 
showName3(bbb) // "bbb"
// showName3(ccc) : 이름이 없어 에러

8. 유틸리티 타입

// 유틸리티 타입
interface User5 {
    id: number;
    name: string;
    age: number;
    gender?: "m" | "f"
}

// keyof
type UserKey = keyof User5; // "id" | "name" | "age" | "gender"
const uk:UserKey = "id"

// Partial<T> : 프로퍼티를 모두 옵셔널로 바꿔줌
// interface User5 {
//     id?: number;
//     name?: string;
//     age?: number;
//     gender?: "m" | "f"
// }
let admin:Partial<User5> = {
    id: 1,
    name: "kkakka"
}

// Required<T> : 프로퍼티를 모두 필수로 바꿔줌
let admin2:Required<User5> = {
    id: 1,
    age: 26,
    name: "kkakka",
    gender: "f"
}

// Readonly<T> : 프로퍼티를 읽기 전용으로 바꿔줌(값을 바꿀 수 없음)

// Record<K, T> 
interface Score2 {
    "1": "A" | "B" | "C";
    "2": "A" | "B" | "C";
    "3": "A" | "B" | "C";
}
const score1: Score2 = {
    1: "A",
    2: "B",
    3: "C",
}

const score2: Record<"1"|"2"|"3", "A" | "B" | "C"> = {
    1: "A",
    2: "B",
    3: "C",
}

type Grade3 = "1"|"2"|"3"
type Score3 = "A" | "B" | "C"
const score3: Record<Grade3, Score3> = {
    1: "A",
    2: "B",
    3: "C",
}

interface Cat {
    id: number;
    name: string;
    age: number;
}

function isValid(cat: Cat) {
    const result: Record<keyof Cat, boolean> = {
        id: cat.id > 0,
        name: cat.name !== "",
        age: cat.age > 0,
    }
    return result
}

// Pick<T, K>
interface Userr {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f"
}

// Pick : 유저r에서 id와 name만을 가져와 사용
const pAdminn: Pick<Userr, "id" | "name"> = {
    id: 0,
    name: "kkaka"
}

// Omit<T, K> : 특정 프로퍼티를 생략하고 쓸 수 있음
const oAdmin: Omit<Userr, "age" | "gender"> = {
    id: 0,
    name: "kkaka"
}

// Exclude<T1, T2> : 타입1에서 타입2를 제외하고 쓸 수 있음(프로퍼티 생략 X)
type T1 = string | number;
type T2 = Exclude<T1, number>

// NonNullable<Type> : null이나 undefinde를 제외
type T3 = string | void | null | undefined
type T4 = NonNullable<T3>

좋은 웹페이지 즐겨찾기