TypeScript 일반 매개 변수 기본 형식 과 새로운 strict 컴 파일 옵션

개술
TypeScript 2.3 은 일반 매개 변수 기본 형식 에 대한 지원 을 추 가 했 습 니 다.일반 형식 에 있 는 형식 매개 변수 에 기본 형식 을 지정 할 수 있 습 니 다.
다음은 일반적인 매개 변 수 를 통 해 기본 값 으로 다음 react 구성 요 소 를 js(와 jsX)에서 TypeScript(와 TSX)로 옮 기 는 방법 을 살 펴 보 겠 습 니 다.

class Greeting extends react.Component {
  render() {
    return <span>Hello, {this.props.name}!</span>;
  }
}

구성 요소 클래스 생 성 형식 정의
우 리 는 먼저 Component 클래스 를 위 한 형식 정의 부터 시작 합 니 다.클래스 기반 React 구성 요 소 는 두 가지 속성 이 있 습 니 다.props 와 state,유형 정의 구 조 는 대체적으로 다음 과 같 습 니 다.

declare namespace React {
  class Component {
    props: any;
    state: any;
  }
}

이것 은 범 형 매개 변수 와 기본 값 의 내용 을 보 여주 기 위해 서 입 니 다.
현재 상속 을 통 해 위 에서 정의 한 Component 를 호출 할 수 있 습 니 다.

class Greeting extends React.Component {
  render() {
    return <span>Hello, {this.props.name}!</span>
  }
}

우 리 는 다음 과 같은 방식 으로 구성 요소 의 인 스 턴 스 를 만 들 수 있 습 니 다.

<Greeting name="world" />

위의 구성 요 소 를 렌 더 링 하면 다음 html 를 생 성 합 니 다:

<span>Hello, World!</span>

나 이 스,계속해.
일반적인 형식 으로 Props 와 State 를 정의 합 니 다.
위의 예제 컴 파일 과 잘 작 동 되 고 있 지만 우리 의 Component 유형 정 의 는 정확 하지 않 습 니 다.props 와 state 형식 을 any 로 설정 하기 때문에 TypeScript 컴 파일 러 도 도움 이 되 지 않 습 니 다.
우 리 는 좀 더 구체 적 으로 두 가지 범 형 유형 인 Props 와 State 를 통 해 props 와 state 속성의 구 조 를 정확하게 묘사 할 수 있다.

declare namespace React {
  class Component <Props, State> {
    props: Props;
    state: State;
  }
}

다음 에 GreetingProps 형식 을 만 듭 니 다.이 형식 은 문자열 형식 name 의 속성 을 정의 하고 Props 형식 매개 변수 로 전달 합 니 다.

type GreetingProps = { name: string };

class Greeting extends React.Component<GreetingProps, any> {
  render() {
    return <span>Hello, {this.props.name}!</span>;
  }
}

1)GreetingProps 는 유형 매개 변수 Props 의 유형 매개 변수 이다.
2)유사 하 게 any 는 유형 매개 변수 State 의 유형 매개 변수 이다.
이러한 유형 이 있 으 면 우리 의 구성 요 소 는 더 좋 은 유형 검사 와 자동 알림 을 받 을 수 있 습 니 다.

단,현재 React.Component 클래스 를 사용 할 때 는 두 가지 유형 을 제공 해 야 합 니 다.우리 가 켜 놓 은 초기 코드 예제 에 서 는 유형 검 사 를 정확하게 하지 않 습 니 다.

// Error:      Component<Props, State>
//    2      。
class Greeting extends React.Component {
  render() {
    return <span>Hello, {this.props.name}!</span>;
  }
}

만약 우리 가 Greeting Props 와 같은 유형 을 지정 하고 싶 지 않다 면,Props 와 State 형식 매개 변수 에 any 형식 을 제공 하여 코드 를 수정 할 수 있 습 니 다.

class Greeting extends React.Component<any, any> {
  render() {
    return <span>Hello, {this.props.name}!</span>;
  }
}

이런 방법 은 컴 파일 러 를 통과 시 킬 수 있 지만 우 리 는 더욱 우아 한 방법 이 있다.일반적인 매개 변수 기본 유형 이다.
범용 매개 변수 기본 형식
TypeScript 2.3 부터 범 형 매개 변수 에 기본 형식 을 추가 할 수 있 습 니 다.아래 의 예 에서 형식 매개 변 수 를 명시 적 으로 제시 하지 않 으 면 Props 와 State 는 모두 any 형식 입 니 다.

declare namespace React {
  class Component<Props = any, State = any> {
    props: Props;
    state: State;
  }
}

지금 우 리 는 일반적인 유형 을 지정 하지 않 아 도 컴 파일 러 의 검 사 를 통과 할 수 있다.

class Greeting extends React.Component {
  render() {
    return <span>Hello, {this.props.name}!</span>;
  }
}

물론,우 리 는 Props 형식 매개 변수 에 유형 을 명시 적 으로 제공 하고 기본 any 형식 을 덮어 쓸 수 있 습 니 다.다음 과 같 습 니 다.

type GreetingProps = { name: string };

class Greeting extends React.Component<GreetingProps, any> {
  render() {
    return <span>Hello, {this.props.name}!</span>;
  }
}

이 두 가지 유형의 매개 변 수 는 현재 기본 형식 이 있 기 때문에 선택 할 수 있 습 니 다.우 리 는 Props 에 만 명시 적 인 형식 매개 변 수 를 지정 할 수 있 습 니 다.
type GreetingProps = { name: string };

class Greeting extends React.Component<GreetingProps> {
  render() {
    return <span>Hello, {this.props.name}!</span>;
  }
}

주의 하 세 요.우 리 는 하나의 유형의 매개 변수 만 제공 합 니 다.단,선택 가능 한 유형의 매개 변 수 를 생략 하기 전에 유형 을 지정 해 야 합 니 다.그렇지 않 으 면 생략 할 수 없습니다.
기타 사례
지난 편 에서 TypeScript 2.2 의 혼합 류 에 관 한 글 에서 우 리 는 처음에 다음 과 같은 두 가지 유형의 별명 을 밝 혔 다.

type constructor<T> = new (...args: any[]) => T;
type constructable = Constructor<{}>;

Constructable 타 입 은 순 전 히 문법 사탕 입 니 다.Constructor<{}>형식 을 대체 할 수 있 습 니 다.매번 일반적인 형식 인 자 를 쓸 필요 가 없습니다.일반적인 매개 변수 기본 값 을 사용 하면 추가 가능 한 구조 유형 을 완전히 제거 하고{}을 기본 형식 으로 설정 할 수 있 습 니 다.

type Constructor<T = {}> = new (...args: any[]) => T;

문법 은 조금 복잡 하지만 생 성 된 코드 는 더욱 간결 하고 Good 입 니 다.
새로운--strict 주요 컴 파일 옵션
TypeScript 2.3 은 새로운--strict 컴 파일 러 옵션 을 도 입 했 습 니 다.더 엄격 한 형식 검사 와 관련 된 다른 컴 파일 러 옵션 을 많이 지원 합 니 다.
TypeScript 에 추 가 된 새 검사 항목 은 기 존 항목 과 호 환 되 지 않도록 기본적으로 닫 힙 니 다.호 환 되 지 않 는 것 을 피 하 는 것 은 좋 지만 이 정책 의 단점 중 하 나 는 설정 의 최고 유형 안전 을 복잡 하 게 만 드 는 것 입 니 다.이렇게 하면 TypeScript 버 전이 발 표 될 때마다 표시 적 으로 새 옵션 을 추가 해 야 합 니 다.--strict 컴 파일 옵션 이 있 으 면 최고 수준의 형식 안전 을 선택 할 수 있 습 니 다.
새로운--strict 컴 파일 러 옵션 은 설정 을 권장 하 는 형식 검사 옵션 을 포함 합 니 다.구체 적 으로 말 하면 지정--strict 는 다음 과 같은 모든 옵션 을 지정 한 것 과 같 습 니 다.(앞으로 더 많은 옵션 이 포 함 될 수 있 습 니 다)

--strictNullChecks

--noImplicitAny

--noImplicitThis

--alwaysStrict

미래의 TypeScript 버 전 은 이 집합 에 추가 형식 검사 옵션 을 추가 할 수 있 습 니 다.이것 은 프로젝트 에서 사용 해 야 할 새로운 엄격 한 옵션 을 얻 기 위해 모든 TypeScript 버 전 을 감시 할 필요 가 없다 는 것 을 의미한다.위 옵션 집합 에 새 옵션 을 추가 하면 항목 의 TypeScript 버 전 을 업그레이드 한 후 자동 으로 활성 화 됩 니 다.
--strict 컴 파일 옵션 은 위 에 열 거 된 컴 파일 러 옵션 에 기본 값 을 설정 합 니 다.이 옵션 들 을 단독으로 제어 할 수 있다 는 뜻 이다.예 를 들 면:
--strict --noImplicitThis false
또는 tsconfig.json 파일 에서 지정:

{
  "strict": true,
  "alwaysStrict": false
}

이것 은--noImplicitThis 컴 파일 옵션 을 제외 한 모든 엄격 한 검사 옵션 을 엽 니 다.이 방식 을 사용 하면 명확 하 게 열 거 된 항목 을 제외 한 모든 엄격 한 검사 항목 을 설명 할 수 있다.이 제 는 기본 최고 수준의 유형 안전 에서 일부 검 사 를 배제 할 수 있다 는 얘 기다.
개 선 된--init 출력
기본--strict 설정 을 제외 하고 tsc-init 는 출력 도 개선 했다.tsc--init 에서 기본적으로 생 성 된 tsconfig.json 파일 은 설명 되 어 있 는 일반적인 컴 파일 러 옵션 을 포함 하고 있 습 니 다.관련 옵션 의 설명 을 삭제 하여 원 하 는 결 과 를 얻 을 수 있 습 니 다.우 리 는 새로운 출력 이 새로운 프로젝트 의 설정 을 간소화 하고 프로젝트 가 성장 함 에 따라 프로필 의 가 독성 을 유지 할 수 있 기 를 바 랍 니 다.
tsc--init 컴 파 일 러 를 통 해 설정 파일 을 구축 할 수 있 습 니 다:
$ tsc --init
message TS6071: Successfully created a tsconfig.json file.
이 명령 을 실행 하면 현재 작업 디 렉 터 리 에 tsconfig.json 파일 이 생 성 됩 니 다.생 성 된 설정 은 다음 과 같 습 니 다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
    // "lib": [],                             /* Specify library files to be included in the compilation:  */
    // "allowJs": true,                       /* Allow JavaScript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true                            /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

주의--strict 는 기본적으로 사 용 됩 니 다.이것 은 새로운 TypeScript 프로젝트 를 시작 할 때 기본 모드 로 자동 으로 들 어 가 는 것 을 의미 합 니 다.
--checkJS 옵션 에서.js 파일 의 오류
--allowJs 를 사용 하 더 라 도 TypeScript 컴 파일 러 는 기본적으로.js 파일 의 오 류 를 보고 하지 않 습 니 다.TypeScript 2.3 에서--checkJs 옵션 을 사용 하면.js 파일 의 형식 검사 오류 도 보고 할 수 있 습 니 다.
일부 파일 에 대한 검 사 를 건 너 뛰 기 위해 서 는//@ts-nocheck 주석 을 추가 할 수 있 습 니 다.반대로 설정 이 필요 없 이 일부.js 파일 만 검사 할 수 있 습 니 다.-checkJS 컴 파일 옵션 을 선택 할 수 있 습 니 다.이 줄 의 오 류 를 무시 하기 위해 서 는//@ts-ignore 를 특정 줄 에 추가 할 수도 있 습 니 다.
.js 파일 은 표준 ECMAScript 기능 만 있 는 지 확인 합 니 다.형식 표 시 는.ts 파일 에서 만 허용 되 고.js 에 서 는 오류 로 표 시 됩 니 다.JSdoc 주석 은 JS 코드 에 어떤 종류의 정 보 를 추가 하 는 데 사용 할 수 있 습 니 다.
이상 은 TypeScript 일반 매개 변수 기본 형식 과 새로운 strict 컴 파일 옵션 의 상세 한 내용 입 니 다.TypeScript 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!