프로그래밍 TypeScript 1장~5장 읽기

안녕하세요, 마토입니다.

최근에 본 서비스의 zen으로 사용되었습니다.dev를 이용하는 사람이 많을 것 같아서 어떤 물건인지 써보고 싶어요.

타입스크립트는 리액트 네이티브의 스마트폰 앱 개발을 토대로 최근 쓰기 시작했지만 제대로 배우지 못하고 코드를 썼기 때문에 타입스크립트의 능력을 높이기 위해 책을 읽었지만, 어렵기 때문에 뭔가를 출력하고 싶었다

370쪽을 읽고 글을 쓰고 싶었는데 중간에 좌절해서 5장을 잠시 썼다.

이런 생각과 경과가 마침내 이 보도를 썼다.
책이 여기 있어요.(초보적으로 모방 링크)
https://amzn.to/3saDOFO

본인이 생각하는 타입 스크립트의 대략적인 이점

JavaScript의 경우 실행 중 오류가 발생하면 번거롭습니다. TypeScript는 유형입니다. 편집할 때 오류가 발생하고 곧 오류가 발생하며 정적 해석 시 편집기에 오류가 표시됩니다. 유형에 따라 자동으로 완성되고 코드가 빨리 작성되어 기분이 좋아집니다.
여기서부터 나는 책 속에 무슨 편리한 물건이 있는지 몰랐다.픽업기로 쓰다.

상수형

// before
type FishName = string
let fishName: FishName = 'Dalmatian' // no error

// after
type FishName = 'Tuna' | 'Shark' | 'SeaPearch'
let fishName: FishName = 'Dalmatian'
// Type '"Dalmatian"' is not assignable to type 'FishName'.ts(2322)

에 오류가 발생할 수 있습니다.
겸사겸사 이런 용법을 말씀드리겠습니다.

type IsFish = true
let isFish: IsFish = false
// Type 'false' is not assignable to type 'true'.ts(2322)

당연한 일이지만 boolean의value도 평면형으로 만들 수 있다.

색인 서명

let aquarium: {
    [fishName: string]: number
} = {
    'NeonTetra': 10,
    'CardinalTetra': 10,
    'CorydorasPanda': 5,
    'RummyNoseTetra': '10',
    // Type 'string' is not assignable to type 'number'.ts(2322)
}

의 형식으로 [key:T]:U의 서명을 기록하여 유형 검사를 할 수 있습니다.

코스메틱 객체

let neonTetra: {
    readonly size: number
} = {
    size: 3
}

neonTetra.size = 5
// Cannot assign to 'size' because it is a read-only property.ts(2540)

아직 안 써봤지만 앞으로도 계속 쓸 거예요.

Type의 결합 및 교차

type Fish = {
    canBranchialRespiration: boolean // えら呼吸
}
type Human = {
    canPulmonaryRespiration: boolean // 肺呼吸        
}

// 合併型
type FishOrHumanOrBoth = Fish | Human
let fishOrHumanOrBoth: FishOrHumanOrBoth = {
    canBranchialRespiration: true,
}

// 交差型
type FishAndHuman = Fish & Human
let fishAndHuman: FishAndHuman = {
    canBranchialRespiration: true,
    // Property 'canPulmonaryRespiration' is missing in type '{ canBranchialRespiration: true; }' but required in type 'Human'.ts(2322)
}

합병형 유화집, 교차형 유적집이라는 표현이 있어서 교차형은 두 가지 유형의 두 가지 중복속성만 타입을 계승할 수 있다고 생각했는데 이런 일이 일어나지 않아서 놀랐어요.

온수

이전 버전의 Type Scrip 또는 컴파일러 설정에서 stictnull Checks 옵션이 거짓이면 null을 허용합니다.
옵션이 명확하므로 이전 Type Script는 이렇습니다.
(Version까지 언제 도착하는지 확인하지 못했다.)

함수 구조기

let swim = new Function('fishName', 'return fishName + " swims."')

에도 이런 함수 선언 방법이 있다.
그러나 이렇게 되면 매개 변수와 반환값에 유형 정보를 쓸 수 없기 때문에 당연히 추천하지 않습니다.

call, apply, bind

JavaScript도 이상한 영역이었는데 마침내 이해하게 됐네요.
모든 사람은 첫 번째 파라미터를bind로 한다.세 가지 다른 점은 두 번째 매개 변수 이후의 전달 방식과 함수 자체의 호출이나 새로운 함수로 되돌아오는 것이다.

언제 제니릭을 귀속시킬 수 있습니까?

// <T>を呼び出しシグネチャの一部として呼び出したので、具体的な型にbindするのは関数を呼び出すとき
type Filter = {
    <T>(array: T[], f: (item: T) => boolean): T[]
}

let filter: Filter = (array, f) => {
    let result = []
    for (let i = 0; i < array.length; i++) {
        if (f(array[i])) result.push(array[i])
    }
    return result
}

// ココでbind
filter([1, 2, 3], _ => _ > 2)

네, 재미있어요.

클래스는 구조상의 모델이다

// 型エイリアスに<T>を設定すると、bindするのは、filter宣言時
type Filter<T> = {
    (array: T[], f: (item: T) => boolean): T[]
}

// ココでbind
let filter: Filter<number> = (array, f) => {
    let result = []
    for (let i = 0; i < array.length; i++) {
        if (f(array[i])) result.push(array[i])
    }
    return result
}

filter([1, 2, 3], _ => _ > 2)

C#Java 등의 학급은 이름에 따라 설계된 것이어서 어떤 사람들은 놀랄 수도 있다.나는 엔지니어이기 때문에 단지'공부할 수 있다'고 생각할 뿐이다

다태성

함수와 마찬가지로 클래스와 인터페이스는 모두 일반적인 매개 변수를 지원하고 다중모드 모드를 사용할 수 있다.

5.8: 믹소

다중 계승을 원하는 동기는 알지만 코드를 잘 몰라서 orz를 건너뛰었어요.
일주일만 더 있다가 올까요?

5.9:장식물

이것도 GoF 디자인 모드의 책에서 배웠는데 개념을 이해하지만 코드를 잘 몰라서 orz를 건너뛰었다

최후

실제 앱을 만들었더라도 복잡형 오류 상황에서는 시간이 걸리겠지만 다소 개선될 것 같다.
그리고 색인 서명과 여러 가지 이름을 몰라요. 원래 type은 Alias예요. 모르는 행동을 알게 되면 재미있어요.
여기까지, 142/377쪽.나머지 235쪽을 즐기면서 읽으세요.