TypeScript Handbook 독서노트 제3장 기초 문법

TypeScript Handbook 참조(중국어 버전)
1. 두 가지 방법으로 수조를 정의할 수 있다.첫 번째는 원소 유형 뒤에 []를 연결하여 이 유형의 원소로 구성된 하나의 그룹을 나타낼 수 있다. let list: number[] = [1, 2, 3]; 두 번째 방식은 수조 범형을 사용하는 것이다. Array: let list: Array = [1, 2, 3];2. 모듈 Tuple 모듈 형식은 원소의 수량과 유형을 알 수 있는 그룹을 나타낼 수 있으며 원소의 종류가 같지 않아도 된다.예를 들어, 각각string과number 형식의 원조를 정의할 수 있습니다.

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

3. 임의의 형식any가 기존 코드를 고칠 때any유형은 매우 유용합니다. 이것은 컴파일할 때 형식 검사를 포함하거나 제거할 수 있도록 합니다.다른 언어에서처럼 Object가 비슷한 역할을 한다고 생각할 수도 있습니다.그러나 Object 유형의 변수는 단지 당신에게 임의의 값을 부여할 수 있을 뿐입니다. 그러나 그 위에 임의의 방법을 호출할 수 없습니다. 설령 그것이 정말 이런 방법이 있다 하더라도.

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

4. 유형 단언 키워드 as는 유형 단언을 통해 컴파일러에게'나를 믿어라. 나는 내가 무엇을 하고 있는지 안다'고 알려줄 수 있다.유형 단언은 다른 언어의 유형 변환과 같지만 특수한 데이터 검사와 해체는 하지 않는다.그것은 실행할 때의 영향이 없고, 단지 컴파일 단계에서 작용할 뿐이다.TypeScript는 프로그래머가 반드시 검사를 했다고 가정합니다.

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

5. 인터페이스(1)를 VO로 사용: 선택할 수 있는 속성이 있는 인터페이스는 일반적인 인터페이스 정의와 차이가 많지 않으며 선택할 수 있는 속성 이름 정의의 뒤에 하나만 추가합니까?기호.선택할 수 있는 속성의 장점 중 하나는 존재할 수 있는 속성을 미리 정의할 수 있다는 것이다. 장점 중 하나는 존재하지 않는 속성을 인용했을 때의 오류를 포착할 수 있다는 것이다.예를 들어, 우리가 고의로 createSquare의 color 속성 이름을 틀리게 맞추면 오류 알림을 받을 수 있습니다.

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    // Error: Property 'clor' does not exist on type 'SquareConfig'
    newSquare.color = config.clor;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

일부 대상 속성은 대상이 처음 만들어졌을 때만 그 값을 수정할 수 있습니다.등록 정보 이름 앞에 읽기 전용 등록 정보를 readonly로 지정할 수 있습니다.

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

readonly vs const는 readonly를 사용해야 하는지 const를 사용해야 하는지 변수로 사용해야 하는지 속성으로 사용해야 하는지 가장 간단하게 판단합니다.변수로 사용하면const를 사용하고 속성으로 사용하면readonly를 사용합니다.(2) 함수 유형

interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

(3) 클래스 유형

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

(4) 확장 인터페이스

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

6. 클래스 TypeScript에서 구성된 함수의 함수 이름은 클래스 이름 대신 constructor를 사용합니다.(1) TypeScript에서 구성원은 기본적으로 공공입니다.(2) 추상류는 다른 파생류의 기류로 사용한다.그것들은 일반적으로 직접 실례화되지 않는다.인터페이스와 달리 추상류는 구성원의 실현 세부 사항을 포함할 수 있다.abstract 키워드는 추상 클래스를 정의하고 추상 클래스 내부에서 추상 방법을 정의하는 데 사용됩니다.

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('roaming the earch...');
    }
}

ts에서 js로 전환

//ts:
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter: Greeter;
greeter = new Greeter("world");
console.log(greeter.greet());
//js:
let Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

let greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

7. 함수 a. TypeScript에서 매개변수 이름 옆에 사용할 수 있습니까?선택할 수 있는 매개 변수의 기능을 실현하다.예를 들어, last name을 선택할 수 있도록 하려면 다음과 같이 하십시오.

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

b. 매개 변수에 기본값을 제공할 수도 있습니다. 사용자가 이 매개 변수를 전달하지 않았거나 전달한 값이undefined일 때.기본 초기화 값이 있는 매개 변수라고 합니다.last name의 기본값을 "Smith"로 설정하려면 상례를 수정합니다.

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");// works correctly now, returns "Bob Smith"
let result2 = buildName("Bob", undefined);// still works, also returns "Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr.");// error, too many parameters
let result4 = buildName("Bob", "Adams");// ah, just right

다음은 TypeScript 학습 노트(3) 참조 - 방법 c. 다중 매개 변수 성명은 다른 강력한 언어와 마찬가지로 TypeScript는 방법을 정의할 때 수량을 알 수 없는 다중 매개 변수 전송을 지원한다.

1 //      
2 let restParamsFunc = function (param1: string, ...restParams: string[]): string {
3     return param1 + ' ' + restParams.join(' ');
4 };
5 
6 let resParamsFuncResult = restParamsFunc('a', 'b', 'c');

명칭에 들어가기 전에...(세 개의 소수점) 대응하는 위치를 표시하는 매개 변수는 여러 개로 전송될 수 있다.매개변수 유형이 명시적으로 정의되어 있으므로 들어오는 여러 매개변수의 유형이 정의와 일치해야 합니다. 그렇지 않으면 컴파일할 때 오류가 표시됩니다.
end