[TypeScript] Introduction à TypeScript et aux types de variables pour la première fois

1. Qu'est-ce que TypeScript ?

• Principalement pour résoudre le type manquant de js
• Cela peut être vérifié pendant la phase de développement et un message d'erreur sera donné

Caractéristiques:

• Un langage construit sur js
• Un surensemble de js
• Ts étend js et ajoute des types
• Ts peut être exécuté sur n'importe quelle plate-forme prenant en charge js
• Ts ne peut pas être directement exécuté par l'analyseur js, il doit être compilé, généralement compilé en js par Babel/TSC
• Prend également en charge les nouvelles fonctionnalités d'es
  

2. L'impact du manque de type

• Lors du développement d'un projet à grande échelle, le projet est énorme et n'a aucune contrainte de type, ce qui entraînerait des risques de sécurité.
• Lorsque plusieurs personnes développent, sans contraintes de type, il est nécessaire d'effectuer diverses vérifications sur les paramètres transmis par d'autres.

3. Environnement de construction Ts - ce blogueur a un article spécial pour expliquer cela

• npm je -v dactylographié -g
• tsc

4. Utilisez tsc pour compiler le fichier ts

• entrez la ligne de commande
• Entrez le répertoire où se trouve le fichier ts
• Exécutez la commande tsc xxx.ts
  

5. Première expérience du fonctionnement du TS

//string,TypeScript给我们定义的标识符，提供的字符串类型
//String，JavaScript中的字符串的包装类
let myname: string="乞力马扎罗"
// myname=112,这样就不可以，因为上面已经明确告诉你指定类型了
console.log(myname)

• Chaque fois que vous souhaitez exécuter le fichier ts ci-dessus, vous devez suivre deux étapes
• Étape 1 : Compiler en code TypeScript via tsc
• Étape 2 : Exécutez le code JavaScript dans le navigateur ou dans l'environnement Node
• un peu encombrant~

Simplifier les étapes de fonctionnement des Ts

Solution 1

• Configurez l'environnement de compilation TypeScript local et ouvrez un service local via webpack, qui peut s'exécuter directement sur le navigateur
• Convertir diverses compilations de vue en js et css via le chargeur de webpack
  

Solution 2 (commune)

• Fournir un environnement d'exécution pour le fonctionnement de TypeScriot via la bibliothèque ts-node
• Installer le nœud ts

npm install ts-node -g

• Besoin de s'appuyer sur deux packages tslib et @types/node

 npm install tslib @types/node -g

• Utilisez le nom du fichier ts-node ts pour exécuter le fichier ts

Commencer à apprendre

1. Déclaration des variables

• Les types de données suivants sont également appelés annotations de type et peuvent être omis
  
• semblable à ceci

let myname: string="乞力马扎罗"
// myname=112,这样就不可以，因为上面已经明确告诉你指定类型了
console.log(myname)

mots-clés de déclaration de variable

• var n'est pas recommandé car il n'y a pas de portée au niveau du bloc et cela posera des problèmes

Déduction de type variable (inférence)

• Dans les projets réels, chaque variable ne sera pas annotée par type, et nous espérons utiliser les caractéristiques de ts lui-même pour nous aider à déduire le type de variable correspondant.
• Lorsque ts déclare un identifiant, s'il attribue directement une valeur, il en déduira l'annotation de type de l'identifiant en fonction du type d'affectation
• Le type déduit par let est le type général
• Le type déduit par const est le type littéral

let myname1 ="乞力马扎罗"
//myname1=112//,这样也不可以，因为上面已经推导出string类型了
console.log(myname)

2, le type de variable

• type littéral
  

• type de numéro

• Ts, comme Js, ne fait pas de distinction entre le type entier (int) et le type à virgule flottante (double) et est unifié en tant que type numérique.

• type booléen

• Le type booléen n'a que deux valeurs, vrai et faux

• type de chaîne

• type sting, les guillemets simples et les guillemets doubles sont pris en charge, et les chaînes de modèles sont également prises en charge

• type de tableau

// 注意，在开发中，数组中存放的都是相同的类型
// 1,sting[],数组类型，并且数组中存放的字符串类型，常用写法
// 2,Array<number>,数组类型，这种的只能存放数值，这种的其实是泛型的写法
let num = ['1', '2', '3']
let num1: string[] = ['1', '2', '3']
let num2: Array<number> = []
let num3: Array<string> = []

• Type d'objet

// 写法一，类型推导写法
let obj = {
    
    
    name: "乞力马扎罗",
    age: 18
}
// 写法2
type objtype = {
    
    
    name: string
    age: number
}
let obj1: objtype = {
    
    
    name: "乞力马扎罗",
    age: 18
}
// 写法3
let obj3: {
    
    
    name: string
    age: number
} = {
    
    
    name: "乞力马扎罗",
    age: 18
}
console.log(obj3.age)
// 写法4，不建议，它是空对象，不能调用obg2.name等
// object对象类型可以用于描述一个对象，不能获取和设置数据
let obj4: object = {
    
    
    name: "乞力马扎罗",
    age: 18
}
// console.log(obj4.age)//报错

• Dans l'objet, il n'est pas possible d'ajouter le même nom de propriété, comme ceci

// 写法一
let obj = {
    
    
    name: "乞力马扎罗",
    name:"嘿嘿",
    age: 18
}
//通过采取symbol定义相同的名称，因为Symbol函数返回不同的值
const s1: symbol = Symbol("title")
const s2: symbol = Symbol("title")
let obj3 = {
    
    
    s1: Symbol("乞力马扎罗"),
    s2: Symbol("乞力马扎罗"),
    age: 18
}

• type nul et type non défini

let n: null = null
let u: undefined = undefined

3. Type de fonction - paramètres

• Lorsque le paramètre de la fonction ne donne pas de type clair, la valeur par défaut n'importe quel type
• Lors de la définition d'une fonction dans TypeScript, le type du paramètre doit être clairement spécifié

function sum(num1:number, num2:number) {
    
    
    return num1 + num2
}
sum(1,2)

4. Type de fonction - valeur de retour

• La valeur de retour de la fonction peut être déduite en fonction du contenu renvoyé
• Vous pouvez également spécifier le type de valeur de retour

//方式1
function sum(num1: number, num2: number) {
    
    
    return num1 + num2
}
let sum2: string = sum(1, 2)//报错
console.log(sum2)
//方式2
function sum(num1: number, num2: number):number {
    
    
    return num1 + num2
}
let sum2 = sum(1, 2)
console.log(sum2)

• Le type renvoyé est incorrect, provoquant une erreur

5. Paramètres des fonctions anonymes

const arrs =['1','2','3']
//匿名函数，作为参数传递给另一个函数，是否要类型注解?最好不要加！
//forEach接收的是函数，里面的值已经有明确的类型，它是根据上下文推导出来的
//类似此时，item并没有指定类型，但是item是string类型
//这个根据上下文进行推导参数何返回值的类型的过程叫做上下文类型
arrs.forEach(function(item,index,arr){
    
    
    console.log(item,index,arr)
})

6. L'utilisation de types d'objets

• Combinaison de types d'objet et de types de fonction
• Dans l'objet, nous pouvons ajouter des propriétés et indiquer le type dont la propriété a besoin
• Les attributs peuvent être séparés par ou ; pour séparer, le dernier séparateur est facultatif
• La partie type de chaque attribut est également facultative. Si elle n'est pas spécifiée, il s'agit de n'importe quel type.

type Pointtype={
    
    
    x:number
    y:number//如果不指定，下面就是any类型
    z?:number//可选，下面不传也不会报错
}
function handler(point:Pointtype){
    
    
    console.log(point.x)
}
handler({
    
    x:1,y:2})

6, tout type

• Attribuez n'importe quelle valeur à une variable de n'importe quel type, comme un nombre ou une valeur de chaîne
• Généralement, lorsque les données obtenues sont trop lourdes, utilisez-les n'importe où.

let id = "1"
id = "2"
// id = 2//报错
// 故：
// any类型就表示不同标识符的任意类型，并且可以在该标识符上面进行人员的操作
let id1: any = "1"
id1 = "2"
id1 = 2//不报错

• Définir un tableau de type any

let idarrs: any[] = ['1',1,[2]]

7, type inconnu

• Un type spécial utilisé pour décrire des variables incertaines
• Similaire à n'importe quel autre, mais il est illégal de faire quoi que ce soit sur une valeur de type inconnu
• Si vous ne souhaitez pas signaler d'erreur, vous devez d'abord réduire le type

let idarrs: unknown="999"
idarrs=2
// console.log(idarrs.length)//报错
// 解决报错，必须先校验，也叫类型缩小
if(typeof idarrs=='string'){
    
    
    console.log(idarrs.length)//不报错
}

7. type vide

• void spécifie généralement qu'une fonction n'a pas de valeur de retour, donc sa valeur de retour est de type void
• Une fois void défini, il n'est pas obligatoire d'avoir une valeur de retour return
• Lorsque le type dérivé en fonction du contexte est nul, cela n'oblige pas la fonction à ne pas renvoyer de fonction.
• Vous pouvez également affecter undéfini à une fonction de type void ou renvoyer undéfini
  

//方式1
type Pointtype = {
    
    
    x: number
    y: number
}
function handler(point: Pointtype): void {
    
    
    console.log(point.x)
}
handler({
    
     x: 1, y: 2 })
//方式2，自己推导写法
const foo = () => {
    
     }
//方式2,用来指定函数的类型
const foo1: () => void = () => {
    
     }
//方式3,清晰写法
type footype = () => void
const foo2: footype= () => {
    
     }
//方式4,函数调用,指定函数的类型为void，传的时候必传函数
function funs(fn:()=>void){
    
    
    setTimeout(()=>{
    
    
        handler({
    
     x: 1, y: 2 })
    },100)
}
// funs(123)//不可以传，会报错，因为人家接收函数类型，你传数值
funs(()=>{
    
    })//不可以传，会报错，因为人家接收函数类型，你传数值

8, ne tape jamais

• Il est rare de définir réellement le type "jamais" en développement
• auto-dérivation dans certains cas
• Utilisé dans le framework de développement ou lors de l'encapsulation de certains types d'outils

• Une exception est levée dans une fonction ou une boucle infinie lèvera une exception

9, type de tuple (type de tuple)

• Il est généralement recommandé de stocker des éléments du même type dans un tableau. Il n'est pas recommandé de stocker des éléments de types différents dans un tableau. Dans ce cas, ils peuvent être placés dans des objets ou des tuples.
• Deuxièmement, chaque élément du tuple a son propre type caractéristique, et le type correspondant peut être déterminé en fonction de la valeur obtenue par la valeur d'index.

// 存放多种类型值的方法
// 1,any类型
// 2,使用对象
const info2 = {
    
    
    name: "1",
    age: 2,
    height: 19.8
}
//使用元组类型
const info: [string, number, number] = ['1', 2, 2.88]