【TypeScript】 Détails de la syntaxe, types et fonctions

Utilisation d'alias de type (type)

• Pour résoudre le problème selon lequel la définition du type d'union est trop longue
• Utiliser des alias de type

// 使用关键字type定义类型别名对象,可以复用
type myname = number | string
function hander1(name: myname) {
    
    
    console.log(name)
    if (typeof name === 'string') {
    
    
        console.log(name.length)
    }
}
//不使用类型别名
function hander2(x: number,y:number,z?:number) {
    
    
}
//使用类型别名
type myx={
    
    x: number,y:number,z?:number}
function hander3(mytype:myx) {
    
    
}

Utilisation des déclarations d'interface

• Le mot-clé est déclaré à l'aide de l'interface
• Par rapport aux alias de type, less =

//接口interface,没有=号
interface myX2 {
    
    
    x: number 
    y: number 
    z?: number
}
//使用接口声明
function hander4(mytype: myX2) {
    
    
}

La différence entre les deux:

• Les alias de type sont très similaires aux déclarations d'interface et peuvent être utilisés arbitrairement lors de la définition d'objets.
• Différence principale:
• Le type de type est utilisé dans une gamme plus large
• type définit un alias, et deux alias avec le même nom ne sont pas autorisés

type myname = number | string

• 1. Les types d'interface ne peuvent être utilisés que pour déclarer des objets
• 2. Lorsqu'un type d'interface déclare un objet, il peut être déclaré plusieurs fois
• 3. Les types d'interface prennent en charge l'héritage
• 4. Le type d'interface prend en charge l'implémentation par la classe

//接口interface,没有=号，可以多次声明
interface myX2 {
    
    
    x: number 
    y: number 
}
//接口interface,没有=号
interface myX2 {
    
    
    z?: number
}
//使用接口声明
function hander4(mytype: myX2) {
    
    
}




//接口interface，支持继承
interface myX2 {
    
    
    x: number 
    y: number 
}
interface myX3 extends myX2 {
    
    
    z?: number
}
function hander5(mytype: myX3) {
    
    
    console.log(mytype.x,mytype.y,mytype.z)
}
hander5({
    
    x:1,y:2,z:3})

type d'union et type d'intersection

type de syndicat

• ts nous permet d'utiliser une variété d'opérateurs pour créer de nouveaux types à partir de types existants
• type d'union Type composé de deux types ou plus
• La représentation peut être n'importe lequel de ces types de valeurs
• Chaque type d'un type d'union est appelé membre de l'union.

// 联合类型
function hander(name: number | string) {
    
    
    console.log(name)
}
hander(1)
hander("123")

//联合类型
let nainfo: number | string = "abc"
nainfo = 1
nainfo = "123"

//但联合类型要使用的时候,要注意类型缩小,类似
// 联合类型
function hander1(name: number | string) {
    
    
    console.log(name)
    if (typeof name === 'string') {
    
    
        console.log(name.length)
    }
}
hander1(1)
hander1("123")

• Avis:
• Après avoir pris la valeur du type d’union, puisqu’il peut être de n’importe quel type, comment l’utiliser ?
• Semblable à l'obtention d'un nombre, certaines méthodes de chaîne ne peuvent pas être utilisées
• résoudre:
• Vous devez utiliser la collection réduite, c'est-à-dire la réduction de type, et déduire un type plus spécifique basé sur le code réduit

type croisé

• Les types qui se croisent indiquent que plusieurs types de conditions doivent être remplies
• Les types d'intersection utilisent l'esperluette

//交叉类型，两种或者多种类型同时满足
type myY = number & string//想同时满足数值和字符串类型，不可能，估没有意义
type myY2 = number & string

interface myX2 {
    
    
    x: number
    y: number
}
interface myX3 {
    
    
    z?: number
    p: () => void
}
//表示即满足myX2也得满足myX3，否则里面会有报错提示
const info: myX2 & myX3 = {
    
    
    x: 1,
    y:2,
    p:()=>{
    
    
        console.log("方法")
    }
}

assertion de type

• Parfois, ts ne peut pas obtenir d'informations spécifiques sur le type de quota, et pour le moment, une assertion de type est requise
• TS autorise uniquement la conversion des assertions de type en versions plus ou moins spécifiques du type, cette règle empêche les conversions impossibles.

Obtenir l'élément DOM

// <img class="img">。使用类型缩小使用，只知道会返回html类型，但不知道具体类型
const imgE1 = document.querySelector("img")
// imgE1.src = "",会报错
if (imgE1 != null) {
    
    
    imgE1.src = ""
}
// <img class="img">。此时imgE2为element，不能直接使用,使用类型断言
//当你确信他存在且为html时，直接使用类型断言为更具体的样子，
const imgE2 = document.querySelector(".img") as HTMLImageElement
imgE2.src = ""

• Pareil, comme ça. Les assertions de type deviennent moins spécifiques comme

const num = 12
const num2 =num as any

• Vous pouvez également continuer et affirmer des types moins spécifiques pour être plus précis
• Cependant, de telles affirmations ne sont pas prises en charge, ce qui présente des risques potentiels pour la sécurité.

const num = 12
const num2 =num as any
const num3 =num2 as string

assertion de type non nulle

• Lorsque la valeur transmise peut être indéfinie, la méthode ne peut pas être exécutée pour le moment
• En utilisant le symbole !, vous devez vous assurer qu'un certain identifiant a une valeur, et vous pouvez ignorer sa détection par TS au stade de la compilation.

interface hander{
    
    
    name:string,
    age:number,
    size?:number
}
const info: hander={
    
    
    name:"乞力马扎罗",
    age:18
}
//访问可以用可选的
console.log(info?.size)

//赋值的时候,可选链不行
// info?.size=23

// 解决方法：
// 1，类型缩小
if(info.size){
    
    
    info.size=23
}
// 2.非空类型断言,有点危险，确保非空值的父值一定有值，才能使用
info!.size=23
console.log(info.size)//23

Utilisation de types littéraux

• Traitez la valeur attribuée comme un type et utilisez uniquement des littéraux lorsque vous l'utilisez
• Cela n'a pas beaucoup de sens par défaut, mais il est possible d'unir plusieurs types ensemble, vous ne pouvez être que l'un des nôtres.

type numtype = "left" | "top" | "up"
const num3: numtype = "left"

// 使用背景
// 一般请求方式，get或者post
// 采用这种方式，可以让用户必须传get或者post，否则报错
type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    

}
reqest('http//xxx.com', 'get')

• Utiliser l'arrière-plan

// 使用背景
// 一般请求方式，get或者post
// 采用这种方式，可以让用户必须传get或者post，否则报错
type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    

}
const  hander={
    
    
    url:'xxx',
    method:'post'
}
// reqest('http//xxx.com',hander.method)
//报错，报错原因，不认识你这个hander.method获取的是string类型，不是get或者post

• Solution 1

// 解决方法1:类型断言
reqest('http//xxx.com',hander.method as "post")

• Solution 2

// 解决方法2，直接让hander对象是个字面量类型
const  hander1 :{
    
     url:string,method:'post'}={
    
    
    url:'xxx',
    method:'post'
} as const
reqest('http//xxx.com',hander1.method)
// 或者，字面量推理
const  hander2={
    
    
    url:'xxx',
    method:'post'
} as const
reqest('http//xxx.com',hander2.method)

type rétrécissement (type rétrécissement)

• Vous pouvez modifier le chemin d'exécution de ts en utilisant une instruction de jugement similaire à la suivante

if(info.size){
    
    
    info.size=23
}

• Des déclarations comme celle-ci sont également appelées gardes de type
• Dans un chemin d'exécution donné, les types plus petits que ceux déclarés peuvent être restreints, un processus appelé rétrécissement.
• Types courants de protection
• typeof, vérifiez le type renvoyé

type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    
    if(typeof url ==='string'){
    
    
        console.log(url)
    }
}

• Rétrécissement égal (=== et !== et ==, etc.), jugement littéral

type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    
    if(method==="get"){
    
    
        console.log(method)
    }
}

• instanceof, indiquant s'il s'agit d'une instance de ceci

//传入一个实例
function reqest(data:string|Date) {
    
    
   if(data instanceof Date){
    
    
    console.log(data.getTime())
   }
}

• in , utilisé pour déterminer si un objet possède une propriété avec un nom, l'opérateur in
• etc…

Types de fonctions TypeScript

expression de type de fonction

• Les expressions de types de fonctions peuvent être écrites pour représenter les types de fonctions
• En ts, le nom du paramètre formel dans le type de fonction ne peut pas être omis

// 函数类型表达式
// 格式：(参数列表)=>返回值
const fun: (num2: number) => number = (arg: number): number => {
    
    
   return 123
}
// 为了可阅读性,类型形参里的名不能省略
type funtype = (num2: number) => number//这个就代表一个函数类型
const fun2: funtype = (arg: number) => {
    
    
   return 123
}

// 例子，传入计算方式，计算两位数字,js写法
function cals(func) {
    
    
   const num1 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func1(num1, num2) {
    
    
   return num1 + num2
}
cals(func1)

//ts写法
type calstype = (num1: number, num2: number) => number
function cals1(func: calstype) {
    
    
   const num1 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func2(num1: number, num2: number) {
    
    
   return num1 * num2
}
cals1(func2)

Détection de règles internes

// ts对于很多的类型的检测报不报错，取决于它的内部规则
interface gule {
    
    
   name: string
   age: number
}
//直接写报错，原因，第一次定义的时候，会检测规则报错
//  const info:gule={
    
    
//    name:"山头",
//    age:12,
//    size:'大'
//  }

//但取决于内部规则，赋值完，再使用，这样就没检测，单指size的增加，其他已定义的还是会检测
const p = {
    
    
   name: "山头",
   age: 12,
   size: '大'
}
const info: gule = p

signature d'appel de fonction

• En js, en plus d'être appelées, les fonctions peuvent également avoir des valeurs d'attribut
• Les expressions de type ne prennent pas en charge la déclaration de propriétés
• Lorsque vous voulez une fonction avec des propriétés, écrivez une signature d'appel dans un type d'objet

//函数表达式，这里是箭头
//不能声明其他属性
type obj2 = (num1: number) => number



//调用签名
interface obj {
    
    
   name: string
   age: number
   //函数可以调用：函数调用签名，这里是冒号
   (num1: number): number
}

const func: obj = (num1: number): number => {
    
    
   return 123
}
func(123)

Comment les choisir ?

• Si vous décrivez simplement le type de fonction lui-même (le type de fonction peut être appelé), utilisez une expression de fonction
• Si vous décrivez la fonction comme un objet pouvant être appelé et possédant également d'autres propriétés, utilisez la signature d'appel de fonction

type de paramètre facultatif

• Les paramètres facultatifs doivent être placés après les paramètres requis

// 可选参数类型是什么
// 当不传的时候，y就是undefined类型，也就是number|undefined联合类型
function fun(x:number,y?:number){
    
    
   console.log(x,y)
   if(y!=undefined){
    
    
      console.log(y)
   }
}
fun(1)

la valeur par défaut du paramètre

// 函数的参数有默认值
// 有默认值的情况下，参数的类型注解可以省略
// 此时，有默认值的参数，哪怕是number，也可以接收一个undefined类型
function fun(x:number,y=100){
    
    
   console.log(x,y)
   if(y!=undefined){
    
    
      console.log(y)
   }
}
fun(1)

paramètres restants

• La syntaxe des paramètres rest nous permet de représenter un nombre indéfini de paramètres sous forme de tableau.
• En utilisant les paramètres restants, nous pouvons définir une fonction qui calcule une somme dont les paramètres formels ne sont pas fixes.

function sum (first, ...args) {
    
    
    console.log(first); // 10
    console.log(args); // [20, 30] 
}
sum(10, 20, 30)；
// 或者
// 剩余参数，通过这种方式扩展了类型注解
function fun(...arrs: (string| number)[]) {
    
    

}
fun(1,2,3,'4')

surcharge de fonctions

• En ts, vous pouvez écrire différentes fonctions surchargées pour indiquer que la fonction peut être appelée de différentes manières
• Généralement, deux ou plusieurs signatures surchargées sont écrites. Ensuite, écrivez une fonction générale et implémentez

// 需求。将两个数字或者字符串相加
// 联合类型，这个案例用不了

// 普通实现
// function add(n1, n2) {
    
    
//    return n1 + n2
// }
// add(1,2)通用函数不可调用

//函数重载
//1，先编写重载函数
function add2(n1:number, n2:number):number
function add2(n1:string, n2:string):string

//2，再编写通用的函数
function add2(n1:any, n2:any) {
    
    
   return n1 + n2
}
console.log(add2(1,2))//3
console.log(add2("1","2"))//12

// add2("1",2)//函数 不能被调用，没有对应的重载函数

Surcharge de fonctions - type d'union (usage préféré)

• Utilisez les types d’union là où vous le pouvez

//函数重载-联合类型
//定义一个函数，可以传入字符串或者数组，获取他们的数组
//1，编写重载函数-联合类型
function add2(arg:string|any[]) {
    
    
   return arg.length
}
console.log(add2("123"))//3