Résumé de la semaine 46 - TypeScript

TypoScript

Types communs

type primitif

let age:number=20;
let myName:string='xsx'
let isLoading:boolean=false;
let a:null=null;
let b:undefined=undefined;
let s:symbol=Symbol();

type de tableau

let numbers:number[]=[1,2,3];
let numbers2:Array<number>=[1,2,3];

type de syndicat

let arr:(number|string)[]=['1','2',1,2];

type de fonction

function add(num1:number,num2:number):number{
    return num1+num2;
}
const add2=(num1:number,num2:number):number=>{
    return num1+num2;
}

arguments facultatifs de la fonction

function mySlice(start?:number,end?:number):void{
    console.log(`起始索引${start},结束索引${end}`);
}

mySlice();
mySlice(1);
mySlice(1,2);

type d'objet

let person:{name:string;age:number;sayHi():void;greet(name:string):void}={
    name:'jack',
    age:19,
    sayHi(){},
    greet(name){},
}
let person2:{
    name:string
    age:number
    sayHi:()=>void
    greet(name:string):void
}={
    name:'jack',
    age:19,
    sayHi(){},
    greet(name){},
}

propriétés facultatives de l'objet

function myAxios(config:{url:string;method?:string}){
    console.log(config);
}

type avancé

interface

interface IPerson{
    name:string
    age:number
    sayHi():void
}
let person3:IPerson={
    name:'jack',
    age:19,
    sayHi(){}
}

héritage d'interface

interface Point2D{
    x:number
    y:number
}
interface Point3D extends Point2D{
    z:number
}
let d2:Point2D={
    x:1,
    y:2
}
let d3:Point3D={
    x:1,
    y:2,
    z:3
}

alias de type

type TPerson={
    name:string
    age:number
    sayHi():void
}
let person4:TPerson={
    name:'jack',
    age:19,
    sayHi(){}
}

affirmation de type

//如果不知道是什么类型的，可以在控制台选中元素，输入console.dir($0)查看。
const aLink = <HTMLAnchorElement>document.getElementById('link')

Interfaces vs alias de type

//接口只能给对象起别名，而类型别名可以给任意类型起别名
type NumStr = number | string;

type littéral

const str2:'Hello TS' = 'Hello TS'
let age2:18=18
function changeDirection(direction:'up'|'down'|'left'|'right'){
    console.log(direction);
}
changeDirection('up');

Énumération numérique

//对于数字枚举存在自增长行为，如果你不设置数值，则会从0依次增长。
enum Direction{Up,Down,Left,Right}
enum Direction2{Up=10,Down=22,Left=65,Right=1025}
function changeDirection2(direction:Direction){
    console.log(direction);
}
changeDirection2(Direction.Up)

énumération de chaînes

enum Direction3{
    Up='Up',
    Down='Down',
    Left='Left',
    Right='Right',
}

tout type (obsolète)

/*
    不推荐使用any类型，它会让TypeScript变成AnyScript，会失去TypeScript类型保护的优势。

*/
let objans:any={x:0};
objans();
//上述代码执行错误

A implicitement le type any

1. Déclarer une variable sans fournir de type ni de valeur par défaut
2. paramètre de fonction sans type

typeof dans TypeScript

//typeof只能查询变量或属性的类型，无法查询其他形式的类型
let p={x:1,y:2};
function formatPoint(point:{x:number,y:number}){}
formatPoint(p);
function formatPoint2(point:typeof p){}
formatPoint2(p);

classe classe

class Persons{
    ages!:number
    gender='男'
}
const per=new Persons();

classe constructeur de classe

class Persons{
    ages!:number
    gender='男'
    constructor(ages:number,gender:string){
        this.ages=ages;
        this.gender=gender
    }
}
const per=new Persons(18,'女');

Méthodes d'instance de la classe class

class Point{
    x=10
    y=10
    scale(n:number):void{
        this.x*=n;
        this.y*=n;
    }
}
const poi=new Point();
poi.scale(10);

La classe classe hérite de la classe mère

class Animal{
    move(){
        console.log('移动');
    }
}
class Dog extends Animal{
    bark(){
        console.log('汪');
    }
}
const dog=new Dog();

La classe classe implémente l'interface

interface Singalbe{
    sing():void
}
class Persons2 implements Singalbe{
    sing(): void {
        console.log('sign');
    }
}

classe modificateur de visibilité de classe

1. public (public, la valeur par défaut est public)

class Animal{
    public move(){
        console.log('移动');
    }
}

2. protégé (protégé)

//仅对声明的所有类和子类中（非实例对象）可见。
class Animal{
    protected move(){
        console.log('移动');
    }
}
class Dog extends Animal{
    bark(){
        console.log('汪');
        this.move();
    }
}

3. privé (privé)

//只在当前类中可见，对实例对象以及子类都不可见
class Animal{
    private move(){
        console.log('移动');
    }
}
class Dog extends Animal{
    bark(){
        console.log('汪');
        this.move();//报错
    }
}

4. readonly (en lecture seule, non seulement disponible dans la classe class)

/*
用来防止在构造函数之外对属性进行赋值，可以在声明时和constructor里面进行赋值
只可以修饰属性，不能修饰方法
下面代码中如果:number没有写，则age会变成字面量类型，如果再在constructor中改变值会报错。
接口或{}表示的对象类型，也可以使用readonly
*/
class Persons3{
    readonly age:number=18
    constructor(){
        this.age=age;
    }
    setAge(){
        this.age=20//报错
    }
}
interface readi{
    readonly age:18
}
let obji:{readonly age:number}={
    age:18
}

compatibilité des types

    TypeScript utilise un système de type structuré, également connu sous le nom de duck typing (type de canard), si deux objets ont la même forme, ils sont considérés comme appartenant au même type.
    En Java et C#, ce sont des systèmes de type marqués et ne seront pas jugés en ayant la même forme.

class Pointl{x!:number;y!:number}
class pointl2D{x!:number;y!:number}
const pl:Pointl=new pointl2D();
//在TypeScript看来Pointl和pointl2D是同一类型

Compatibilité de type entre les objets

    Pour les types d'objets, si les membres de y sont au moins les mêmes que x, alors x est compatible avec y (plus de membres peuvent être compatibles avec moins).

class pointl2D{x!:number;y!:number}
class pointl3D{x!:number;y!:number;z!:number}
const ppl:Pointl=new pointl3D();

Compatibilité des types entre les interfaces

interface Int1{
    x:number
    y:number
}
interface Int2{
    x:number
    y:number
}
interface Int3{
    x:number
    y:number
    z:number
}
let inte1:Int1={x:1,y:2};
let inte2:Int2={x:1,y:2};
let inte3:Int3={x:1,y:2,z:3};
inte1=inte2;
inte2=inte1;
inte1=inte3;
inte3=inte1;//报错

Compatibilité entre classe et interface

interface ic1{
    x:number
    y:number
}
class ic2{
    x!:number
    y!:number
}
let ict:ic1=new ic2();

Compatibilité entre les fonctions

    La compatibilité entre les fonctions doit tenir compte de trois aspects.

1. Le nombre de paramètres
       est plus compatible avec moins de paramètres. (Ceux qui ont moins de paramètres peuvent être assignés à ceux qui ont plus de paramètres)

type F1=(a:number)=>void
type F2=(a:number,b:number)=>void
let f1:F1=(a)=>{};
let f2:F2=(a,b)=>{};
f2=f1;
f1=f2;//报错

2. Les types de paramètres
       à la même position doivent être identiques (type primitif) ou compatibles (type objet)

type F1=(a:number,b:string)=>void
type F2=(a:number,b:number)=>void
let f1:F1=(a,b)=>{};
let f2:F2=(a,b)=>{};
f2=f1;//报错

interface ic1{
    x:number
    y:number
}
class ic2{
    x!:number
    y!:number
}
type F1=(a:number,b:ic1)=>void
type F2=(a:number,b:ic2)=>void
let f1:F1=(a,b)=>{};
let f2:F2=(a,b)=>{};
f2=f1;

3. type de retour
   • Si le type de valeur de retour est un type primitif, les deux types doivent être identiques

type F5=()=>string;
type F6=()=>string;
let f5:F5=()=>'1';
let f6:F6=()=>'1';
f6=f5;

- 如果返回值类型是对象类型，此时成员多的可以赋值给成员少的（和对象类型一直）

type F7=()=>{name:string}
type F8=()=>{name:string;age:number}
let f7:F7=()=>{return{
    name:'111'
}};
let f8:F8=()=>{return{
    name:'111',
    age:10
}};
f7=f8;
f8=f7;//报错

&type croisé

    Le type et la fonction croisés sont similaires à l'héritage d'interface, utilisé pour combiner plusieurs types en un seul type (souvent utilisé pour les types d'objets)

interface jio1{name:string}
interface jio2{age:number}
type Jio = jio1&jio2;
let obj:Jio={
    name:'111',
    age:10
}

Comparaison des types d'intersection et de l'héritage d'interface

1. Le même point
       peut réaliser la combinaison de types d'objets.
2. La différence est que
       lorsque les deux méthodes implémentent une combinaison de types, les méthodes de gestion des conflits de type entre les attributs portant le même nom sont différentes.

interface A{
    fn(a:number):string
}
interface B extends A{//报错，类型不兼容
    fn(a:string):string
}

interface A{
    fn(a:number):string
}
interface B{
    fn(a:string):string
}
type C = A & B

    Pour C, nous pouvons le comprendre comme le code suivant

interface A{
    fn(a:number):string
}
interface B{
    fn(a:string):number
}
type C = A & B

class cc implements C{
    fn(a: number): string;
    fn(a: string): number;
    fn(a: unknown): string | number {
        return ''
    }
}

générique

    Les génériques peuvent permettre à plusieurs types tels que les fonctions de fonctionner ensemble sur le principe de la protection de la sécurité des types, permettant ainsi la réutilisation. Exemple : implémentez une fonction qui renvoie toutes les données saisies.

function id<Type>(value:Type):Type{
    return value
}
id<number>(10);
id(10);//如果编译器推断的类型不准确，我们必须在括号前声明类型
id<string>(10);//报错
//Type也可以写成别的合法名称

Contraintes génériques

function id2<Type>(value:Type):Type{
    return value.length//报错
}

    Ajouter des contraintes génériques

1. Spécifiez un type plus spécifique

function ida<type>(value:type[]):type[]{
    return value.length
}

2. étendAjouter des contraintes

interface ILength{length:number};
function ide<type extends ILength>(value:type):type{
    console.log(value.length);
    return value
}
ide([]);
ide('');
ide({length:0,name:'0'});

Le cas de plusieurs variables génériques

    Le mot-clé keyof prend un type d'objet et produit un type d'union de ses noms de clé (qui peuvent être des chaînes ou des nombres)

function getProp<Type,Key extends keyof Type>(obj:Type,key:Key){
    return obj[key];
}
let objkey={name:'11'};
getProp(objkey,'name');
getProp(objkey,'age');//报错
getProp([],0);
getProp(0,'toString');

interface générique

interface IdFunc<Type>{
    id:(value:Type)=>Type
    ids:()=>Type[]
}
let func1:IdFunc<number>={
    id(value) {
        return value
    },
    ids() {
        return []
    },
}

Les tableaux sont des interfaces génériques

    Vous pouvez cliquer pour afficher le code source forEach du tableau.

classe générique

    La classe de base Component dans le composant de classe de React est une classe générique, et différents composants ont des props et des états différents.

interface IState{count:number}
interface IProps{maxLength:number}
class InputCount extends React.Component<IProps,IState>{
    state:IState{
        const:0
    }
    render(){
        return <div>{this.props.maxLength}</div>
    }
}

    créer une classe générique

class Generic<NumType>{
    defaultVlaue!:NumType
    add!:(x:NumType,y:NumType)=>NumType
}
const myGen = new Generic<number>()
myGen.defaultVlaue=10

type d'utilitaire générique

    TypeScript a intégré certains types d'outils couramment utilisés pour simplifier certaines opérations courantes dans TypeScript.

1. Partial
       est utilisé pour construire (créer) un type et définir toutes les propriétés de Type sur facultatives.

interface PropsP{
    id:string
    children:number[]
}
type PartialProps = Partial<PropsP>
class classProps implements PartialProps{
    id!: string;
}

2. Readonly
       est utilisé pour construire un type et définir toutes les propriétés de Type sur readonly (lecture seule)

interface PropsR{
    id:string
    children:number[]
}
type ReadonlyProps = Readonly<PropsP>
let rp:ReadonlyProps={
    id:'1',
    children:[]
}
rp.id='2'//报错

3. Pick
       sélectionne un ensemble de propriétés dans Type pour construire un nouveau type.

interface PropsPi{
    id:string
    children:number[]
}
type PickProps = Pick<PropsPi,'id'>
let pp:PickProps={
    id:'1',
    children:[]//报错
}
//PickProps类型中只有id，所以会报错。

4. Record<Keys,Type>
       construit un type d'objet, la clé d'attribut est Keys et le type d'attribut est Type. Record passe dans deux variables de type, la première indique les propriétés de l'objet et la seconde indique le type des propriétés de l'objet.

type RecordObj=Record<'a'|'b'|'c',string[]>
let objRec:RecordObj={
    a:['1'],
    b:['1'],
    c:['1']
}

Type de signature d'index

    Lorsqu'il est impossible de confirmer quels attributs se trouvent dans l'objet ou qu'un certain nombre d'attributs peuvent apparaître dans l'objet, le type de signature d'index est utilisé à ce moment.

interface AnyObject{
    [Key:string]:number
}
let anyobj:AnyObject={
    a:1,
    'b':2,
}
//Key只是一个占位符，可以换成任意合法的变量名称。

type de mappage

type PropKeys='x'|'y'|'z'
type Type1={x:number;y:number;z:number}
type Type2={[Key in PropKeys]:number}//映射
//Key只是一个占位符，可以换成任意合法的变量名称

type Props={a:number,b:string,c:boolean}
type Type3={[Key in keyof Props]:number}

Analyser la mise en œuvre de l'outil générique de type Partiel

type Partials<T>={
    [P in keyof T]?:T[P]
}
type ParText={a:number;b:string;c:boolean}
type part=Partials<ParText>

type de requête d'index

1. utilisation de base

type Propsi={a:number;b:number;c:number}
type Tyepi=Propsi['a'];

2. requête multiple

type Propsi={a:number;b:number;c:number}
type Tyepi2=Propsi['a'|'b'];
type Tyepi3=Propsi[keyof Propsi];

fichier de déclaration de type

Deux types de fichiers dans TypeScript

    Presque toutes les applications JavaScript d'aujourd'hui introduiront de nombreuses bibliothèques tierces pour répondre aux exigences de la tâche. Que ces bibliothèques tierces soient écrites ou non en TS, elles doivent être compilées en code JS à la fin avant de pouvoir être diffusées aux développeurs. Nous savons que TS fournit des types, il existe donc des mécanismes tels que des conseils de code et une protection de type. Mais lorsque vous utilisez des bibliothèques tierces dans le développement de projets, vous constaterez que presque toutes ont des types TS correspondants. D'où viennent ces types ? Fichiers de déclaration de type : utilisés pour fournir des informations de type pour les bibliothèques JS existantes. De cette façon, lors de l'utilisation de ces bibliothèques dans un projet TS, tout comme l'utilisation de TS, il y aura des conseils de code, une protection de type et d'autres mécanismes.

1. Deux types de fichiers de TS
   • fichiers .ts
     1. Contient à la fois les informations de type et le code exécutable
     2. Peut être compilé dans un fichier .js puis exécuter le code
     3. But : Un endroit pour écrire le code du programme
2. Mode d'emploi des fichiers de déclaration de type
   • fichiers .d.ts
     1. Un fichier de déclaration de type qui contient uniquement des informations de type
     2. Aucun fichier .js ne sera généré, uniquement utilisé pour fournir des informations de type
     3. Objectif : fournir des informations de type pour js
        ※.ts est un fichier d'implémentation de code ; .d.ts est un fichier de déclaration de type

Fichiers de déclaration de type pour les bibliothèques tierces

1. Le fichier de déclaration de type fourni avec la bibliothèque
2. Fourni par DefinitelyTyped

Créez votre propre fichier de spécification de type

1. Types partagés au sein d'un projet
       Si le même type est utilisé dans plusieurs fichiers .ts, vous pouvez créer un fichier .d.ts pour fournir ce type afin de réaliser le partage de type.

• Pas
  1. Créer un fichier de déclaration de type d'événement index.d.ts
  2. Créez des types qui doivent être partagés et utilisez l'exportation pour exporter (les types dans TypeScript peuvent également utiliser l'importation/exportation pour obtenir des fonctions modulaires)
  3. Dans le fichier .ts qui doit utiliser le type partagé, il peut être importé via import (lorsque le suffixe .d.ts est importé, il est directement omis)

2. Fournir des déclarations de type pour les fichiers JS existants
   1. Lors de la migration de projets JS vers des projets TS, afin de permettre aux fichiers js existants d'avoir des déclarations de type.
   2. Devenez un auteur de bibliothèque et créez des bibliothèques que d'autres pourront utiliser.
   • Remarque : les fichiers .js peuvent également être utilisés dans les projets TypeScript. Lors de l'importation de fichiers .js, TypeScript charge automatiquement les fichiers .d.ts portant le même nom que .js pour fournir des déclarations de type. Le mot-clé declare : utilisé pour les déclarations de type, déclarant des types pour des variables qui existent déjà ailleurs (comme les fichiers .js) au lieu de créer un nouveau type.
     1. Pour type.interface, etc., qui sont clairement de type TS (utilisé uniquement dans TS), le mot clé declare peut être omis.
     2. Pour let.function, qui a une double signification (utilisable à la fois dans JS et TS), le mot clé declare doit être utilisé pour spécifier clairement qu'il est utilisé pour la déclaration de type.

Utiliser TypeScript avec React

Utiliser CRA pour créer un projet compatible avec TypeScript

    La commande pour créer un projet prenant en charge TypeScript : npx create-react-app nom du projet.     Par rapport aux projets non TypeScript utilisant TypeScript dans des projets existants , la structure du répertoire change principalement des trois manières suivantes.

1. Le fichier de configuration tsconfig.json est ajouté au répertoire racine du projet : spécifiez les options de compilation TS (par exemple, s'il faut supprimer les commentaires lors de la compilation).
2. L'extension de fichier pour les composants React devient : *.tsx.
3. Le fichier de déclaration de type react-app-env.d.ts: default pour les projets React a été ajouté au répertoire src.
4. La directive triple barre oblique dans le fichier react-app-env.d.ts spécifie d'autres fichiers de déclaration de type dépendants, et types indique le nom du package de fichier de déclaration de type dépendant.

Fichier de configuration TypeScript tsconfig.json

{
  "compilerOptions": {
    "target": "es6",//生成代码的语言版本
    "lib": [//指定要包含在编译中的library
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,//允许ts编译器编译js文件
    "skipLibCheck": true,//跳过声明文件的类型检查
    "esModuleInterop": true,//es模块互操作，屏蔽ESModule和CommonJS之间的差异
    "allowSyntheticDefaultImports": true,//允许使用import
    "strict": true,//开启严格模式
    "forceConsistentCasingInFileNames": true,//对文件名称强制区分大小写
    "noFallthroughCasesInSwitch": true,//为switch语句启用报错报告
    "module": "esnext",//生成代码的模块化标准
    "moduleResolution": "node",//模块解析（查找）策略
    "resolveJsonModule": true,//允许导入扩展名为.json的模块
    "isolatedModules": true,//是否将没有import/export的文件规为旧（全局而非模块化）脚本文件
    "noEmit": true,//编译时不生产任何文件（只进行类型检查）
    "jsx": "react-jsx"//将指定jsx编译成什么形式
  },
  "include": [//指定允许ts处理的目录
    "src"
  ]
}

Types couramment utilisés dans React

    Lorsque vous n'utilisez pas TypeScript, vous pouvez utiliser la bibliothèque prop-types pour fournir une vérification de type pour les composants React. Dans les projets TypeScript, il est recommandé d'utiliser TypeScript ou Flow pour implémenter la validation du type de composant (au lieu des prop-types)

composant de fonction

1. Types de composants et de propriétés

//组件和属性类型
import React,{FC} from 'react';
type Props={name:string;age?:number}
const Hello:FC<Props>=({name,age})=>(
  <div>你好，我叫：{name}，我{age}岁了</div>
)
const Hello2=({name,age}:Props)=>(
  <div>你好，我叫：{name}，我{age}岁了</div>
)

2. Valeurs par défaut pour les propriétés du composant (defaultProps)

//属性默认值
import React,{FC} from 'react';
const Hello:FC<Props>=({name,age})=>(
  <div>你好，我叫：{name}，我{age}岁了</div>
)
Hello.defaultProps={
  age:18
}
const Hello2=({name,age=18}:Props)=>(
  <div>你好，我叫：{name}，我{age}岁了</div>
)

3. Liaison d'événement et objets d'événement

//事件与事件对象
import React from 'react'

export default function Test() {
  function onclick(e:React.MouseEvent<HTMLButtonElement>){
    console.log(e.currentTarget);
  }
  function onchange(e:React.ChangeEvent<HTMLInputElement>){
    console.log(e.target);
    
  }
  return (
    <div>
      <button onClick={onclick}>你点我一下</button>
      <input type="text" onChange={onchange} />
    </div>
  )
}

composant de classe

1. Composants et types

type State = { count: number }
type Props = { message? :string }
class C1 extends React.Component }// 无props、state
class C2 extends React.Component<Props> {}//有props,无state
class C3 extends React.Component<{}, State> }//无props, 有state
class C4 extends React.Component<Props, State> 年} //有props、state

2. Propriétés des composants et valeurs par défaut

import React, { Component } from 'react'
type Props = { name:string;age?:number }
export default class TestClass extends Component<Props> {
  static defaultProps:Partial<Props>={
    age:14
  }
  render() {
    const {name,age=18} = this.props
    return (
      <div>
        你好，我叫：{name}，我{age}岁了
      </div>
    )
  }
}

3. Statut et événements

import React, { Component } from 'react'
type State = { count:number }
export default class TestClass extends Component<{},State> {
  state:State={
    count:0
  }
  add=()=>{
    this.setState({
        count:this.state.count+1
    })
  }
  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.add}>+1</button>
      </div>
    )
  }
}