Comment passer de JavaScript à TypeScript ?

Le contenu de cet article explique comment passer de JavaScript à TypeScript ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Si vous voulez apprendre TypeScript, je pense que vous devez d'abord maîtriser très bien le javascript natif. Les connaissances les plus élémentaires sont les plus importantes. Ensuite, vous devez maîtriser ES5+ES6+ES7 (il est préférable d'en connaître quelques-unes). après 7), et maîtrisez la nouvelle technologie, vous ne serez plus aussi fatigué à l’avenir. typeScript =type+ javaScript, ajoute un type sur la base de ES5/6/7+javaScript !

TS est vraiment strict par rapport à JS, tant qu'il ne correspond pas légèrement à l'interface ou au type de valeur, ou Le le nombre de paramètres est incorrect. Si la valeur est modifiée et que le type de la valeur d'origine n'est pas

, cela provoquera une erreur. Il est recommandé d'utiliser npm pour installer TypeScript globalement, puis d'utiliser tsc *.ts pour compiler le fichier TS

'Le nouveau concept de base de TypeScript :'let app:string=2; car la valeur 2 est un nombre et l'application est spécifiée comme étant de type chaîne, donc une erreur sera signalée dans TS

Nouveau type de valeur :

any : peut être any type
vold : un type de retour vide, tel que function move():vold{} Cela signifie que cette fonction n'a pas de valeur de retour. Si elle est modifiée en any, alors elle peut être n'importe quel type de la fonction

. renvoie, mais il doit revenir sinon TS signalera une erreur

Nouveau concept : tapez l'inférence

• let app = 'hello' ; Ce code signalera une erreur car TS le traite comme let app:string = 'hello', encore une fois. Pour changer la valeur de

app, elle doit être de type chaîne, sinon une erreur sera signalée. Il s'agit d'une inférence de type

Type d'union

let app: string | number = 'hello' ; app = 1; Ce code ne signalera pas d'erreur, car app est une variable de type union, elle peut être

chaîne ou nombre, à condition qu'il corresponde à l'un des types. Voilà, bien sûr, vous pouvez en écrire plus.

Interface d'interface (un point difficile à comprendre pour les programmeurs front-end)

javaScript est aussi un langage orienté objet, mais dans ES5 il est implémenté à partir de prototypes, et est utilisé dans la classe ES6, cela vous donnera une compréhension plus claire du terme

orienté objet, mais l'orientation objet réelle dans TS est plus complète comme les langages comme JAVA, il est complet à travers des interfaces et des classes.

Vous pouvez considérer l'objet comme une femme (abstraite dans une variable let app dans TS)
• Nous utilisons une interface pour décrire cette femme (utilisez let app dans TS : interfacename )
• Enfin, utilisez quelques méthodes pour obtenir les coordonnées de la femme (utilisez la méthode de la classe class en TS pour y parvenir)

Par exemple :

class ask{

    name:string;
    
    tel ? :number  ;   //这里为什么加问号，因为你不一定能拿到她的号码，如果拿不到，那么便可以不传参数，
    
    但是如果不加? ，你又没那么号码，那么你没有参数传进来，TS就会报错 
    
    age:number ;
    
    constructor(name,age,tel){
         this.name=name;
         this.age=age;
         this.tel=tel
    }
}

interface check {

    name : string;
    
    age:number;
    
    tel ? :number;  
    
}

let woman :check = new ask ('rose',20,1888888888);//假设你拿到美女所有资料 传入构造函数

De cette façon, vous pouvez imprimer console.log(woman) et voir à quoi cela ressemble. Il n'y a aucune erreur dans le code ci-dessus.

• Une fois le code ci-dessus compilé dans un fichier JS via la commande tsc

var ask = /* @class / (function () {
function ask(name, age, tel) {


    this.name = name;
    
    
    this.age = age;
    
    
    this.tel = tel;
    
    
}
return ask;
}());
let woman = new ask('rose', 20, 1888888888);
console.log(woman)

" Il convient de noter ici qu'après de nombreuses Les codes TS sont compilés, ils n'apparaîtront pas dans les fichiers JS, tels que les énumérations const enum, les interfaces, etc. Bien sûr, vous rencontrerez plus de concepts de "

### tuples

dans JS plus tard, les tableaux peuvent stocker une grande quantité de contenu. Les soi-disant tuples sont en fait des tableaux de différents types de données
• [1,'1',true,false] En fait, c'est un tuple, mais. on l'appelle différemment.

### La différence entre l'énumération enum et la const enum

enum app { red, blue, pink, deeppink }
• console.log( app.red, app.blue, app.pink, app.deeppink) // Sortie 0,1,2,3

enum app2 { rouge = 2, bleu, rose, rose profond >
• console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // Sortie 2,3,4,5
• Le premier par défaut de l'énumération La valeur est 0 ; vous pouvez également la définir vous-même. Si la personnalisation est en conflit avec la valeur par défaut du système, TS ne la reconnaîtra pas et

ne signalera pas d'erreur, mais je ne vous recommande pas de le faire. ça. Après tout, personne ne va bien. Vous cherchez des ennuis ?

### Il y a aussi une énumération constante

const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; 
// 结果是 0 1 2 3

* Si elle contient des membres calculés, une erreur sera signalée lors de la phase de compilation :

* const enum Color {Red , Green, Blue = "blue".length};
* La différence entre une énumération constante et une énumération normale est qu'elle sera supprimée lors de la phase de compilation et ne pourra pas contenir de membres calculés. Vous le saurez après un essai

Classes et interfaces (un des plus importants)

* Une classe ne peut hériter qu'une seule interface à la fois, mais elle peut correspondre à plusieurs interfaces à la fois

* Si vous souhaitez implémenter l'héritage de plusieurs classes, utilisez des sous-classes pour continuer à hériter d'autres classes et parcourez

interface check {
name: string;
age: number;
hobby: Array<number>
fuck: number[]   //这两种写法是一样的
}

class exp implements check {
name: string
age: number
hobby:Array<number>
fuck: number[]
constructor(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
}
let app = new exp('hello', 18, [1, 2, 3], [2, 3, 4])

-------Après la compilation TS, vous get

var exp = /* @class / (function () {
function exp(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
return exp;
}());
var app = new exp('hello', 18, [1, 2, 3], [2, 3, 4]);

La chose la plus difficile à propos de TypeScript est peut-être de savoir comment comprendre une programmation orientée objet élégante. L'interface est juste à titre de description

Pour vraiment l'implémenter, vous avez besoin. la classe pour l'implémenter. ES6 joue un rôle important dans TypeScript,

Je vous suggère donc d'apprendre d'abord le javaScript natif + ES6, puis d'apprendre TypeScript,

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

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!