type: script + react 프로젝트 개발 체험 의 type: script

목차

시작 식

typescript

작은 자세 에 반응 하기

react 의 상태 관리

머리말
문서 가 너무 재 미 없 으 니, 우리 이 야 기 를 해서 ts 의 지식 을 관통 시 켜 보 자.
파 트 1. - 사연 하나.
옛날 에는 산 이 하나 있 었 고, 산 에는 절 이 하나 있 었 는데, 뇌 가 썩 은 것 도 있 고, 또 다른 것 도 있 었 다 고 한다.

interface IMountain{
    temple: Temple //   
    tiger?: Tiger //   
    [other: string]: any //        
}

절 에 늙 은 방장 과 많은 스님 들 이 닭 과 오 리 를 키 웠 습 니 다.

interface ITemple {
	holder: Holder //    
    monk: Monck[] //    
    poultry: (ChickeC | Duck)[] //   
}

설명 이 끝나 면 저희 가 이 루어 집 니 다.

//   、  、 、      ，        ，      。
abstract class Animal{
  mouse = 1 //    
  leg = 2 //    
  protected voice(content:string){ console.log(content) }
}
//       
class Duck extends Animal{
  quack(){ this.voice('quack') }
}
//      
class Chicke extends Animal{
  crow(){ this.voice('gegeda') }
}
//            
class Tiger extends Animal{
  leg = 4
  howl(){ this.voice('howl') }
}

나 는 그 를 강 한 닭 으로 만 들 고 싶 었 다. 읽 기 순서 1, 2, 3, 4 를 제안 했다.

// 3、          ，       
type ConstructorFuc = new (...arg:any[])=>T;
interface IConstructorFuc{
  new (...arg:any[]):T;
}

// 4、         
interface IChicke{
  crow():void
};
// 2、       ，               ，        。
const strong = (ctor:ConstructorFuc)=>{
  return class extends ctor{
    crow(){
      super.crow();
      super.crow();
    }
  }
}
// 1、         
@strong
class Chicke extends Animal{
  crow(){ this.voice('gegeda') }
}

자 기 를 보 여 드 리 도록 하 겠 습 니 다.

const tiger = new Tiger();
tiger.howl()// howl
const duck = new Duck();
duck.quack()// quack
const chicke = new Chicke();
chicke.crow();// gegeda gegeda

닭 이 소 가죽 과 비교 해서 두 번 우 는 것 을 볼 수 있다.
다음은 우리 가 인물 을 만 들 고 그 에 게 이름 이라는 속성 을 더 해 주 며 소 리 를 내 는 방식 은 바로 speak 입 니 다.

interface IPeople{
  name: string
  speak(content: string):void
}

다음은 작은 스님 이다. 작은 스님 은 작은 비밀 이 있 을 수 밖 에 없다. 쉽게 알려 지지 않 지만 알 수 있 는 방법 이 있어 야 한다.

class Monck extends AbsAnimal{
  name: string;
  private secret = '        ';
  speackSecret(){
    this.speak(this.secret);
  }
  constructor(param: Pick){
    super();
    this.name = param.name;
  }
  speak(content:string){
    super.voice(`${this.name}:${content}`)
  }
}

주지 학 우 는 어린 스님 이 성장 해 야 한 다 는 것 은 잘 알려 져 있 습 니 다. 주지 학 우 는 어린 스님 에 게 자신 이 할 수 있 는 일 을 하 라 고 명령 할 수 있 고 자신의 이름 에 title 이 붙 어야 합 니 다.

class Holder extends Monck{
  constructor(param: Pick){
    super(param);
    this.name = param.name+`(  )`;
  }
  command(monck:Monck, something: keyof Monck){
    if(typeof monck[something] === 'function'){
      console.log(`${this.name}    ${monck.name}    ${something}`);
      (monck[something] as Function)();
    }
    console.log(`${monck.name}     ${something}`);
  }
}

이어서 방장 학 우 는 스님 에 게 자신의 비밀 을 말 해 달라 고 요구 했다.

const holder = new Holder({ name: '   ' });
const monck = new Monck({ name: '  '});

holder.command(monck, 'speackSecret');
//     (  )          speackSecret
//    :        

우 리 는 그들 을 모두 절 에 들 어가 게 했다.

const temple:ITemple = {
  holder,
  monks:[monk],
  poultry: [duck, chicke]
}

절 을 산속 에 두 었 더 니, 오 가 는 것 이 자 유 롭 고 뇌 가 썩 었 다.

const isTigerMountain = (mountain: IMountain)=>{
  console.log(` ${mountain.tiger ? ' ' : '  '}     `)
}
const mountain: IMountain = {
  temple
}
isTigerMountain(mountain);
mountain.tiger = tiger;
isTigerMountain(mountain);
Array().fill(6).forEach(data=>{
  (mountain.tiger as Tiger).howl()// aowu * 6
})
mountain.tiger = undefined;
isTigerMountain(mountain);

part2 - d. ts 파일d.ts, declare 파일, 정의 파일, 그 안의 내용 은 일부 정의 만 포함 할 수 있 고 주요 용법 은 다음 과 같다.

단일 js 파일 성명

ts 가 js 관련 파일 을 도입 해 야 할 때, 예 를 들 어 나 는 js 파일 이 있 는데, 도입 하면 오 류 를 보고 할 수 있다.

// speak.js
export const leeSpeak = (word)=>{
  console.log(word);
};
// other.js
import speck from './speak';// Could not find a declaration file for module './speak'.
speck.leeSpeak();

해결 방법 은 speck.js 같은 등급 디 렉 터 리 에 같은 이름 의 d. ts 파일 을 새로 만 드 는 것 입 니 다.

// speck.js
export const leeSpeak: (word:string)=>void;

이런 방식 의 문 제 는 tsc 를 실행 할 때 js 파일 이 dist 관련 디 렉 터 리 로 내 보 내지 않 는 다 는 것 이다.
물론 allowjs 를 시작 할 수 있 지만 checkjs 를 열지 마 세 요. js 는 유형 정 의 를 할 수 없 기 때문에 checkjs 는 ts 에 따라 문법 검 사 를 합 니 다. 정상 적 인 js 문법 이 컴 파일 러 에 의 해 추정 되 지 않 으 면 오류 가 발생 하기 쉽 습 니 다.

전역 성명 변수 / 유형

인 코딩 과정 에서 우 리 는 1. webpack 의 externals 속성 이나 webpackDllPlugin 을 통 해 가방 을 도입 할 수 있 습 니 다.2. DefinePlugin 은 일부 변 수 를 정의 합 니 다.3、node_module 에서 @ types 폴 더 에 해당 하 는 생명 파일 패키지 가 없습니다.그들 이 정상적으로 사용 할 수 있 도록, 우 리 는 상응하는 유형 을 정의 해 야 한다.

// webpack.base.js
new DefinePlugin({
  "CURRENT_ENV": 'test'
})

// xx.d.ts
declare namespace lee{
    const name: string
}
declare module 'zhang'{
    const name: string
}
declare const CURRENT_ENV : 'test'
// xx.js
import zhang from 'zhang';
zhang.name
lee.name
CURRENT_ENV

전역 패키지 성명 은 export, import 를 사용 하여 모듈 도입 과 내 보 낼 수 없습니다.
ps: 우리 가 인 코딩 하 는 과정 에서 우 리 는 또 하나의 상황 을 만 날 수 있 습 니 다. 바로 nodemodules @ types 에 해당 하 는 모듈 화 성명 파일 이 있 지만 전역 에 두 고 싶 습 니 다. 예 를 들 어 react.

//        react
//                
import React from 'react';


// global.d.ts
declare global{
    const React: typeof import("react");
}
export {}

type: script 의 흔 한 문 제 는 여기까지 입 니 다.
다음으로 전송:https://juejin.im/post/5c42c6b86fb9a04a0441526a