분류 javascript

TypeScript 기본 사항-확실한 안내서

컨텐츠 정보

  • 조회 199 (작성일 )

본문

이 기사에서는 자바 스크립트 응용 프로그램을 보다 잘 개발하는 데 도움이 되는 몇 가지 기본적인 유형 스크립트를 배웁니다. TypeScript 기본 사항-확실한 안내서


https://dev.to/ganeshmani/typescript-basics-a-definitive-guide-57j 


TypeScript 란 무엇이며 왜 필요한가요? 


따라서 typescript의 개념을 살펴보기 전에. 우리는 typescript가 무엇이고 왜 필요한지 알아야 합니다.


첫째, TypeScript는 선택적 정적 입력, 클래스 및 인터페이스를 주로 제공하는 JavaScript의 상위 집합입니다. 가장 큰 장점 중 하나는 IDE에서 코드를 입력 할 때 일반적인 오류를 발견 할 수 있는 보다 풍부한 환경을 제공 할 수 있다는 것입니다.


Javascript 개발자에게는 Java, C#과 같은 다른 언어와 비교할 때 놓칠 수 있는 것이 있습니다. 즉, TypeCheck입니다.


java와 같은 언어는 javascript와 달리 컴파일 시간 자체에서 정의 된 변수의 유형을 확인합니다. 컴파일 시간 자체에서 많은 버그를 해결하는 데 도움이 됩니다.


자바 스크립트 에서 이 문제를 해결하려면. TypeScript가 소개되었습니다.


TypeScript 설정 


TypeScript는 개발 목적으로만 사용됩니다. 브라우저 / JS 엔진은 자바 스크립트 이외의 것을 이해하지 못합니다.


따라서 서버/브라우저를 실행하기 전에 typescript를 자바스크립트로 컴파일해야 합니다.


다음은 Node.js 애플리케이션에서 typescript의 전체 설정 및 프로덕션 배포를 설명하는 기사입니다.


유형 이해 


타입은 자바 스크립트에서 새로운 것이 아닙니다. 자바 스크립트에는 이미 동적 유형이 있습니다. 그들은,

  • Undefined
  • Null
  • Boolean
  • Number
  • String
  • Symbol
  • Object

그러나 자바 스크립트에서 이러한 유형은 동적입니다. javascript는 런타임에서 변수 유형을 확인합니다.


런타임에 유형을 확인하는 대신 Typescript는 컴파일 타임에 유형을 확인합니다. 정적 유형은 동적 유형의 값을 예측합니다.


기본 정적 유형 


String 


작은 따옴표 또는 큰 따옴표로 묶인 텍스트 데이터입니다.


const message: string = 'hello world';
console.log(message);


Boolean 


이 유형은 true 또는 false 인 부울 값을 나타냅니다.


const isType: boolean = false
console.log(isType);


Number 


이 유형은 변수의 정수 값을 나타냅니다. 숫자 유형에는 4 가지 유형의 숫자 ​​리터럴이 지원됩니다.


const age: number = 40;
console.log(age)


Array 


Typescript에서 배열을 유형 검사하는 두 가지 방법이 있습니다. 첫 번째 방법은 요소 유형에 []를 추가하는 것입니다


let newArray: string[] = ["one", "two", "three"]
console.log(newArray)

두 번째 방법은 키워드 Array를 유형과 함께 사용하는 것입니다.


let newArray: Array<string> = ["one", "two", "three"]
console.log(newArray)


Enum 


열거형을 사용하면 명명 된 상수 집합, 즉 숫자 또는 문자열 값일 수 있는 관련 값 모음을 선언 할 수 있습니다.


주로 열거형에는 세 가지 유형이 있습니다.

  • 숫자 열거형
  • 문자열 열거형
  • 이종성 열거형
enum Status {
    Inactive = 0,
    active = 1
}

console.log(Status.active)


enum Status {
    Inactive = "INACTIVE",
    active = "ACTIVE"
}

console.log(Status.active)


Any 


변수 유형을 알 수 없고 특정 변수에 대한 유형 검사기를 원하지 않으면 모든 유형을 사용할 수 있습니다.


let checkValue: any = true

checkValue = "Check";
checkValue = 14


void 


void는 함수에 반환 값이 없을 때 사용됩니다. 함수에 대한 리턴 데이터 유형이 없으면 void가 사용됩니다.


const LogIt = (): void => {
    console.log("log")
}


타입 추론 (Type Inference) 


주로 TypeScript에는 지정된 값에서 변수 유형을 식별하는 기능이 있습니다. 이를 유형 유추(Type Inference)라고 합니다.


예를 들어


let userName = "String"


TypeScript는 변수 userName을 값에서 문자열로 식별합니다. 유형 번호를 지정하면 오류가 발생합니다.


이 개념을 형식 유추라고 합니다.


인터페이스 


첫째, Typescript의 인터페이스는 객체의 유형을 확인하는 방법입니다. 그룹의 값 유형을 확인하려면 인터페이스가 최선의 선택입니다.


예를 들어


interface userData {
    name: string,
    age : number
}

let AddUserDetails = ({ name, age }: userData): void => {
    let arr = [];

    arr.push({
        name,
        age
    })
}

AddUserDetails({ name : "Ganesh",age : 25});


여기에는 이름과 나이와 같은 두 개의 인수를 사용하는 AddUserDetails라는 함수가 있습니다.


두 인수의 유형을 확인하려면 인터페이스가 필요합니다. 따라서 userData 인터페이스를 작성하고 유형을 확인하십시오.


첫 번째 값을 숫자로 전달하면 오류가 발생합니다. 또는 값을 전달할 모든 유형을 정의 할 수 있습니다.


제네릭(Generics) 


TypeScript에서 Generics를 사용하면 단일 유형 대신 여러 유형으로 작동하는 재사용 가능한 코드 구성 요소를 만들 수 있습니다. 예를 들어


const createNewArray = (value: string): Array<string> => {
    let output : Array<string> = [];

    output.push(value);

    return output;
}


여기서 createNewArray 함수는 string 유형의 인수를 사용하여 해당 값을 가진 배열을 리턴합니다. 그러나 유형 번호가 있는 배열을 만들려면 어떻게 해야 합니까?


해당 시나리오에서 컴파일 오류가 발생하는 위의 구현. Generic을 사용하여 이 문제를 해결할 수 있습니다.


const createNewArray = <T>(value: T): Array<T> => {
    let output : Array<T> = [];

    output.push(value);

    return output;
}

let val = createNewArray<string>("fdfsd");

console.log(val)


위의 예제에는 createNewArray 함수에 전달되는 인수의 유형에 해당하는 일반 유형 T가 있습니다.


T는 함수를 호출하는 동안 Type 문자열을 전달하기 때문에 여기에서 string을 나타내는 명명 규칙입니다.


함수 / 클래스를 호출하는 동안 유형을 숫자로 변경하면 유형을 동적으로 가져옵니다. 그것이 제네릭의 아름다움입니다


제네릭을 구현하는 다른 방법이 있습니다. 인터페이스, 클래스 및 타입 제네릭에 구현할 수 있습니다.


결론 


솔직히 우리는 TypeScript의 표면을 거의 긁지 않았습니다. 앞으로 나올 기사에서 이 개념에 대해 더 깊이 알게 될 것입니다. 그때까지 TypeScript에서 멋진 기사를 참조 할 수 있습니다.