Foreword
TypeScript in the learning process, I also encountered a lot of resistance because there is not too much to dig the scene, do IONIC before the time, only with TS, now, this series is a record harvest their own learning and, at the same time want to own this series of tutorials will certainly help the students want to learn TypeScript, I try to concise language and code to my stuff this clear.
If there are errors and omissions in the article, I hope you bear with me and pointed out a lot, you can contact me via email: [email protected]
What is TypeScript
About TypeScript there is a very interesting argument, saying TypeScript = Typed + JavaScript, uh, to be exact TypeScript should be on JavaScript extensions + type system, so this formula should be Typed + JavaScript + Extends
The official document also shows that one thing, and that is TypeScript is a superset of JavaScript, in order for us to switch seamlessly from JavaScript to TypeScript, Microsoft only provides TypeScript compiler TypeScript to JavaScript, and does not include run time, it runtime is the time to run JavaScript, it can be said that TypeScript is a new JavaScript code implementation.
TypeScript and JavaScript type
Let us look at the JavaScript basic types of systems: After Boolean, Null, Undefined, String, Number, and ES6, new type Symbol.
TypeScript what type it? Let us look at the basic types of TypeScript: Boolean, Null, Undefined, String, Number, Symbol + TypeScript extended type.
The basic underlying type is the type of top TypeScript of JavaScript + self-extensible type system.
TypeScript for extended type of JavaScript type system draws strongly typed language, there Void, Never, generics, etc. as well as higher-order types.
TypeScript form of expression
TypeScript and clear differentiation of the types of JavaScript, we look at how to become TypeScript JavaScript to rewrite it?
First on a piece of JavaScript code that:
let str = 'Hello JavaScript'
let num = 10
let arr = [1, 2, 3]
const htmlStr = `${str}_${num}_${arr.join()}`
document.querySelectorAll('.app')[0].innerHTML = str
For the above piece of code, if running in TypeScript environment, but also can run properly because TypeScript is a superset of JavaScript, compatible with such an approach.
So, the above code corresponding TypeScript is how it? Here we use the code description:
let str: string = 'Hello JavaScript'
let num: number = 10
let arr[] = [1, 2, 3] //Array<number>
const htmlStr = `${str}_${num}_${arr.join()}`
document.querySelectorAll('.app')[0].innerHTML = str
Thus, TypeScript is more standardized variable type declaration of his format is as follows:
let variable: Type = value
TypeScript Data Type
He said TypeScript data type, we can use a piece of code to demonstrate:
// primitive type
the let BOOL: = Boolean to true
the let NUM: Number = 13 is
the let STR: String = 'ABC'
// array of
the let of arr1: Number [] = [. 1, 2,. 3]
the let arr2 is: the Array <Number> = [ . 1, 2,. 3]
the let ARR3: the array <Number | String> = [. 1, '2']
// tuples
let tuple: [number, string] = [0, '2'] // special array, defining an array tuple type and number
tuple.push (2) // [0, '2', 2]
// tuple [2] // access allowed bounds
// function
let add = (x: number, y: number) : Number => X + Y
the let FUNC: (X: Number, Y: Number) => Number
FUNC = (A, B) => A + B
// objects
let obj: object = {x: 1, y: 2 }
// // 100 = Wrong obj.x
the let obj2: {X: Number, Y: Number = {X}:. 1, Y: 2}
obj2.x = 100
//void
= noreturn the let () => {}
void undefined === 0
// the any
the let X be arbitrarily assigned //
// never return value will never be
the let error = () => {
the throw new new Error ()
}
// enumeration
enum Role {// declare a number or string
Teacher, // default order zero or less + 1'd
Student, //. 1
}
TypeScript type inference
Of course, we are in the process of writing code, if you forget to add the type to write pure JavaScript code, then type inference by TypeScript will help us infer most types.
For example, our initial JavaScript code, type inference in accordance with the code to make the following explanation:
str = the let 'the Hello the JavaScript'
str = 100 // error because the assignment operation, has been inferred type string str, this assignment will be given TypeScript
the let num = 10
num = 'some string' // error, at this time has been inferred num is a number type, a string type will not assign it
the let ARR = [. 1, 2,. 3]
ARR = // error to true, the type is an array type inference array <number>, can not be assigned Boolen
ARR = [ '. 1', ' 2 ',' 3 '] // error, type inference as Array <number>, can not be assigned as Array <string> type
const htmlStr = `$ {str} _ $ {num} _ $ {arr.join ()}`
document.querySelectorAll ( '. app') [ 0] .innerHTML = str
Why should type
May be known by the code above, TypeScript the code more stringent type of judgment, then we certainly want to ask, why do it?
In fact, the biggest advantage to do so, you can make the code simple documentation, code and standardize our operations, avoid unnecessary boundary value problem, which for the development of large applications and writing test cases are of great help.
The TypeScript but also did not limit our free codes, like horseback riding, if you simply use JavaScript to write code, if there is no reins of the horse, we will fall into the dangerous and crazy, but with TypeScript, we With the equivalent of the reins, we can make our code more elegant, easier to control and understand.
to sum up
This article discusses the TypeScript and the JavaScript type system, and how to handle the type of declaration and assignment in TypeScript in. But also exposed some flexibility issues, such as an array of strings can not be assigned to the digital array. So if we want to define more than one single type of array will be in trouble, but these are not a problem, TypeScript there are also solutions.
In the next, we will see how TypeScript is to deal with these requirements, and how to give the corresponding type restrictions and definitions.
References:
TypeScript手册：TypeScript
Geeks develop real time TypeScript column: TypeScript development actual combat
Reference books: the typescript practical guide
Reference: Leaning TypeScript Chinese version (version TypeScript of this book is to explain 1.5+, not the latest version, if you buy books, do not recommend to buy, you can buy a reference book TypeScript practical guide)
My personal blog: http://www.gaoyunjiao.fun/?p=114