Home > front end >  Why should I use TypeScript? Take five minutes to fit the tutorial
Why should I use TypeScript? Take five minutes to fit the tutorial

Time:05-20

Recently the TypeScript fire, Node. Js in many well-known open source projects to support, with faint unify river's lake, if which day the Node. Js can run directly TypeScript I wouldn't be too surprised,

So, I recently began to try to use this kind of "new writing", soon decided that in the future regardless of the size of the project will use TypeScript to write, then I will say my reasons, and TypeScript future prospects, finally with five minutes to fit tutorial,




1. The benefits of the TypeScript
TypeScript solved the JavaScript a big pain points, that is dynamic type,

JavaScript's dynamic type is simple, flexible, good read, but not suitable for large projects, a code will difficult to maintain, especially to read people's code, the TypeScript is adopted static type, though the trouble spot on the writing, but for a more solid structure and clear logic,

And with the support of the first IDE VSCode, type checking and tips are very powerful, greatly reduce the probability of development phase error, cooperate on close intellisense, code again from now on is no longer a dream,

This reminds me of a joke, a programmer to write the code after a run, had once passed, without any bugs, excited him to call his girlfriend, his girlfriend heard lightly back to a "oh", after this illustrates the write a pass code particularly difficult, but more importantly, told us not to find a girlfriend,

For small projects, type checking may not be that important, but smart tips can make you more comfortable in the process of writing code, this is also I want to insist to use in small projects the reason of the TypeScript,

2. The prospect of the TypeScript
What is the most important learning a new language? Not how fast, it is more simple, but how good is its prospects, only with more people will have more jobs, and more excellent open source projects,

TypeScript is developed by Microsoft and maintenance, after the release of adopted by Google, use on its own Angular2, both the big and the language has had the contact, don't need to worry too much about prospects,

And very popular front-end framework Vue3 also use TypeScript refactoring, it also makes many people worried about the existing writing incompatible, but please sit down and relax, especially big has said the existing method applies to the Vue3,

3. How to start using
TypeScript is a superset of JavaScript, some changes in your written, so only need to spend five minutes to watch the following tutorial can write TypeScript code, the tutorial here just to let you write TypeScript code as soon as possible, follow-up further usage and understanding also need to see my future articles, or through a search engine for leak fill a vacancy,

3.1 installation environment
NPM install - g typescript

//compile command
TSC hello. Ts
3.2 type written
TypeScript must declare it when creating a variable of type, there are many people will fear that this will limit their SAO, don't worry, you want to SAO also can use any and all

//a Boolean
Let isDone: Boolean=false

//number
Let n: number=6

//string
Let pepoName: string='wang'
Let the introduction: string=` ${pepoName} is ${n} years old this year!!!!!! `

//any type
Let anySomething: any='anything'

//joint types, the two types can be
Let numandstring: number | string;

//array
Let the list: the number []=[1, 2, 3]
Let listString: string []=[' 1 ', '2', '3']
Let numandString: (number | string) []=[' 1 ', 2, 3]
TypeScript and type inference, if not specified in create a variable types, so will decide depending on the type of assignment, if we can only create a variable but no assignment, will default to any,

3.3 interface
Interface is one of the characteristics of TypeScript, can create a class, and then through a call to this class to generate instances:

Interface Person {
//read-only property, only after the assignment instance is created, not can change
Readonly id: number;
Name: string;
Age: number;
//add a question mark behind allows you to create instances when this attribute is less
address? : string;
//if you want to free in the instance to add attributes, you can use any attribute
//but note that once you've created the arbitrary properties, so the inside of the interface to determine the attributes and attribute must be necessary for any subset of the set of attribute types
//such as any attribute of type string, the age will be an error, because it is number
[propName: string] : any;
}

//a property or a less would be an error
Let Tom: Person={
Id: 1,
Name: 'Tom',
Age: 18,
}
3.4 function
//blank value function
The function awsome () : void {
The console. The log (' do something ')
}

//parameters behind? Is can skip
The function buildName (firstName: string, lastName? : string, 18) age: number={
if(! {lastName)
The console. The log (firstName)
Return
}
The console. The log (firstName + lastName)
}
3.5 declaration file
When using a third-party library, must introduce its declaration file to get the code completion and prompt, you can use @ types to manage the declaration files, such as the Puppeteer is used, to introduce its declaration files need to be:

NPN install @ types/Puppeteer
  • Related