Typescript의 고급 개념 이해

> npm install -g typescript

> tsc helloworld.ts

function print(arg) {
    send(arg);
}

print("hello");
print(4);

위 코드에서 print 함수의 유효한 매개 변수는 무엇입니까?함수 매개 변수에 유형을 추가하지 않으면 TypeScript에서 any 유형의 매개 변수를 지정하여 유형 확인을 닫습니다.
코드 보안을 좋아하는 개발자들은 noImplicityAny을 사용할 수 있으며 코드의 any 유형에 대한 어떠한 가능성도 알려준다.같은 print 함수에 무슨 일이 일어날지 봅시다.

function print(arg) { // Error : someArg has an implicit `any` type
    send(arg);
}

오류를 수정하려면 함수 매개 변수에 주석을 달 수 있습니다.

function print(arg: number) { // Error : someArg has an implicit `any` type
    send(arg);
}

그러나 여전히 any을 입력해야 한다면 파라미터를 any으로 명시적으로 표시할 수 있다.

function print(arg: any) { // Error : someArg has an implicit `any` type
    send(arg);
}

알 수 없었어

unknown 유형은 any 유형과 유사하다. 모든 유형은 any과 unknown 유형에 분배할 수 있지만 any 유형은 다른 유형에 분배할 수 있지만 unknown 유형은 다른 유형에 분배할 수 없다.차이는 사람을 곤혹스럽게 하는 개념일 수 있으니 예를 들어 보자.

function example1(arg: any) {
  const a: str = arg; // no error
  const b: num = arg; // no error
}

function example2(arg: unknown) {
  const a: str = arg; // 🔴 Type 'unknown' is not assignable to type 'string'.(2322)
  const b: num = arg; // 🔴 Type 'unknown' is not assignable to type 'number'.(2322)
}

변수 arg은 두 함수에 전달되고 이 두 함수의 유형은 string, number 또는 다른 유형일 수 있다.유형에 상관없이 arg은 any과 unknown 유형으로 지정된다.
그러나 any 유형과 달리 unknown 유형의 변수는 다른 유형에 분배할 수 없다. 예를 들어 7행과 8행과 같다.any 유형은 양방향이고 unknown 유형은 단방향이다.
함수에 전달할 값의 유형을 모르지만 unknown에서 벗어나기를 원한다면 any 유형이 도움이 될 수 있습니다.이것은 코드의 안전성을 증가시켰다. 왜냐하면 any 유형이 전파될 수 있기 때문에 코드 라이브러리에 오류가 발생하기 쉽다.

엄격한 수표

TypeScript에서는 null과 undefined을 각 유형에 할당할 수 있으며 이는 모든 유형의 도메인에 있음을 의미합니다.

let num: number = 123;
num = null; // Okay
num = undefined; // Okay

값이 null 또는 undefined인 변수를 호출할 수 있기 때문에 의외의 오류가 발생할 수 있습니다.

interface Person {
  hello(): void;
}

const num: number = undefined;
const str: string = null;
const person: Person = null;

person.hello(); // 🔴 Runtime Error!

엄격한 공중 검사 모드에서 null과 undefined은 자동으로 모든 유형에 속하지 않기 때문에 null 또는 undefined을 포함하지 않는 유형에 사용할 수 없다.이렇게 하면, 컴파일할 때 오류, 즉 Object is possibly 'undefined'을 얻을 수 있습니다.Luna은 Dog의 실례 대상이다.

class Dog
{
    age: number
    breed: string    

    constructor(age: number, breed: string) 
    {
        this.age = age
        this.breed = string
    }    

    getRelativeAge(): number
    {
        return this.age * 7
    }
}

let Luna = new Dog(2, 'Labrador')

이 구문은 JavaScript ES5에서 함수 객체를 사용하는 것과 같습니다.

function Dog(age, breed)
{
    this.age = age
    this.breed = breed
}

Dog.prototype.getRelativeAge = function() {
    return this.age * 7
}

var Spot = new Dog(2, 'Labrador')

상속권

객체를 작성하는 방법을 알게 된 이상 TypeScript의 상속을 이해하는 것이 중요합니다.상속은 하위 클래스가 부모 클래스로부터 일부 속성을 상속할 수 있도록 합니다.
예를 들어, 상위 Animal이 있습니다.

class Animal
{
    age: number
    breed: string    

    constructor(age: number, breed: string)
    { 
        this.age = age
        this.breed = breed
    }    

    makeSound_(sound: string): void
    {
        console.log(sound)
        console.log(sound)
        console.log(sound)
    }
}

그리고 Dog 하위 클래스를 만들 수 있습니다.super 키워드를 사용하여 기본 계승을 실현할 수 있으며 이 키워드는 하위 클래스에서 상응하는 부 함수를 호출하는 함수로 사용된다.

class Dog extends Animal
{
    playsFetch: boolean    constructor(age: number, breed: string, playsFetch: boolean)
    {
         super(age, breed) // call parent constructor
         this.playsFetch = playsFetch
    }    makeSound(): void
    {
        super.makeSound_('woof woof')
    }    getAgeInHumanYears(): number
    {
        return this.age * 7    // super.age will throw error
    }
}
class Cat extends Animal
{
    constructor(age: number, breed: string)
    {
        super(age, breed)
    }    makeSound(): void
    {
        super.makeSound_('meow meow')
    }
}

이음매

JavaScript(및 TypeScript)의 인터페이스 기능은 런타임에 영향을 주지 않으므로 강력합니다.TypeScript는 변수의 구조를 설명할 수 있도록 해 줍니다. 이것은 당신에게 더 많은 권한을 줍니다.

interface Point {
    x: number; y: number;
}
declare var test: Point;

TypeScript의 인터페이스는 개방적이기 때문에 다른 작성자는 test 변수의 기존 성명을 바탕으로 구축할 수 있다.

interface Point {
    x: number; y: number;
}
declare var myPoint: Point;

interface Point {
    z: number;
}

var myPoint.z; // Allowed

클래스는 implements 키워드를 사용하여 미리 정의된 대상 구조를 따를 수 있도록 인터페이스를 실현할 수 있다.

interface Point {
    x: number; y: number;
}

class MyPoint implements Point {
    x: number; y: number; // Same as Point
}

이 implements 키워드는 인터페이스의 모든 변경 사항에 컴파일 오류가 발생하기 때문에 코드 라이브러리를 쉽게 업데이트할 수 있습니다.

interface Point {
    x: number; y: number;
    z: number; // New member
}

class MyPoint implements Point { // ERROR : missing member `z`
    x: number; y: number;
}

타자 스크립트의 유형

TypeScript의 가장 중요한 부분은 기존 범주 유형에서 사용자 정의 유형을 만드는 것입니다.

연합형

일반적으로, 코드가 여러 종류의 데이터 형식을 허용하기를 원할 수도 있습니다.null 또는 undefined의 값을 받아들일 때 이런 수요는 특히 진실하다.union 유형은 이 문제를 해결할 수 있습니다. |의 주석으로 표시됩니다.

const hello = (name: string | undefined) => { /* ... */ };

이 예에서 name 유형은 string | undefined으로 정의되었는데 이것은 name 유형의 모든 변수가 string 또는 undefined일 수 있음을 의미한다.

교차점 유형

교차점 유형은 여러 유형을 하나로 조합하여 새로운 유형이 조합 유형의 특징을 가지도록 한다.다음과 같이 extend 키워드를 사용하여 이 작업을 수행할 수 있습니다.

function extend<T, U>(first: T, second: U): T & U {
  return { ...first, ...second };
}

const x = extend({ a: "hello" }, { b: 42 });

// x now has both `a` and `b`
const a = x.a;
const b = x.b;

모듈 유형

JavaScript와 달리 TypeScript는 Tuple types을 제공하며, 비통일 형식과 고정된 수량의 요소를 사용하여 그룹을 표시할 수 있습니다.아래의 예는 하나의 원조를 보여 준다.

var nameNumber: [string, number];

// Okay
nameNumber = ['Ben', 12345];

// Error
nameNumber = ['Ben', '12345'];

기타 공부할 이야기

진정한 타자 고수가 되려면 아직도 배워야 할 것이 많다.이 목록을 보고 미래에 무슨 일이 일어날지 봅시다.

매핑 유형

차이점 결합 유형

장식사

함수 유형 및 반환 유형

유형 스크립트의 함수 프로그래밍

상태기

일반 함수

포장 및 리소스

이제 TypeScript에서 더 높은 주제를 알게 되었으니 더 강력한 TypeScript 기능을 탐색할 때가 되었습니다.언어를 파악하고 TypeScript에서 제공하는 도구를 활용할 수 있도록 Advanced TypeScript Masterclass을 살펴보십시오.
본 과정을 마치면 자신의 유형 스크립트 기술에 대해 자신감을 가지게 되고 자신의 유형을 작성할 수 있으며 컴파일한 후에 오류를 쉽게 식별할 수 있으며 전체적인 자바스크립트 지식도 향상시킬 수 있습니다.관련된 주제는 엄격한 유형, 범용 함수, 범용 인터페이스, 조합 유형, 흔한 오류 등을 포함한다.

TypeScript에 대한 기사 계속 보기

TypeScript Tutorial: A step-by-step guide to learn TypeScript: TypeScript

의 기본 개념을 로드맵으로 이해

React and TypeScript: TypeScript를 활용하여 강력한 웹 응용 프로그램을 개발하는 방법을 배웁니다.