Un voyage pour apprendre la dactylographie.

Bonjour à tous, J'ai récemment commencé mon parcours TypeScript et j'ai progressé grâce au cours avancé de développement Web de Programming Hero. J'avais quelques connaissances de base de TypeScript mais je ne l'avais pas exploré en profondeur. Mon cours a commencé par une plongée approfondie dans TypeScript. Une semaine s'est écoulée et j'ai fait des progrès significatifs dans mon apprentissage. Voici un aperçu simplifié des concepts clés que j'ai compris.

TypeScript est comme JavaScript, mais avec des super pouvoirs !

TypeScript est un sur-ensemble de JavaScript qui ajoute un typage statique facultatif au langage. Cela signifie que vous pouvez déclarer les types de variables, les paramètres de fonction et les valeurs de retour, ce qui peut aider à détecter les erreurs potentielles dès le début du processus de développement.
Avantages de l'utilisation de TypeScript

• Détection précoce des erreurs
• Lisibilité améliorée du code
• Fiabilité améliorée du code
• Meilleure complétion du code et IntelliSense
• Accompagnement de projets à grande échelle

Types de données primitifs et non primitifs

Les types de données primitifs représentent des valeurs uniques et sont stockés directement en mémoire. voici quelques-uns des types de données primitifs utilisés dans TypeScript

• chaîne
• numéro
• booléen
• indéfini
• nul

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

comme vous pouvez le voir dans l'exemple pour attribuer un type à une variable, vous devez utiliser le symbole deux-points ( : ) après avoir défini le nom de la variable puis le type.

Les types de données non primitifs, également appelés types de référence, représentent des structures de données complexes et sont stockés sous forme de références à des emplacements mémoire. TypeScript prend en charge les types de données non primitifs suivants :

• Objet
• Tableau
• tuple
• fonction

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

Tapez l'alias

Un alias de type dans TypeScript est un moyen de donner un nouveau nom à un type existant. Cela peut rendre votre code plus lisible et maintenable, en particulier lorsqu'il s'agit de types complexes.

// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};

Dans cet exemple, Person est un alias de type qui représente un objet avec des propriétés de nom et d'âge.
Types d'union et d'intersection dans TypeScript
Un type d’union représente une valeur qui peut être de plusieurs types. Il est défini à l'aide du | opérateur.
Un type d'intersection combine plusieurs types en un seul type. Il est défini à l'aide de l'opérateur &.

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};

jamais, inconnu

Le type Never représente des valeurs qui n'apparaissent jamais.
Le type inconnu représente n'importe quelle valeur. C'est plus sûr que n'importe quel type car vous devez effectuer des vérifications de type ou des assertions avant d'utiliser une valeur de type inconnu.

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

Assertion de type

L'assertion de type est un moyen d'indiquer au compilateur TypeScript que vous en savez plus sur un type que lui. C'est une façon de spécifier explicitement le type d'une variable

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

Tapez les gardes

Les gardes de type vous permettent d'affiner le type d'une variable en fonction de certaines conditions. En vérifiant le type d'une variable avant d'accéder à ses propriétés ou méthodes, vous pouvez éviter d'éventuelles erreurs d'exécution.

• type d'opérateur
• instance de l'opérateur

// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};

Interfaces en TypeScript

Une interface dans TypeScript est un modèle pour créer des objets avec des propriétés spécifiques.

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};

Dans cet exemple, l'interface Person définit qu'un objet personne doit avoir les propriétés firstName, lastName et age. Lors de la création d'un objet personne1

Génériques dans TypeScript

Les génériques sont une fonctionnalité puissante de TypeScript qui vous permet de créer des composants réutilisables pouvant fonctionner avec différents types de données.

function error(message: string): never {
    throw new Error(message);
} //the return type is never because there is no data returned.
let value: unknown = "hello";
if (typeof value === "string") {
  let strLength: number = value.length;
}

Dans cet exemple, T est un paramètre de type. Il représente un espace réservé pour n’importe quel type. Lorsque vous appelez la fonction d'identité, vous pouvez passer n'importe quel type d'argument et la fonction renverra le même type.

Contraintes dans TypeScript

Dans TypeScript, les contraintes génériques vous permettent d'appliquer des limitations sur les types qui peuvent être transmis comme arguments à une fonction générique ou utilisés comme paramètres de type dans une classe ou une interface générique.

let value: unknown = "hello";
let strLength: number = (value as string).length;

ici, le mot-clé extends est utilisé pour contraindre les données

La clé de l'opérateur

L'opérateur keyof dans TypeScript est utilisé pour obtenir un type d'union de tous les noms de propriété d'un type d'objet. Ceci est particulièrement utile lorsque vous travaillez avec des types génériques et des types mappés.

//typeof
function printValue(value: unknown) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (typeof value === "number") {
        console.log(value.toFixed(2));   
    }
}
//instanceof
function printDate(date: unknown) {
    if (date instanceof Date) {
        console.log(date.toISOString());
    }
}

Types d'utilitaires

Pick : sélectionne des propriétés spécifiques de T

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}
const person1: Person = {
  firstName: "Alice",
  lastName: "Johnson",
  age: 30
};

Omit : omet les propriétés spécifiques de T

function identity<T>(arg: T): T {
  return arg;
}
identity<string>(string);

Partial : rend toutes les propriétés de T facultatives.

interface Person {
    name: string;
    age: number;
}
function identity<T extends Person>(arg: T): T {
  return arg;
}
const result  = identity<Person>({
    name: "aa";
    age: 12;
});

d'autres aiment,
Obligatoire
Lecture seule
Enregistrer

Cours en TypeScript

Dans TypeScript, les classes sont définies à l'aide du mot-clé class.

interface Person {
  name: string;
  age: number;
}
type PersonKeys = keyof Person; // Type: "name" | "age"

Modificateurs d'accès dans TypeScript

public La visibilité par défaut des membres de la classe est publique. Un membre public est accessible n'importe où
les membres protégés ne sont visibles que par les sous-classes de la classe dans laquelle ils sont déclarés.
Les membres privés sont accessibles uniquement au sein de la classe.

Membres statiques dans TypeScript

Les membres statiques dans TypeScript sont des membres (propriétés et méthodes) qui appartiennent à la classe elle-même, plutôt qu'à des instances individuelles de la classe.

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

Implémentation en TypeScript

Dans TypeScript, les interfaces définissent un contrat que les classes doivent implémenter. Une classe qui implémente une interface doit avoir toutes les propriétés et méthodes déclarées dans l'interface. Le mot-clé Implements est utilisé

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

Conclusion:

Voici quelques-uns des cas d'utilisation de base de Typescript que j'ai appris cette semaine. J'ai appris plein de trucs sympas, mais il y a encore tellement de choses à découvrir. TypeScript est en constante évolution, j'essaie donc de me tenir au courant des dernières versions et fonctionnalités et de suivre la documentation officielle et le blog de TypeScript pour connaître les dernières nouvelles et les meilleures pratiques. 
Merci de m'avoir suivi tout au long de mon voyage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!