1. Three characteristics
(1) Programming language developed by Microsoft
(2) is a superset of javascript
(3) Follow ES6 syntax
2. Advantages of TypeScript
(1) Support es6 syntax
(2) Powerful IDE support
(3) Angular2 framework
3. Build a TypeScript development environment
(1) Use the online compiler to develop http://www.typescriptlang.org/
(2)Online compiler
Installation command: npm install -g typescript //Global installation
Use: Create a new .ts file
cd into the .ts file directory
tsc xx.ts
Using the IDE is almost the same, it will automatically convert
4. String new features
multiline string
(1) Traditional writing var content = "aaa"+
"bbb"+
"ccc";
(2)TypeScript
var content = ~ aaa
bbbb
cccc~;
string template
console.log(`hello ${myname}`);
console.log(`hello $(getName())`);
Automatically split strings
function test(template,name,age){
console.log(template);
console.log(name);
console.log(age);
}
var myname ="xiaoming";
var getAge = function () {
return 18;
}
test `hello my name is ${myname},i'm ${getAge()}`
5. New features of parameters
Parameter Type
var myname:string = "xxx"; myname=12; //There will be an error reminder
any type means that any type can be
Other: number
boolean
void // no return value required
Method parameter declaration type
function test(name:string){}
custom type
class Person{
name：string，
age：number
}
var xiaoming:Person = new Person();
default parameters
Parameters with default values must be declared at the end
Optional parameters [Add a question mark after the variable] Note: Optional parameters must be declared after the mandatory parameters
6. New features of functions
(1) Rest and Spread operator: used to declare any number of method parameters
function test(...args){}
(2) generator function: control the execution process of the function, manually suspend and resume code execution
function* doSomething(){
console.log("start");
yield;
console.log("finish);
}
var func1 = doSomething();
func1.next(); //start //Similar to breakpoint, click next step
func1.next(); //finish
(3) destructuring destructuring expression: Decompose an object or array into any number of variables through expressions
es5 writing:
function getStock(){
return{
code:"IBM"，
price:100
}
}
var stock = getStock()；
var code = stock.code;
var price = stock.price;
TypeScript writing:
/*Object*/
function getStock(){
return{
code:"IBM"，
price:{
price1:200,
price2:400
}，
aaa:"xixi",
bbb:"haha"
}
}
var {code，price} = getStock();
var {code:codex ，price}= getStock();
var {code:codex，price:{price2}}=getStock();
/*array*/
var array1 = [1,2,3,4];
var [number1,number2] = array1;
console.log(number1); //1
console.log(number2); //2
var [,,number1,number2] = array1;
console.log(number1); //3
console.log(number2); //4
var [number1,number2,...others] = array1;
console.log(number1); //1
console.log(number2); //2
console.log(others); //[3,4]
7. Expressions and loops
(1) Arrow expressions: used to declare anonymous functions to eliminate the this pointer problem of traditional anonymous functions
var myArray = [1,2,3,4,5];
console.log(myArray.filter(value=>value%2==0)); //[2,4]
(2)forEach()、for in 、for of
forEach() (1) will ignore the attribute value (2) cannot break during execution
for in loops over the keys of object key-value pairs
for of (1) will ignore the attribute value (2) can break during execution //You can traverse the string
8. Object-oriented features
(1) class declaration public
private
protected //The interior of the class and subclasses of the class can access it
(2) class constructor constructor()
not accessible from outside
(3) Inheritance
extends
super // call the constructor of the parent class
The constructor of the subclass must call the constructor of the superclass
class Person{
constructor(public name:string){
}
eat(){
console.log(this.name);
}
}
class Employee extends Person{
constructor(name:string,code:string){
super(name);
this.code = code;
}
code:string;
work(){
}
}
(4) Generics
var workers：Array<Person> = [];
workers[0] = new Person("xiaoming")；
workers[0] = new Employee ("xiaohong","2")；
(5) Interface (Interface)
interface IPerson {
name:string;
age:number;
}
class Person{
constructor(public config : IPerson){
}
}
var p1 = new Person ({
name:"xiaoming",
age:17
})
//implements
interface Animal{
eat();
}
class Sheep implements Animal{
eat(){
console.log("xxx");
}
}
(6) Modules
A file is a module
export
import
(7) Notes
(8) Type definition file (*.d.ts)
Type definition files are used to help developers use existing javascript toolkits in TypeScript, such as jquery
Source: github/DefiniteTyped
github / typings