머리말
이 문서에서는 아마 주로 오래된 프로젝트 반응에 타이프를 설치하고 사용하는 방법에 대한 타이프 라이터 무엇인지 이해 가정합니다.
이 글을 쓰는 주요 목적은 많은 있지만, 온라인 이것에 대해 타이프 라이터를 설명하는 것입니다,하지만 그들은 문법 개념이나 간단한 예를 들어, 타이프 라이터가 몇 기사 반응 사용하여 이전 프로젝트의 실제 변화의 일부입니다.
그래서 실제로 여기 레코드의 변환 프로젝트를 반응한다.
을 참조하여 컨텐츠 섹션 블로그 타이프 라이터 중국 네트워크를 ,이 사이트는 공식 문서의 중국어 버전이 있습니다.
설치 타이프 라이터 및 관련 라이브러리
통합 비계를 들어 타이프 라이터는 주로 타이프 라이터가 비계 반응 통합하는 방법에 대한 이야기 여기,이 단계를 건너 뛸 수 있습니다.
첫 번째 실행
npm install --save @types/react @types/react-dom이 단계는 모든 라이브러리가 타이프 라이터 문 파일을 가지고 있기 때문에 실행하여, 반응의 선언 파일 DOM 반응 얻기 위해 주로
npm install --save @types/库名字방법은 타이프 선언 파일을 얻을 수 있습니다.
만 유형 검사는이 라이브러리에 달성 될 수있다 선언 파일을 얻을.
당신이 파일을 선언하지 않는 다른 라이브러리를 사용하는 경우, 당신은 또한 그렇게 할 필요가 있습니다.
그런 다음 명령을 실행합니다 :
npm install --save-dev typescript awesome-typescript-loader source-map-loader이 시점에서, 우리는 멋진-타이프 라이터 로더와 소스지도 로더를 타이프 라이터 설치.
멋진-타이프 라이터 로더는 웹팩 사용 타이프 라이터 표준 구성 파일 tsconfig.json 컴파일 타이프 라이터 코드를 할 수 있습니다.
sourcemap 로더 자신의 sourcemaps, 소스지도, 편리한 디버깅을 생성 웹팩 때 사용 sourcemap 타이프 라이터 출력 파일 알 수 있습니다.
타이프 라이터 프로필 추가
Tsconfig.json 프로젝트의 루트 디렉토리에있는 파일은 다음과 같은 콘텐츠의 예입니다 작성 :
{
"compilerOptions": {
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
"outDir": "./dist/", // 重定向输出目录
"sourceMap": true, // 生成相应的 .map文件
"noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错。
"module": "esnext", // 模块引入方式
"target": "esnext", // 指定ECMAScript目标版本
"moduleResolution": "node", // 决定如何处理模块
"lib": [
"esnext",
"dom"
], // 编译过程中需要引入的库文件的列表。
"skipLibCheck": true, //忽略所有库中的声明文件（ *.d.ts）的类型检查。
"jsx": "react" // 在 .tsx文件里支持JSX
},
"include": [
"./src/**/*", // 这个表示处理根目录的src目录下所有的.ts和.tsx文件，并不是所有文件
]
}skipLibCheck 매우 중요하지 모든 라이브러리는 타이프에 의해 검출 될 수있다.
moduleResolution의 세트 노드는 또한 중요하다. 당신이 설정되지 않은 경우 node_modules에서 파일 타이프 라이터 진술을 할 때,이 폴더로 이동합니다.
자세한 내용은 구성 파일에서 사용할 수 있습니다 : 여기 .
구성 웹팩
여기에 웹팩에서 사용하는 몇 가지 구성 타이프 라이터 필요가 있습니다.
규칙 구성 파일을 구문 분석 TSX
다음 예는 다음과 같다 :
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'env', 'stage-0', 'stage-3'],
plugins: [
'transform-decorators-legacy',
['import', { libraryName: 'antd', style: 'css' }], // `style: true` 会加载 less 文件
],
},
},
},
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
//...
]
//...
}사실, 단지 라인을 더 지불 :
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }이 줄 필요가 규칙 실행 순서는 아래에서 위로 있기 때문에, 다음과 같은 jsx 구문 분석 규칙을 추가하는 구문 분석하고 TSX JS TS 재 구문 분석 및 jsx 할 수 있습니다.
물론,과
enforce: 'pre'조정 규칙 순서는 상관 없습니다.
CSS-moudule를 사용하여 문제를 해결
이 코드에 사용되는 코드 경우 :
import styles from './index.css'그런 다음 다음과 같은 오류를보고 할 수 있습니다 :
Cannot find module './index.css'이 솔루션은 declaration.d.ts라는 파일을 생성 루트 디렉토리에있는 파일이며, 다음과 같이 말한다 :
declare module '*.css' {
const content: any;
export default content;
}코드 행은 모든 CSS 파일을 선언한다.
우리가 이전 파일 tsconfig.json 변경해야하는 동시에,이 파일은 경로에 포함 배치됩니다 :
"include": [
"./src/**/*",
"./declaration.d.ts"
]일부 라이브러리를 설치하여이 문제는 문제를 해결하는 방법이 있지만, 각각의 CSS 파일에 대한 문을 생성, 내가이 방법을 사용하여보다 여기에 자신을 조금 고려, 조금 이상한 느낌.
이름 접미사 구성 생략
당신은 사용에 익숙한 경우
import Chart from './Chart/index.jsx'접미사, 즉 생략한다 :
import Chart from './Chart/index'그런 다음 TS 및 TSX에 가입하기 위해 동일한 필요가 웹팩 해결 :
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},개미 디자인의 도입
사실 개미 디자인의 공식 웹 사이트는 타이프 거기에 사용하는 방법이 일 : 타이프 스크립트의 사용 .
그래서 왜이 나열된 원하는입니까?
내가 여기에 지적한 바와 같이, 그 어떤 사용의 기본 문서 위의 구성 타이프 라이터 동안 설치 측면에서 기존의 프로젝트 개미 디자인 (일반적으로 권리와 요구에로드)합니다.
모든 온라인 문서처럼 보이는이 프로그램에 찾았지만, 우리가해야 할 사실 설치입니다 수 있습니다 TS-가져 오기 - 플러그인을 .
npm i ts-import-plugin --save-dev이어서 결합 이전에 편집 타이프 - 더 - 로더 등 웹팩 다음에
const tsImportPluginFactory = require('ts-import-plugin')
module.exports = {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
options: {
getCustomTransformers: () => ({
before: [tsImportPluginFactory([
{
libraryName: 'antd',
libraryDirectory: 'lib',
style: 'css'
}
])]
}),
},
exclude: /node_modules/
}
]
},
// ...
}, 개정 전에 준비 구성
이 시점까지, 사실, 프로젝트는 여전히 컴파일 중에 타이프 라이터를 사용하지 않는, 즉 주.
우리는 단지 구성 allowJs 여기에 true로 .TS 및 .tsx 접미사 타이프 스크립트 파일로, 설정되지 않은 거래 때문입니다.
: 사용하기 전에, 당신은 이미, 타이프 라이터 문법의 지식을 참조 할 수 있습니다 모르는 가정 타이프를 시작하는 오분 .
즉, 모든 단계 위의 후, 수정 접미사없이 기존 코드는 계속 사용할 수 있어야합니다.
당신은 타이프 라이터를 사용하고 TSX 새 파일의 TS 또는 원래 파일 확장자 이름을 수정하는 경우.
다음은 수정의 전형적인 예를 나열합니다.
기능 구성 요소의 변형 예 (어린이 포함)
import React from 'react'
import styles from './index.css'
interface ComputeItemProps {
label: string;
children: React.ReactNode;
}
function ComputeItem({ label, children }: ComputeItemProps) {
return <div className={styles['item']}>
<div className={styles['label']}>{label}:</div>
<div className={styles['content']}>{children}</div>
</div>
}
export default ComputeItem
这个例子中语法都可以在TypeScript的官网查到，唯一需要注意的是children的类型是React.ReactNode。Component 클래스 변형 예 (함수 선언을 포함하여 정의 된 이벤트 파라미터)
import React from 'react'
import styles from './index.css'
interface DataSourceItem {
dayOfGrowth: string;
netValueDate: string;
}
interface ComputeProps {
fundCode: string;
dataSource: DataSourceItem[];
onChange(value: Object): void;
}
export default class Compute extends React.Component<ComputeProps, Object> {
// 改变基金代码
handleChangeFundCode = (e: React.ChangeEvent<HTMLInputElement>) => {
const fundCode = e.target.value
this.props.onChange({
fundCode
})
}
render() {
//...
);
}
}클래스의 구성 요소를 선언하는 방법이 예를 보여줍니다 :
React.Component<ComputeProps, Object>구문은 생소 할 수 있지만이되어 C # 또는 자바 경험을 잘 이해해야했다 타이프 라이터 제네릭입니다.
매개 변수의 첫 번째 유형은 소품을 정의하고, 두 번째 매개 변수는 국가의 유형을 정의합니다.
그리고 다음과 같이 정의되어야하는 이벤트 매개 변수 유형에 반응 :
React.ChangeEvent<HTMLInputElement>여기서,도 제네릭의 사용은 변경 이벤트 유형 입력의 상단을 나타냅니다.
하지만 함수 타입 정의 소품은 조립, 여기에 별도로 표시되지 않습니다.
이러한 몇 가지 예는 비교적 전형적인 예 타이프과 반작용 조합이다.
창에 프로세스 변수
글로벌 변수의 창에 기록을 사용하여 윈도우에 존재하지 않는 속성하라는 메시지가 표시됩니다.
이 처리하기 위해, 당신은 declaration.d.ts이 파일의 변수를 정의 할 수 있습니다 :
// 定义window变量
interface Window{
r:string[]
}어디 r은 변수의 이름입니다.
개요
나는 몇 가지 더 예를 쓰고 싶었다, 그러나 나는 그것의 일반적인 예를 업데이트 할 시간이 있다면, 미래를 작성 계속하지 않으려는 원인 Dota2는 버전을 업데이트했습니다.
이 문서 타이프 라이터 콘크리트 구문의 도입으로 가능한 한 많이 포함하고,이 그것을 할 수있는 블로그가 아니기 때문에 이런 일을 소개하지 않습니다 만 설치 및 타이프의 통합 된 프로젝트 반응에에 초점을 맞추고있다.
기사, 감독도 얼굴 타이프 라이터의 망설임에 도움 기대하고, 올바른 나를 기쁘게하는 경우.